{% extends 'superuser/base_superuser.html' %}

{% block title %}Manage Packages | ChatLab{% endblock %}
{% block packages_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">Packages</h2>
        <p class="page-subtitle">Define and manage company subscription plans.</p>
    </div>
    <a href="{% url 'superuser_package_create' %}" class="btn btn-primary">Add Package</a>
</div>

<div class="glass-card" style="padding:1.5rem; margin-top:1rem;">
    {% if packages %}
        <div class="table-container">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Package Name</th>
                        <th>Type / Message Limit</th>
                        <th>Validity Duration</th>
                        <th>Price</th>
                        <th style="text-align:right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for pkg in packages %}
                        <tr>
                            <td style="font-weight:600;">{{ pkg.name }}</td>
                            <td>
                                {% if pkg.is_unlimited %}
                                    <span style="background:rgba(37,211,102,0.15); color:#25d366; padding:0.25rem 0.6rem; border-radius:12px; font-size:0.8rem; font-weight:600;">Unlimited</span>
                                {% else %}
                                    <span style="background:rgba(99,102,241,0.15); color:#6366f1; padding:0.25rem 0.6rem; border-radius:12px; font-size:0.8rem; font-weight:600;">{{ pkg.message_limit }} messages</span>
                                {% endif %}
                            </td>
                            <td><span style="background:rgba(245,158,11,0.15); color:#d97706; padding:0.25rem 0.6rem; border-radius:12px; font-size:0.8rem; font-weight:600;">{{ pkg.days_valid }} Days</span></td>
                            <td style="font-weight:600; font-family:monospace; font-size:0.95rem;">৳{{ pkg.price }}</td>
                            <td style="text-align:right;">
                                <a href="{% url 'superuser_package_edit' pkg.pk %}" class="btn btn-secondary" style="padding:0.35rem 0.7rem; font-size:0.85rem;">Edit</a>
                                <form method="post" action="{% url 'superuser_package_delete' pkg.pk %}" style="display:inline;" onsubmit="return confirm('Are you sure you want to delete this package? Current company subscriptions will remain active but won\'t be linkable to this package template.');">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-secondary" style="padding:0.35rem 0.7rem; font-size:0.85rem; color:var(--danger-red); margin-left:0.5rem; border:none; cursor:pointer;">Delete</button>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div style="text-align:center; color:var(--text-muted); padding:2rem;">No packages defined yet.</div>
    {% endif %}
</div>
{% endblock %}