{% block content %}

    <script>
        const angleFromSource = {% if player.id_in_group == 1 %} 0 {% elif player.id_in_group == 2 %} 120 {% elif player.id_in_group == 3 %} 240 {% endif %};
        const angleToSource = {% if player.id_in_group == 1 %} 0 {% elif player.id_in_group == 2 %} 240 {% elif player.id_in_group == 3 %} 120 {% endif %};
        const startingMoney = {{ Constants.initial_money }}; // Starting money
        let gameTime = {{ Constants.total_time }}; // 120 seconds
    </script>

    <style>
        @import "{% static 'negotiate.css' %}";
        .otree-timer {
          display: none;
        }
    </style>
    <table border="0" width="100%">
        <div class="round-floating">Round {{ player.round_number }} / {{ Constants.num_rounds }}</div>
        <tr>
            <td width="15%" class="participant-left">
                {% if left_role == 'Human' %}
                  <img
                    src="{% static 'images/human_silhouette.svg' %}"
                    alt="Human silhouette"
                    width="40">
                  <p>Human</p>

                {% else %}
                  <img
                    src="{% static 'images/ai_silhouette.svg' %}"
                    alt="AI silhouette"
                    width="40">
                  <p>AI</p>

                {% endif %}
                <p class="gain-box" id="gain-a"> --</p>
            </td>
            <td style="text-align: center">
                <div class="money" id="remaining_money">Each point is worth: --</div>
                <div class="coalition-timer" id="coalition_timer"></div>
            </td>
            <td width="15%" class="participant-right">
                {% if right_role == 'Human' %}
                  <img
                    src="{% static 'images/human_silhouette.svg' %}"
                    alt="Human silhouette"
                    width="40">
                  <p>Human</p>

                {% else %}
                  <img
                    src="{% static 'images/ai_silhouette.svg' %}"
                    alt="AI silhouette"
                    width="40">
                  <p>AI</p>

                {% endif %}
                <p class="gain-box" id="gain-b"> --</p>
            </td>
        </tr>
        <tr>
            <td></td>
            <td style="text-align: center">
                <div class="board" id="triangle-board"></div>
            </td>
            <td></td>
        </tr>
         <tr>
            <td></td>
            <td style="text-align: center" class="player-info">
                <img src="{% static 'images/human_silhouette.svg' %}" alt="Your Icon" width="40">
                <p>You</p>
                <p class="gain-box" id="gain-you"> --</p>
            </td>
            <td></td>
        </tr>
    </table>


    <div id="status"></div>

    <script src="{% static 'negotiate.js' %}">
    </script>
{% endblock %}