{{ 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">
    <!-- Box 1: Public Market Information -->
    <div class="col-md-6">
        <div class="alert alert-info public-info h-100">
            <h4> 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">
                        <div class="badge bg-primary mb-1">Type-1 Buyers</div>
                        <h5 class="mb-1">{{ player.n1 }}</h5>
                        <small class="text-muted">choose you only</small>
                    </div>
                </div>
                <div class="col-4">
                    <div class="border rounded p-2 bg-white h-100">
                        <div class="badge bg-primary mb-1">Type-2 Buyers</div>
                        <h5 class="mb-1">{{ player.n2 }}</h5>
                        <small class="text-muted">choose between you and 1 other</small>
                    </div>
                </div>
                <div class="col-4">
                    <div class="border rounded p-2 bg-white h-100">
                        <div class="badge bg-primary mb-1">Type-3 Buyers</div>
                        <h5 class="mb-1">{{ player.n3 }}</h5>
                        <small class="text-muted">choose between you and 2 others</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Box 2: Pricing Decision with Private Cost Information -->
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">Pricing Decision</h5>

                <div class="alert private-info mb-3">
                    <h6 class="mb-1">Private Cost </h6>
                    <p class="mb-0">Your cost is: <strong>{{ player.cost }}</strong></p>
                    <p class="mb-0 text-muted" style="font-size:0.9em;">(costs range from {{ C.min_cost }} to {{ C.max_cost }})</p>
                </div>

                <p class="card-text">Your profit equals <strong>(your price &minus; your cost) &times; units sold</strong>.</p>

                <form method="post" class="mt-auto">
                    {{ formfields }}
                    <div class="mt-3">
                        {{ next_button }}
                    </div>
                </form>
            </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>
{{ endblock }}