{{ extends "global/Page.html" }}
{{ block title }}Your Session Results{{ endblock }}

{{ block content }}
<div class="ds-page">
  <div class="ds-title">Your Session Results</div>
  <div class="ds-subtitle">Here is a full breakdown of what you earned during your codebreaker session.</div>

  <div class="card">
    <div class="payoff-grid">
      <div class="payoff-tile">
        <div class="pt-label">Show-up Fee</div>
        <div class="pt-val">${{ show_up_fee }}</div>
      </div>
      <div class="payoff-tile">
        <div class="pt-label">Word Bonus</div>
        <div class="pt-val">${{ task_earnings }}</div>
      </div>
      <div class="payoff-tile">
        <div class="pt-label">Sentences Submitted</div>
        <div class="pt-val">{{ submissions|length }}</div>
      </div>
      <div class="payoff-tile highlight">
        <div class="pt-label">Total Compensation</div>
        <div class="pt-val">${{ total_payment }}</div>
      </div>
    </div>

    <div class="card-section-title">Sentence-by-Sentence Breakdown</div>

    {{ if submissions }}
    <table class="submission-log">
      <thead>
        <tr>
          <th>Order</th>
          <th>Sentence</th>
          <th>Words</th>
          <th>Correct Words</th>
          <th>Errors</th>
          <th>Earned</th>
        </tr>
      </thead>
      <tbody>
        {{ for sub in submissions }}
        <tr>
          <td>{{ sub.submission_order }}</td>
          <td>Sentence {{ sub.sentence_id }}</td>
          <td>{{ sub.word_count }}</td>
          <td>{{ sub.correct_words }}</td>
          <td>{{ sub.num_word_errors }}</td>
          <td>${{ sub.earnings }}</td>
        </tr>
        {{ endfor }}
      </tbody>
    </table>
    {{ else }}
    <p style="font-size:14px;color:#a0aec0;text-align:center;padding:20px 0;">
      No sentences were submitted during this session.
    </p>
    {{ endif }}

    <div class="callout green" style="margin-top:20px;">
      Your total payment of <strong>${{ total_payment }}</strong> will be added to your participant account.
    </div>
  </div>

  {{ next_button }}
</div>
{{ endblock }}