{% extends "wagtailadmin/base.html" %}
{% load i18n %}

{% block titletag %}{% trans "Subscription Plans" %}{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumb">
    <a href="{% url 'wagtailadmin_home' %}">{% trans 'Home' %}</a>
    <span>{% trans 'Subscriptions' %}</span>
    <span>{% trans 'Plans' %}</span>
</div>
{% endblock %}

{% block content %}
{% include "wagtailadmin/shared/header.html" with title="Subscription Plans" icon="list-ul" action_url="/admin/snippets/wagtail_subscriptions/subscriptionplan/add/" action_text="Add Plan" %}

<div class="nice-padding" style="padding-left: 50px; padding-right: 50px;">
    {% if plans %}
    <table class="listing">
        <thead>
            <tr>
                <th>{% trans "Name" %}</th>
                <th>{% trans "Price" %}</th>
                <th>{% trans "Billing Period" %}</th>
                <th>{% trans "Trial Days" %}</th>
                <th>{% trans "Active" %}</th>
                <th>{% trans "Subscriptions" %}</th>
                <th>{% trans "Actions" %}</th>
            </tr>
        </thead>
        <tbody>
            {% for plan in plans %}
            <tr>
                <td><strong>{{ plan.name }}</strong></td>
                <td>${{ plan.price }}</td>
                <td>{{ plan.get_billing_period_display }}</td>
                <td>{{ plan.trial_period_days }}</td>
                <td>
                    {% if plan.is_active %}
                        <span class="status-tag active">{% trans "Active" %}</span>
                    {% else %}
                        <span class="status-tag inactive">{% trans "Inactive" %}</span>
                    {% endif %}
                </td>
                <td>{{ plan.subscriptions.count }}</td>
                <td>
                    <a href="/admin/snippets/wagtail_subscriptions/subscriptionplan/{{ plan.id }}/" class="button button-small">{% trans "Edit" %}</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="help-block">
        <h2>{% trans "No subscription plans yet" %}</h2>
        <p>{% trans "Create your first subscription plan to get started." %}</p>
        <a href="/admin/snippets/wagtail_subscriptions/subscriptionplan/add/" class="button bicolor icon icon-plus">{% trans "Add Plan" %}</a>
    </div>
    {% endif %}
</div>

<style>
.status-tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: bold;
}
.status-tag.active { background: #d4edda; color: #155724; }
.status-tag.inactive { background: #f8d7da; color: #721c24; }
</style>
{% endblock %}