@(study: common.Study, request: Http.Request)

<!-- Mechanical Turk Source Code Modal Template -->
<div class="modal fade" id="mtSourceCodeModalTemplate" data-backdrop="static" data-keyboard="true" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Source Code for Mechanical Turk</h4>
            </div>
            <div class="modal-body">
                <p><b>Copy & paste</b> this code into the '<i>source</i>' field of your study's design layout in Mechanical Turk (<a target="_blank" href="http://www.jatos.org/Connect-to-Mechanical-Turk.html">more information</a>).</p>
                <p class="simulation"></p>
                <p><button class="btn btn-worker copyToClipboardButton">Copy to Clipboard&nbsp;<span class="glyphicon glyphicon-duplicate"></span></button></p>
<!-- Be careful with changing indentation - it changes the view -->
<pre><code class="mtSourceCode">
&lt;link href=&quot;https://s3.amazonaws.com/mturk-public/bs30/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;section class=&quot;container&quot; id=&quot;SurveyLink&quot; style=&quot;margin-bottom:15px; padding: 10px 10px; font-family: Verdana, Geneva, sans-serif; color:#333333; font-size:0.9em;&quot;&gt;
  &lt;div class=&quot;row col-xs-12 col-md-12&quot;&gt;

    &lt;!-- Instructions --&gt;
    &lt;div class=&quot;panel panel-primary&quot;&gt;
      &lt;div class=&quot;panel-heading&quot;&gt;&lt;strong&gt;Instructions&lt;/strong&gt;&lt;/div&gt;

      &lt;div class=&quot;panel-body&quot;&gt;
@if(study.getDescription() != null && !study.getDescription().trim().isEmpty()) {
        &lt;p id=&quot;studyDescription&quot;&gt;@study.getDescription()&lt;/p&gt;
}
        &lt;p id=&quot;previewHit&quot;&gt;This is a &lt;strong&gt;preview&lt;/strong&gt; of the study. When you&#39;ve accepted the HIT a link to the study will be shown. At the end of the study, you will receive a code to paste into the box below to receive credit for taking our study.&lt;/p&gt;

        &lt;p id=&quot;acceptedHit&quot; style=&quot;display: none&quot;&gt;Select the link below to complete the study. At the end of the study, you will receive a code to paste into the box below to receive credit for taking our study.&lt;/p&gt;

        &lt;p&gt;&lt;strong&gt;Make sure to leave this window open as you complete the study.&lt;/strong&gt; When you are finished, you will return to this page to paste the code into the box.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- End Instruction --&gt;

    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Study link:&lt;/strong&gt;&lt;/td&gt;
          &lt;td&gt;&lt;a href=&quot;&quot; id=&quot;studyUrl&quot; target=&quot;_blank&quot;&gt;link will be shown when HIT is accepted&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;strong&gt;Provide the study&#39;s confirmation code here to receive credits:&lt;/strong&gt;&lt;/td&gt;
          &lt;td style=&quot;vertical-align: middle;&quot;&gt;&lt;input class=&quot;form-control&quot; id=&quot;surveycode&quot; name=&quot;surveycode&quot; placeholder=&quot;e.g. ab123456-1234-1234-a123-a12b3ce4f567&quot; type=&quot;text&quot; /&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
&lt;/section&gt;

&lt;style type=&quot;text/css&quot;&gt;td { font-size:1.0em; padding:5px 5px; }
&lt;/style&gt;

&lt;script&gt;
  // Hint: What&#39;s called an study in JATOS is called a survey in MT
  var address = &quot;addressDummy&quot;;
  var studyPath = &quot;studyPathDummy&quot;;
  var batchId = &quot;batchIdDummy&quot;;
  var query = document.URL.split(&#39;?&#39;)[1];

  window.onload = function() {
    if ((typeof query === &quot;undefined&quot;) || query.indexOf(&quot;ASSIGNMENT_ID_NOT_AVAILABLE&quot;) &gt; -1) {
      // Show preview
      document.getElementById(&quot;previewHit&quot;).style.display = &quot;block&quot;;
      document.getElementById(&quot;acceptedHit&quot;).style.display = &quot;none&quot;;
      var studyUrlHref = &quot;&quot;;
      var studyUrlText = &quot;link will be shown when HIT is accepted&quot;;
    } else {
      // Show accepted HIT
      document.getElementById(&quot;previewHit&quot;).style.display = &quot;none&quot;;
      document.getElementById(&quot;acceptedHit&quot;).style.display = &quot;block&quot;;
      var studyUrlHref = address + studyPath + &quot;?batchId=&quot; + batchId + &quot;&&quot; + query;
      var studyUrlText = &quot;link to HIT&quot;;
    }
    document.getElementById(&quot;studyUrl&quot;).setAttribute(&quot;href&quot;, studyUrlHref);
    document.getElementById(&quot;studyUrl&quot;).innerHTML = studyUrlText;
  }
&lt;/script&gt;
</code></pre>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>

var studyId = @study.getId();

$('#batchList').on('click', '.mtWorkerSourceCode', function() {
    var batch = getBatchData(this);
    showMTSourceCodeModal(batch.id);
});

function showMTSourceCodeModal(batchId) {
    var modal = $('#mtSourceCodeModalTemplate').clone();
    $(modal).removeAttr('id');

    var address = "@utils.common.Helpers.getRealBaseUrl(request)";
    var studyPath = "publix/@study.getId()/start";
    var randomMturkWorkerId = Math.floor(Math.random() * 1000000);
    var mturkSandboxUrl = address + studyPath + "?batchId=" + batchId + "&workerId=" + randomMturkWorkerId
        + "&assignmentId=def&turkSubmitTo=sandbox";

    // Fill dummy variables in template source code
    $(modal).find('.mtSourceCode').text(function() {
        return $(this).text()
            .replace("addressDummy", address)
            .replace("studyPathDummy", studyPath)
            .replace("batchIdDummy", batchId);
    });
    $(modal).find('.simulation').html("To try it out you can imitate an MTurk Sandbox worker by using "
        + '(<a target="_blank" href="http://www.jatos.org/Tips-and-Tricks.html#imitate-a-run-from-mechanical-turk">more information</a>):<br>'
                    + '<div><i>' + mturkSandboxUrl + '</i>'
            + '<button type="button" class="btn clipboardButton btn-xs" data-toggle="tooltip" title="Copy this link to the clipboard.">'
            + '<span class="glyphicon glyphicon-duplicate gray-light"></span></button></div>');

    $(modal).modal('show');

    // Select and copy to clipboard by button
    $(modal).on('click', '.copyToClipboardButton', function(e) {
        var mtSourceCode = $(modal).find('.mtSourceCode').text();
        navigator.clipboard.writeText(mtSourceCode);
    });
}

// Select and highlights a text (can't use .select() on a tag that's not a textarea)
function selectText(textElement) {
    var range;
    var selection;
    if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(textElement);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(textElement);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

</script>