{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-5">
        <div>
            <h1 class="display-6 fw-bold">Payment Gateways</h1>
            <p class="text-muted">Manage all payment providers</p>
        </div>
        <a href="{% url 'admin:core_paymentgateway_add' %}" class="btn btn-primary">
            + Add Gateway
        </a>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Gateway</th>
                        <th>Provider</th>
                        <th>Status</th>
                        <th>Mode</th>
                        <th>Fees</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for gateway in gateways %}
                    <tr>
                        <td>
                            <div class="fw-semibold">{{ gateway.name }}</div>
                            <small class="text-muted">{{ gateway.provider }}</small>
                        </td>
                        <td>
                            <span class="badge bg-secondary">{{ gateway.get_provider_display }}</span>
                        </td>
                        <td>
                            {% if gateway.status == "active" %}
                                <span class="badge bg-success">Active</span>
                            {% elif gateway.status == "maintenance" %}
                                <span class="badge bg-warning text-dark">Maintenance</span>
                            {% else %}
                                <span class="badge bg-secondary">Inactive</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if gateway.is_test_mode %}
                                <span class="badge bg-warning-subtle text-warning">Test</span>
                            {% else %}
                                <span class="badge bg-success-subtle text-success">Live</span>
                            {% endif %}
                        </td>
                        <td>
                            <small>
                                {{ gateway.percentage_fee }}% + ${{ gateway.fixed_fee_cents|floatformat:2 }}
                            </small>
                        </td>
                        <td>
                            <div class="d-flex gap-2">
                                <form method="post" action="{% url 'core:toggle_gateway_status' gateway.id %}">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-sm btn-outline-primary">
                                        {% if gateway.status == "active" %}Deactivate{% else %}Activate{% endif %}
                                    </button>
                                </form>
                                <form method="post" action="{% url 'core:toggle_test_mode' gateway.id %}">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-sm btn-outline-secondary">
                                        Toggle Mode
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="text-center py-5 text-muted">
                            No payment gateways configured yet.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}