{% extends "psynet_layout.html" %}

{% block body %}
    <div id="container">
      <div style="max-width: max-content;">
        <div class="col-xs-2">
          <img id="adlogo" src="/static/images/logo.png" alt="Psynet logo" style="width: 150px; float: left;">
        </div>
        <h1 id="header" style="clear: both;">{{ pgettext("abort_possible", "Are you sure you want to abort the experiment?") }}</h1>
        <hr>
        <p>
          {{ pgettext("abort_possible", "If you click the Abort button, the experiment will end early, and you will be automatically paid the compensation you have earned so far.") }}
            {{ pgettext("abort_possible", "Please only contact us if you have trouble receiving your payment.") }}
            {{ pgettext("abort_possible", "See the information below for details of your compensation.") }}
        </p>
        <table class="table table-sm table-striped">
            <tbody>
              <tr><th>{{ gettext("Assignment ID") }}</th><td>{{ participant_abort_info.assignment_id }}</td></tr>
              <tr><th>{{ gettext("HIT ID") }}</th><td>{{ participant_abort_info.hit_id }}</td></tr>
              <tr><th>{{ gettext("Accumulated reward") }}</th><td>{{ participant_abort_info.accumulated_reward }}</td></tr>
            </tbody>
        </table>
        <button type="button" id="close-button" class="btn btn-primary btn-lg" style="float: left; margin-top: 15px;" onclick="window.close();">
          {{ gettext("Close window") }}
        </button>
        <button type="button" id="abort-button" class="btn btn-danger btn-lg" style="float: right; margin-top: 15px;" onclick="setAborted('{{ participant_abort_info.assignment_id }}');">
          {{ gettext("Abort experiment") }}
        </button>
      </div>
    </div>
    <script>
      setAborted = function(assignmentId) {
        fetch("/set_participant_as_aborted/" + assignmentId)
          .then(function () {
            dallinger.submitAssignment();
          });
      }
    </script>
{% endblock %}