{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Wähle Experte
{% endblock %}
{% block content %}

<style>
    .title-container {
        display: flex;
        justify-content: space-between;
        padding-top: 2em;
        padding-bottom: 2em;
    }
    .otree-timer {
        display: none;
    }
    .otree-title {
        display: none;
    }
</style>

<div class="title-container">
    <div class="title_element">
        <h2>Wählen Sie einen Experten aus:</h2>
    </div>
</div>

<style>
    .expert-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1em;
    }

    .expert-card {
        background-color: #f1eef6;
        text-align: center;
        border: solid;
        border-radius: 1em;
        padding-bottom: 0.3em;
        margin: 1em;
        overflow: hidden;
    }

    .expert-name {
        width: 100%;
        padding: 0.3em;
        margin-bottom: 0.3em;
        background-color: #bdc9e1;
    }
    .outside-option {
        margin-right: 1em;
        text-align: center;
    }
    td {
        vertical-align: middle;
    }
</style>

<form method="post">

    <div class="expert-list" id="expert-list">
        {% for experte in experten %}
            <div class="expert-card" id="card-{{ experte.id_in_group }}">
                <p class="expert-name"><b> Experte {{ forloop.counter }}</b></p>
                <table class="table">
                    <tbody>
                        <tr>
                            <th scope="col" colspan="2"></th>
                            <th scope="col" colspan="2">Kleine Dienstleistung</th>
                            <th scope="col" colspan="2">Große Dienstleistung</th>
                        </tr>
                        <tr>
                            <th colspan="2">Preis</th>
                            <td colspan="2">{{ experte.preis_kleine_dienstleistung }}</td>
                            <td colspan="2">{{ experte.preis_grosse_dienstleistung }}</td>
                        </tr>
                        <tr>
                            <th colspan="2">Ihr Profit bei angemessener Leistung</th>
                            <td colspan="2">{{ experte.konsumenten_profit_klein }}</td>
                            <td colspan="2">{{ experte.konsumenten_profit_gross }}</td>
                        </tr>
                    </tbody>
                </table>
                <button class="btn btn-primary" type="submit" name="chosen_expert_id" value="{{ experte.id_in_group }}"> Wähle Experte {{ forloop.counter }}</button>
            </div>
        {% endfor %}
    </div>

    <div class="outside-option">
        <button class="btn btn-secondary" type="submit" name="market_entry" value="False">Markt nicht betreten (erhalte 1 Euro)</button>
    </div>

</form>

{% endblock %}