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

{% block title %}

<div style="text-align: center;">
Endowment Assignment (History)
</div>
{% endblock %}

{% block content %}
<style>
            .otree-timer {
        display: none;
    }
                .space {
        color: white;
        font-weight: bold;
    }

            .endowment-high {
        color: #28a745;

    }

    .endowment-low {
        color: #dc3545;

    }
  /* Original members grid - for second generation */
  .members {
    display: grid;
    grid-template-columns: repeat(3, 180px);
    gap: 24px;
    justify-content: center;
    margin-top: 16px;
  }

  /* NEW: Smaller members grid - for first generation */
  .members-small {
    display: grid;
    grid-template-columns: repeat(3, 120px); /* smaller columns */
    gap: 16px; /* smaller gap */
    justify-content: center;
    margin-top: 16px;
  }

  .member {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Original image box */
  .image-box {
    position: relative;
    width: 150px;
    height: 150px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 4px rgba(0,0,0,.1);
    overflow: hidden;
    border-radius: 6px;
  }
  .image-box img { width: 150px; height: 150px; display:block; }

  /* NEW: Smaller image box - for first generation */
  .image-box-small {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 4px rgba(0,0,0,.1);
    overflow: hidden;
    border-radius: 4px;
  }
  .image-box-small img { width: 100px; height: 100px; display:block; }

  .image-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 5px 0;
    font-size: 14px;
    text-align: center;
  }

  /* NEW: Smaller caption for first generation */
  .image-caption-small {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 3px 0;
    font-size: 11px;
    text-align: center;
  }

  .highlight-you { border: 8px solid grey; background:#fff; }
  .highlight-highedw { border: 8px solid red; background:#fff; }

  /* NEW: Thinner borders for small boxes */
  .highlight-you-small { border: 5px solid grey; background:#fff; }

  .you-label { color:#000; font-weight:700; }

  .text-box {
    margin-top: 10px;
    text-align: center;
    width: 100%;
    min-height: 40px;
    font-size: 14px;
    font-weight: bold;
  }

  /* NEW: Smaller text box for first generation */
  .text-box-small {
    margin-top: 6px;
    text-align: center;
    width: 100%;
    min-height: 30px;
    font-size: 11px;
    font-weight: bold;
  }

  /* NEW: Smaller description text for first generation */
  .description-small {
    margin-left: 11%;
    margin-right: 11%;
    font-size: 13px;
  }

  .description-small-bg {
    margin-left: 11%;
    margin-right: 11%;
    background-color: #f2f2f2;
    padding: 6px;
    border-radius: 6px;
    font-size: 13px;
  }
</style>

<div style="display: flex; flex-direction: column; align-items: center; text-align: center;">
<Br>
<br>
Below is a description of the history of assignment of endowments in your group. <Br>

<br>

</div>



<!-- FIRST GENERATION (SMALLER) -->
<div class="members-small" style="opacity: 0.5;">
  <!-- Member 1 -->
  <div class="member">
    <div class="image-box-small {% if MyOrder == 1 %}highlight-you-small{% endif %}">
      <img src="/static/f{{ player.participant.Ana_Mmb1_id }}.png">
      <div class="image-caption-small">
        <strong>{{ player.participant.Ana_fname_Mmb1 }}-I</strong>
        {% if MyOrder == 1 %}<span class="you-label"><br>(Your Family)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
      </div>
    </div>
    <div class="text-box-small">
            <div class="{% if player.participant.Ana_Edmt_Mmb1 == 30 %}endowment-high{% else %}endowment-low{% endif %}">
        {{ player.participant.Ana_Edmt_Mmb1 }} ECUs ({% if player.participant.Ana_Edmt_Mmb1 == 30 %}High{% else %}Low{% endif %})
    </div>
    </div>
  </div>

  <!-- Member 2 -->
  <div class="member">
    <div class="image-box-small {% if MyOrder == 2 %}highlight-you-small{% endif %}">
      <img src="/static/f{{ player.participant.Ana_Mmb2_id }}.png">
      <div class="image-caption-small">
        <strong>{{ player.participant.Ana_fname_Mmb2 }}-I</strong>
        {% if MyOrder == 2 %}<span class="you-label"><br>(Your Family)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
      </div>
    </div>
    <div class="text-box-small">
            <div class="{% if player.participant.Ana_Edmt_Mmb2 == 30 %}endowment-high{% else %}endowment-low{% endif %}">
        {{ player.participant.Ana_Edmt_Mmb2 }} ECUs ({% if player.participant.Ana_Edmt_Mmb2 == 30 %}High{% else %}Low{% endif %})
    </div>
    </div>
  </div>

  <!-- Member 3 -->
  <div class="member">
    <div class="image-box-small {% if MyOrder == 3 %}highlight-you-small{% endif %}">
      <img src="/static/f{{ player.participant.Ana_Mmb3_id }}.png">
      <div class="image-caption-small">
        <strong>{{ player.participant.Ana_fname_Mmb3 }}-I</strong>
        {% if MyOrder == 3 %}<span class="you-label"><br>(Your Family)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
      </div>
    </div>
    <div class="text-box-small">
            <div class="{% if player.participant.Ana_Edmt_Mmb3 == 30 %}endowment-high{% else %}endowment-low{% endif %}">
        {{ player.participant.Ana_Edmt_Mmb3 }} ECUs ({% if player.participant.Ana_Edmt_Mmb3 == 30 %}High{% else %}Low{% endif %})
    </div>
    </div>
  </div>
</div>

<div class="description-small"style="opacity: 0.5;" >
    {% if MyOrder == 1 %}{{ player.participant.Ana_fname_Mmb1 }}-I
    {% elif MyOrder == 2 %} {{ player.participant.Ana_fname_Mmb2 }}-I
    {% elif MyOrder == 3 %} {{ player.participant.Ana_fname_Mmb3 }}-I
    {% endif %} received the <b>{% if player.participant.Ana_Endowment == 30 %}high{% else %}low{% endif %}</b> endowment. <br><br>
</div>

<div class="description-small-bg" style="opacity: 0.5;">
    In the first generation, the high endowment above was assigned to who
    {% if Ana_RankingType == 1 %}
       grabbed the <u>least</u> number of tokens in the Token Grabbing Task among the three group members.
    {% elif Ana_RankingType == 2 %}
       grabbed the <u>most</u> number of tokens in the Token Grabbing Task among the three group members.
    {% elif Ana_RankingType == 3 %}
       had the <u>most</u> heads flipped in the Coin Flipping Task among the three group members.
    {% elif Ana_RankingType == 4 %}
       had the <u>least</u> heads flipped in the Coin Flipping Task among the three group members.
    {% endif %}
</div>

<BR><BR>
<div class="members">
  <!-- Member 1 -->
  <div class="member">
    <div class="image-box {% if MyOrder == 1 %}highlight-you {% endif %}">
      <img src="/static/f{{ player.participant.Ana_Mmb1_id }}.png">
      <div class="image-caption">
        <strong>{{ player.participant.Ana_fname_Mmb1 }}-II</strong>
        {% if MyOrder == 1 %}<span class="you-label"><br>(You)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
      </div>
    </div>
    <div class="text-box">
            <div class="{% if player.participant.Ana_Edmt_Mmb1 == 30 %}endowment-high{% else %}endowment-low{% endif %}">
        {{ player.participant.Ana_Edmt_Mmb1 }} ECUs ({% if player.participant.Ana_Edmt_Mmb1 == 30 %}High{% else %}Low{% endif %})
    </div>
    </div>
  </div>

  <!-- Member 2 -->
  <div class="member">
    <div class="image-box {% if MyOrder == 2 %}highlight-you {% endif %}">
      <img src="/static/f{{ player.participant.Ana_Mmb2_id }}.png">
      <div class="image-caption">
        <strong>{{ player.participant.Ana_fname_Mmb2 }}-II</strong>
        {% if MyOrder == 2 %}<span class="you-label"><br>(You)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
      </div>
    </div>
    <div class="text-box">
            <div class="{% if player.participant.Ana_Edmt_Mmb2 == 30 %}endowment-high{% else %}endowment-low{% endif %}">
        {{ player.participant.Ana_Edmt_Mmb2 }} ECUs ({% if player.participant.Ana_Edmt_Mmb2 == 30 %}High{% else %}Low{% endif %})
    </div>
    </div>
  </div>

  <!-- Member 3 -->
  <div class="member">
    <div class="image-box {% if MyOrder == 3 %}highlight-you {% endif %}">
      <img src="/static/f{{ player.participant.Ana_Mmb3_id }}.png">
      <div class="image-caption">
        <strong>{{ player.participant.Ana_fname_Mmb3 }}-II</strong>
        {% if MyOrder == 3 %}<span class="you-label"><br>(You)</span>
                {% else %}                <span class="space"><br>(Not You)</span>
                {% endif %}
      </div>
    </div>
    <div class="text-box">
            <div class="{% if player.participant.Ana_Edmt_Mmb3 == 30 %}endowment-high{% else %}endowment-low{% endif %}">
        {{ player.participant.Ana_Edmt_Mmb3 }} ECUs ({% if player.participant.Ana_Edmt_Mmb3 == 30 %}High{% else %}Low{% endif %})
    </div>
    </div>
  </div>
</div>
<div style="margin-left: 11%; margin-right: 11%;">
    {% if MyOrder == 1 %}{{ player.participant.Ana_fname_Mmb1 }}-II
    {% elif MyOrder == 2 %} {{ player.participant.Ana_fname_Mmb2 }}-II
    {% elif MyOrder == 3 %} {{ player.participant.Ana_fname_Mmb3 }}-II
    {% endif %} (You)  has received the <b>{% if player.participant.Ana_Endowment == 30 %}high{% else %}low{% endif %}</b> endowment. <br><br>

</div>



<div style="margin-left: 11%; margin-right: 11%; background-color: #f2f2f2; padding: 8px; border-radius: 6px;">
    In the second generation, these endowments were directly transferred from families in the previous generation to successors in the next generation.
    </div>
<br>
<br>



<div style="text-align: center;"> Please read the information above carefully.<br> The button will appear shortly. </div>

<!--{{ next_button }}-->
{% endblock %}