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

{% block title %}
    <span class="text-primary fw-bold">Round {{ roundNum }} / {{ C.NUM_ROUNDS }}</span>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2 class="text-primary fw-bold text-center">Round {{ roundNum }} / {{ C.NUM_ROUNDS }}</h2>

    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm border-0 mb-4 overflow-hidden" style="border-radius: 15px;">
                <div class="card-header {% if player.is_buyer %}bg-primary{% else %}bg-success{% endif %} text-white py-3">
                    <h4 class="mb-0 text-center">
                        {% if player.is_buyer %}Buyer Portal{% else %}Seller Portal{% endif %}
                    </h4>
                </div>
                <div class="card-body bg-white p-4">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1 small uppercase fw-bold">Private Information</p>
                            <h2 class="mb-0">
                                {% if player.is_buyer %}
                                    Value: <span class="text-primary">${{ player.value }}</span>
                                {% else %}
                                    Cost: <span class="text-success">${{ player.cost }}</span>
                                {% endif %}
                            </h2>
                        </div>
                        <div class="text-end">
                             <i class="bi {% if player.is_buyer %}bi-cart-fill text-primary{% else %}bi-tag-fill text-success{% endif %}" style="font-size: 2.5rem;"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0 p-4" style="border-radius: 15px; background-color: #fcfcfc; border: 1px solid #eee !important;">
                <p class="lead mb-4">
                    {% if player.is_buyer %}
                        How much are you willing to bid for this item?
                    {% else %}
                        What is the minimum price you will accept?
                    {% endif %}
                </p>
                <div class="input-group input-group-lg mb-3">
                    <span class="input-group-text bg-white border-end-0">$</span>
                    {% if player.is_buyer %}
                        <input type="number" name="bid" class="form-control border-start-0" step="0.01" required>
                    {% else %}
                        <input type="number" name="ask" class="form-control border-start-0" step="0.01" required>
                    {% endif %}
                </div>

                <div class="d-grid gap-2">
                    <button class="btn btn-dark btn-lg shadow-sm" style="border-radius: 10px; transition: 0.3s;">
                        {% if player.is_buyer %}Submit your bid{% else %}Submit your ask{% endif %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    body { background-color: #f8f9fa; }
    /* Hide the standard oTree title if you are using your own header */
    .otree-title { display: none !important; }
    .input-group-text { border-radius: 10px 0 0 10px !important; }
    input { border-radius: 0 10px 10px 0 !important; border-left: none !important; }
    .btn-dark:hover { background-color: #333; transform: translateY(-2px); }
</style>
{% endblock %}