{{ extends "global/Page.html" }}
{{ block title }}Introduction{{ endblock }}

{{ block content }}

<div style="max-width: 680px; margin: 0 auto; padding: 2rem 1.5rem;">

  <div style="margin-bottom: 2rem;">
    <h1 style="font-size: 22px; font-weight: 500; margin: 0 0 0.5rem;">Welcome to this experiment</h1>
    <p style="font-size: 16px; color: #6b7280; margin: 0; line-height: 1.6;">You will play a series of games with other participants.</p>
  </div>

  <div style="border-left: 2px solid #d1d5db; padding-left: 1rem; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.75rem;">
    <p style="font-size: 15px; margin: 0; line-height: 1.6;">
        In each round, you will be matched with one other person in your group. This person may change from round to round.
    </p>

    <p style="font-size: 15px; margin: 0; line-height: 1.6;">
        In this task, each person chooses between <strong>Option A</strong> and <strong>Option B</strong>.
    </p>

    <p style="font-size: 15px; margin: 0; line-height: 1.6;">
        One person will choose first. The other will choose second after seeing the first choice. Roles are randomly assigned in each round.
    </p>

    <p style="font-size: 15px; margin: 0; line-height: 1.6;">
        Your earnings depend on both choices:
    </p>

    <ul style="font-size: 15px; margin: 0; padding-left: 1.25rem; line-height: 1.8;">
        <li>If both choose <strong>Option A</strong>, each earns <strong>10</strong>.</li>
        <li>If one chooses <strong>Option A</strong> and the other <strong>Option B</strong>, the person who chose <strong>Option B</strong> earns <strong>15</strong>, and the person who chose <strong>Option A</strong> earns <strong>0</strong>.</li>
        <li>If both choose <strong>Option B</strong>, each earns <strong>5</strong>.</li>
    </ul>

    <p style="font-size: 15px; margin: 0; line-height: 1.6;">
        Before roles are revealed, you will make the following choices:
    </p>

    <ul style="font-size: 15px; margin: 0; padding-left: 1.25rem; line-height: 1.8;">
        <li>Your choice <strong>as First Player</strong> (Option A or Option B).</li>
        <li>Your choice <strong>as Second Player if the First Player chooses Option A</strong>.</li>
        <li>Your choice <strong>as Second Player if the First Player chooses Option B</strong>.</li>
        <li>How many people you believe will do Action A in your group.</li>

    </ul>

    <p style="font-size: 15px; margin: 0; line-height: 1.6;">
        After that, roles are randomly assigned. The First Player’s choice is applied. The Second Player’s choice is taken from your answers above, depending on what the First Player chose.
    </p>
</div>

  <div style="margin-bottom: 2rem;">
    <p style="font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; margin: 0 0 0.75rem;">Standard payoff matrix</p>
    <div style="border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
      <div style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
        <table style="width: 100%; min-width: 400px; border-collapse: collapse; font-size: 14px;">
          <thead>
            <tr style="background: #f9fafb;">
              <th style="padding: 10px 14px; text-align: left; font-weight: 500; color: #6b7280; border-bottom: 1px solid #e5e7eb;">Your action</th>
              <th style="padding: 10px 14px; text-align: left; font-weight: 500; color: #6b7280; border-bottom: 1px solid #e5e7eb;">Other player's action</th>
              <th style="padding: 10px 14px; text-align: right; font-weight: 500; color: #6b7280; border-bottom: 1px solid #e5e7eb;">Your payoff</th>
              <th style="padding: 10px 14px; text-align: right; font-weight: 500; color: #6b7280; border-bottom: 1px solid #e5e7eb;">Other player's payoff</th>
            </tr>
          </thead>
          <tbody>
            {{ for row in payoff_matrix }}
            <tr style="border-bottom: 1px solid #e5e7eb;">
              <td style="padding: 10px 14px;">{{ row.player_action }}</td>
              <td style="padding: 10px 14px;">{{ row.partner_action }}</td>
              <td style="padding: 10px 14px; text-align: right; font-weight: 500;">{{ row.payoff }}</td>
              <td style="padding: 10px 14px; text-align: right; font-weight: 500;">{{ row.partner_payoff }}</td>
            </tr>
            {{ endfor }}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div style="border-top: 1px solid #e5e7eb; padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;">
    <p style="font-size: 15px; color: #6b7280; margin: 0;">When you're ready, click to begin.</p>
    {{ next_button }}
  </div>

</div>

{{ endblock }}