{{ block title }}Set Your Price - Round {{ player.round_number }}{{ endblock }}
{{ block content }}

<style>
        .alert.alert-success {
                font-size: 1.2em;
        }
        .alert.alert-info {
                font-size: 1.2em;
        }
        .pricing-row { margin-bottom: 1.25rem; }
    /* Private (blue) and Public (green) color schemes */
    .private-info {
        background-color: #e8f0ff; /* light blue */
        border-color: #8fb7ff;
        color: #0b4f9a;
    }
    .public-info {
        background-color: #e8f9ec; /* light green */
        border-color: #8fe09a;
        color: #1a6a2a;
    }
        /* Larger fonts for the Set your price card */
        .card .card-title {
            font-size: 1.4rem;
            font-weight: 600;
        }
        .card .card-text {
            font-size: 1.1rem;
        }
        /* Make form controls and the next button easier to read */
        .card .form-control {
            font-size: 1.1rem;
            padding: .5rem .75rem;
        }
        .card .btn {
            font-size: 1.1rem;
            padding: .5rem 1rem;
        }
</style>

<div class="row pricing-row">
    <div class="col-md-6">
        <div class="alert alert-info private-info h-100">
            <h4>Private Cost Information</h4>
            <p> Your marginal cost is: {{ player.cost }}</p>
            <p class="text-muted">(marginal costs range from {{ C.min_cost }} to {{ C.max_cost }})</p>
        </div>
    </div>

    <div class="col-md-6">
        <div class="alert alert-info public-info h-100">
            <h4>Public Market Information</h4>
            <p>Firms in market: {{ C.PLAYERS_PER_GROUP }}</p>
            <p>Demand of each buyer: {{ C.unit_demand }}</p>
            
            <div class="row text-center mt-3">
                <div class="col-4">
                    <div class="border rounded p-2 bg-white h-100">
                        <h5 class="mb-1">{{ player.n1 }} buyers</h5>
                        <small class="text-muted">choose you</small>
                    </div>
                </div>
                <div class="col-4">
                    <div class="border rounded p-2 bg-white h-100">
                        <h5 class="mb-1">{{ player.n2 }} buyers</h5>
                        <small class="text-muted">choose between you and another</small>
                    </div>
                </div>
                <div class="col-4">
                    <div class="border rounded p-2 bg-white h-100">
                        <h5 class="mb-1">{{ player.n3 }} buyers</h5>
                        <small class="text-muted">choose between you and 2 others</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row pricing-row">
    <div class="col-12">
        <div class="card mb-4">
            <div class="card-header bg-dark text-white">
                <h5 class="mb-0">Your History (Last 5 Rounds)</h5>
            </div>
            <div class="card-body p-0">
                <table class="table table-striped mb-0">
                    <thead class="thead-light">
                        <tr>
                            <th class="border-top-0 pl-4">Round</th>
                            <th class="border-top-0">Your Price</th>
                            <th class="border-top-0">Your Profit</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% if last5 %}
                            {% for pr in last5 %}
                            <tr>
                                <td class="pl-4">{{ pr.round_number }}</td>
                                <td class="font-weight-bold">{{ pr.price }}</td>
                                <td class="font-weight-bold">{{ pr.payoff }}</td>
                            </tr>
                            {% endfor %}
                        {% else %}
                            <tr><td colspan="3" class="text-center text-muted p-3">No prior rounds yet.</td></tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="row pricing-row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Set your price</h5>
                <p class="card-text">Your profit equals <strong>(your price - your marginal cost) × units sold </strong>. </p>

                <form method="post">
                    {{ formfields }}
                    <div class="mt-3">
                        {{ next_button }}
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{ endblock }}