{% extends "global/Page.html" %}
{% load otree %}

{% block title %}Fin de l'expérience{% endblock %}

{% block content %}

<style>
  /* Match the stored questionnaire template precisely */
  .p1-wrap{
    max-width: 980px;
    margin: 0 auto;
  }

  .p1-wrap p{
    margin-bottom: 14px;
  }

  .p1-wrap hr{
    margin: 18px 0;
  }

  .p1-section{
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .next-btn-wrap{
    text-align: right;
    margin-top: 24px;
  }

  .activity-title-box{
    display: inline-block;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 8px 16px;
    background: #fafafa;
    font-weight: 600;
    margin: 18px 0 10px 0;
  }

  /* Keep table clean and consistent (no change to content) */
  .pay-table{
    width: 100%;
    max-width: 650px;
    border-collapse: collapse;
    margin-top: 10px;
    margin-bottom: 14px;
  }
  .pay-table td, .pay-table th{
    border: 1px solid #e6e6e6;
    padding: 10px;
    vertical-align: top;
  }
</style>

<div class="p1-wrap">
  <div class="p1-section">

    <p>
      L’expérience est terminée. Merci pour votre participation.
    </p>

    <p>
      Votre paiement total est de {{ final_payment }}.
    </p>

    {% if not is_session1 %}
    <p>
      Voici la partie qui a été sélectionnée pour calculer votre paiement :
      {% if implemented_part == "part1" %} Partie 1.
      {% elif implemented_part == "part2" %} Partie 2.
      {% elif implemented_part == "part3" %} Partie 3.
      {% elif implemented_part == "part4" %} Partie 4.
      {% else %} Partie inconnue.
      {% endif %}
    </p>
    {% else %}
    <p>
      Voici la partie qui a été sélectionnée pour calculer votre paiement :
      {% if implemented_part == "part1" %} Partie 1.
      {% elif implemented_part == "part2" %} Partie 2.
      {% elif implemented_part == "part4" %} Partie 3.
      {% else %} Partie inconnue.
      {% endif %}
    </p>
    {% endif %}

    <hr>

    <div class="activity-title-box">
      Détail du paiement
    </div>

    <table class="pay-table">
      <tbody>
        <tr>
          <td style="width: 70%;">Indemnité de participation</td>
          <td style="width: 30%; text-align: right;">
            {% if not use_wtp %} {{ participation_fee }}
            {% else %} {{ wtp_base_payment }}
            {% endif %}
          </td>
        </tr>

        <tr>
          <td>Gains liés à la partie sélectionnée</td>
          <td style="text-align: right;">{{ payoff_implemented_part }}</td>
        </tr>

        <tr>
          <td>Bonus fixe associé à la partie sélectionnée</td>
          <td style="text-align: right;">{{ bonus_implemented_part }}</td>
        </tr>
      </tbody>
    </table>

    <div class="next-btn-wrap">
      {{ next_button }}
    </div>

  </div>
</div>

{% endblock %}