{% extends 'base.html' %}
{% block title %}API Subscriptions — Admin{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 900px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>API Subscriptions</h1>
            </div>
            <a href="{% url 'accounts:admin_portal' %}" class="btn-small">&larr; Back to portal</a>
        </div>

        <p style="color: var(--muted); margin-bottom: 24px;">
            B2B accounts can generate an API key, but it only works once a subscription here is Active. Activate
            after confirming payment was received (same as shop/vendor payments); suspend to cut off access at
            any time.
        </p>

        {% for sub in subscriptions %}
        <div class="order-card" style="margin-bottom: 16px;">
            <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 14px;">
                <div>
                    <span class="surface-badge {% if sub.status == 'active' %}ok{% else %}warn{% endif %}">
                        {{ sub.status|title }}
                    </span>
                    <h3 style="margin: 8px 0 2px;">{{ sub.owner_name|default:sub.owner_email }}</h3>
                    <p style="font-size: 0.85rem; color: var(--muted);">{{ sub.owner_email }}</p>
                    <p style="font-size: 0.82rem; color: var(--muted); margin-top: 4px;">
                        Plan: {{ sub.plan|title }} &middot; Rate limit: {{ sub.rate_limit_per_minute }}/min
                        &middot; Requested: {{ sub.requested_at|date:"Y-m-d H:i" }}
                        {% if sub.activated_at %}&middot; Activated: {{ sub.activated_at|date:"Y-m-d H:i" }}{% endif %}
                    </p>
                </div>
                <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                    {% if sub.status != 'active' %}
                    <form method="post" action="{% url 'accounts:admin_activate_api_subscription' sub.id %}">
                        {% csrf_token %}
                        <select name="plan" class="btn-small" style="border: 1px solid var(--border);">
                            <option value="basic" {% if sub.plan == 'basic' %}selected{% endif %}>Basic (60/min)</option>
                            <option value="pro" {% if sub.plan == 'pro' %}selected{% endif %}>Pro (300/min)</option>
                        </select>
                        <button type="submit" class="btn-small" style="background: var(--blue);">Activate</button>
                    </form>
                    {% else %}
                    <form method="post" action="{% url 'accounts:admin_suspend_api_subscription' sub.id %}">
                        {% csrf_token %}
                        <button type="submit" class="btn-small" style="background: #c0392b;">Suspend</button>
                    </form>
                    {% endif %}
                </div>
            </div>
        </div>
        {% empty %}
        <p style="color: var(--muted);">No API subscription requests yet.</p>
        {% endfor %}
    </div>
</section>
{% endblock %}