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

{{ block content }}
<style>
    table {
        width: 80%;
        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: lightgray;
    }

    .winning {
        background-color: #b393d3;
    }

    .winning-bid {
        background-color: mintcream;
    }

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

    .text {
        text-align: justify;
        width: 90%;
        margin: auto
    }
</style>


<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_VCG|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_VCG|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_VCG|safe }}
                    </p>

                    {% include "_templates/VCG/bids.html" %}

                    {{ strings.example_outro_VCG|safe}}

                    {% include "_templates/VCG/winning_allocation.html" %}
                    </p>
                </div>
            </div>
        </div>
        <p/>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Tenants who have a decisive influence on the final matching</h5>
                <p class="card-text">
                    {{ strings.tenants_decisive_influence_VCG|safe }}
                </p>

                {% include "_templates/VCG/bids_without.html" %}

                {{ strings.maximum_bids_without_VCG|safe }}

                {% include "_templates/VCG/alternative_winning_allocation.html" %}

                {{ strings.alternative_matching_VCG|safe }}


                {% include "_templates/VCG/non_decisive_allocation.html" %}

                {{ strings.non_decisive_VCG|safe}}
            </div>
        </div>
        <p/>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Payment to the home improvement fund</h5>
                <p class="card-text">

                {{ strings.payment_home_improvement_fund_VCG|safe}}
                {% include "_templates/VCG/payment.html" %}
                </p>
            </div>
        </div><p/>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Bonus payment</h5>
                <p class="card-text">

                {{ strings.payoff_VCG|safe}}

                </p>
                <p class="card-text">
                {% include "_templates/VCG/bids.html" %}<br>
                {{ strings.payoff_example_VCG|safe}}

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

                        </p>
            </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 {{ player.round_number }}/3</p>
    </div>
</div>
{{ endblock }}