{% extends "base.html" %}

{% block title %}Order {{ order.id[:8] }}... — fastapi-getpaid Example{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <h2>Order Details</h2>
        <table class="table">
            <tr>
                <th>ID</th>
                <td><code>{{ order.id }}</code></td>
            </tr>
            <tr>
                <th>Description</th>
                <td>{{ order.description }}</td>
            </tr>
            <tr>
                <th>Amount</th>
                <td>{{ order.amount }} {{ order.currency }}</td>
            </tr>
            <tr>
                <th>Created</th>
                <td>{{ order.created_at }}</td>
            </tr>
        </table>

        <h3>Pay for this order</h3>
        <form method="post" action="/orders/{{ order.id }}/pay">
            <div class="mb-3">
                <label for="backend" class="form-label">Payment Backend</label>
                <select name="backend" id="backend" class="form-select">
                    <option value="dummy">Dummy (Fake Gateway)</option>
                    <option value="payu">PayU (Sandbox)</option>
                    <option value="paynow">Paynow (Sandbox)</option>
                </select>
                <div class="form-text">
                    Dummy backend uses the built-in paywall simulator.
                    PayU and Paynow use sandbox environments (no real transactions).
                </div>
            </div>
            <button type="submit" class="btn btn-success btn-lg">
                Pay {{ order.amount }} {{ order.currency }}
            </button>
        </form>
    </div>

    <div class="col-md-4">
        <h3>Payments</h3>
        {% if payments %}
        <div class="list-group">
            {% for payment in payments %}
            <div class="list-group-item">
                <div class="d-flex w-100 justify-content-between">
                    <small><code>{{ payment.id[:8] }}...</code></small>
                    {% if payment.status == "paid" %}
                    <span class="badge bg-success">{{ payment.status }}</span>
                    {% elif payment.status == "failed" %}
                    <span class="badge bg-danger">{{ payment.status }}</span>
                    {% elif payment.status == "prepared" %}
                    <span class="badge bg-warning text-dark">{{ payment.status }}</span>
                    {% else %}
                    <span class="badge bg-secondary">{{ payment.status }}</span>
                    {% endif %}
                </div>
                <small>{{ payment.amount_required }} {{ payment.currency }}</small>
                <br>
                <small class="text-body-secondary">Backend: {{ payment.backend }}</small>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-body-secondary">No payments yet.</p>
        {% endif %}
    </div>
</div>

<div class="mt-3">
    <a href="/" class="btn btn-outline-secondary">Back to Orders</a>
</div>
{% endblock %}