{% extends "TREATMENT_01/AppsBaseStyles.html" %}
{% load otree static %}

{% block styles %}
    <style type="text/css">
        #text-wrapper #convincing-table {
            margin-top: 1rem;
        }
        #text-wrapper #convincing-table label {
            display: none;
        }
        #text-wrapper #convincing-table input {
            margin: 1rem 0.5rem 0;
            font-weight: bold;
            text-align: center;
            width: 5rem;
        }
        .center {
            text-align: center;
        }
        #text-wrapper .arguments-table {
            text-align: center;
            margin-top: 1rem;
            width: 100%;
            border-top: solid black 1px;
        }
        #text-wrapper .arguments-table thead {
            background-color: #F7F7F7;
        }
        #text-wrapper .arguments-table thead th {
            padding: 0.5rem 0.25rem;
        }
        #text-wrapper .arguments-table td {
            padding-top: 0.25rem;
            font-size: 0.9rem;
            border-top: solid black 1px;
        }
        #text-wrapper .arguments-table .fixed-argument {
            padding: 0.25rem 0.5rem 0.375rem;
            text-align: justify;
        }
        #text-wrapper .arguments-table .top {
            vertical-align: top;
        }
    </style>
{% endblock %}

{% block title %}
    Abschlussaufgabe
{% endblock %}

{% block content %}
    <div id="fixed-header-line">
        <div id="countdown-message">
            Bitte kommen Sie jetzt zum Ende!
        </div>
        <div id="countdown">
            Verbleibende Zeit:
            <span class="otree-timer__time-left">3:00</span>
        </div>
    </div>
    <div id="text-wrapper">
        Ihre Pro- und Contra-Sammlung ist nun fertig.
        <br><br>
        Bitte nominieren Sie jetzt noch jeweils für die Pro- und Contra-Seite ein Argument,
        das Sie am meisten überzeugt, indem Sie die jeweilige Nummer im Eingabefeld notieren.
        Hierfür haben Sie 3 Minuten Zeit.
        <br><br>
        <table id="convincing-table">
            <tr>
                <td></td>
                <td class="center">Nummer</td>
            </tr>
            {% if participant.vars.pro_argument_counter > 0 %}
            <tr>
                <td>Das überzeugendste Pro-Argument für mich:</td>
                <td>{% formfield player.MOST_CONV_PRO_ARG %}</td>
            </tr>
            {% endif %}
            {% if participant.vars.con_argument_counter > 0 %}
            <tr>
                <td>Das überzeugendste Contra-Argument für mich:</td>
                <td>{% formfield player.MOST_CONV_CON_ARG %}</td>
            </tr>
            {% endif %}
        </table>
        <table class="arguments-table">
            <thead>
                <tr>
                    <th>Nr.</th>
                    <th>Pro Kündigung</th>
                    <th>Nr.</th>
                    <th>Contra Kündigung</th>
                </tr>
            </thead>
            <tbody>
            {% for i, argument in arguments_table %}
            {% if participant.vars.pro_argument_counter > i or participant.vars.con_argument_counter > i %}
                <tr>
                    <td class="bold top">{{ argument.number.0 }}</td>
                    <td class="left top">
                    {% if participant.vars.pro_argument_counter > i %}
                        <div class="fixed-argument">
                            {{ argument.pro }}
                        </div>
                    {% endif %}
                    </td>
                    <td class="bold top">{{ argument.number.1 }}</td>
                    <td class="left top">
                    {% if participant.vars.con_argument_counter > i %}
                        <div class="fixed-argument">
                            {{ argument.con }}
                        </div>
                    {% endif %}
                    </td>
                </tr>
            {% endif %}
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% next_button %}
{% endblock %}

{% block scripts %}
    <script>
    $( document ).ready(function() {
        var distance = 180000;
        var pageInterval = setInterval(function() {
            distance = distance - 1000;
            if( distance == 0 ) {
                $('#countdown-message').attr('style', 'visibility:visible')
            }
            if( distance >= 0 ) {
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                if( seconds < 10 ) { seconds = "0" + seconds }
                $('.otree-timer__time-left').text(minutes + ":" + seconds);
            } else {
                clearInterval(pageInterval);
            }
        }, 1000);
    });
    </script>
{% endblock %}