{% extends "_templates/global/Page.html" %}
{{ block content }}
<style>
    table {
        width: 60%;
        border-collapse: collapse;
        border: 1px solid black;
        text-align: center;
        border-radius: 8px;
        overflow: hidden;
        margin: auto;
    }

    th {
        background-color: #f2f2f2;
        border: 1px solid black;

        padding: 15px;
    }

    td {
        border: 1px solid black;
        padding: 15px;
    }

    .highlight {
        background-color: #ffcc80;
    }

    .winning {
        background-color: #b393d3;
    }

    .alternative-winning {
        background-color: lightseagreen;
    }

    .second-alternative-winning {
        background-color: #e8c547;
    }

    .text {
        text-align: justify;
        width: 90%;
        margin: auto
    }

    .image {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 80%;}

        .image2 {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
    }
</style>
<div class="text">

    <div class="container">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Setting</h5>
                        <p class="card-text">
                            {{ strings.setting_imagine|safe }}
                            {{ strings.setting_specifics_TTC|safe }}
                        </p>
                    </div>
                </div>
                <br>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Matching app</h5>
                        <p class="card-text">
                            {{ strings.matching_app_TTC|safe }}
                        </p>
                    </div>
                </div>
                <br>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Example</h5>
                        <p class="card-text">
                            {{ strings.example_intro_TTC|safe }}
                        </p>
                        {% include "_templates/TTC/room_ranking.html" %}
                        <p>
                            {{ strings.example_intermediate_TTC|safe }}


                            <img class="image" src="{{ static 'TTC/TTC_round_1.png' }}"/><br><br>

                        <p>

                            {{ strings.example_outro_TTC|safe}}
                            <img class="image2" src="{{ static 'TTC/TTC_round_2.png' }}"/><br><br>

                        </p>
                        </p>
                        </p>
                    </div>
                </div>
                <p/>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Outcome</h5>
                        <p class="card-text">

                            {{ strings.payoff_TTC_BordaCount|safe}}

                        </p>
                        <p class="card-text">
                            {{ strings.payoff_example_TTC|safe}}

                        </p>
                        <p class="card-text">
                            {{ strings.payoff_info|safe}}

                        </p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div><br>
<div class="container">
    <div class="d-flex align-items-center justify-content-between mb-3">
        {{ next_button}}
        <p class="text-muted mb-0">Part {{ group.round_number }}/3</p>
    </div>
</div>
{{ endblock }}