{% extends "controlpanel/base.html" %}
{% load lucide %}

{% block heading %}{{ club.name }}{% endblock heading %}

{% block subheading %}
    <p class="text-sm opacity-70">
        {{ club.slug }}
        {% if club.is_archived %}
            <span class="badge badge-warning badge-sm ml-2">Archived</span>
        {% endif %}
    </p>
{% endblock subheading %}

{% block actions %}
    <a class="btn btn-ghost gap-2" href="{% url 'controlpanel:club_update' club.pk %}">{% lucide "pencil" size=16 %} Edit</a>
    {% if club.is_archived %}
        <form method="post" action="{% url 'controlpanel:club_restore' club.pk %}">
            {% csrf_token %}
            <button class="btn btn-success gap-2" type="submit">{% lucide "archive-restore" size=16 %} Restore</button>
        </form>
    {% else %}
        <form method="post" action="{% url 'controlpanel:club_archive' club.pk %}">
            {% csrf_token %}
            <button class="btn btn-warning gap-2" type="submit">{% lucide "archive" size=16 %} Archive</button>
        </form>
    {% endif %}
{% endblock actions %}

{% block panel %}
    {% if club.is_archived %}
        <div class="alert alert-warning mb-6">
            <span>This club is archived: its subdomain no longer resolves. Nothing has been deleted — restore it to bring it back.</span>
        </div>
    {% endif %}
    <div class="mb-6 grid gap-4 md:grid-cols-2">
        {% for group in groups %}
            <div class="card bg-base-100 shadow">
                <div class="card-body">
                    <h2 class="card-title text-base">{% lucide group.icon size=18 %} {{ group.title }}</h2>
                    <dl class="divide-y divide-base-200">
                        {% for label, value in group.stats %}
                            <div class="flex items-center justify-between py-2">
                                <dt class="text-sm opacity-70">{{ label }}</dt>
                                <dd class="font-semibold tabular-nums">{{ value }}</dd>
                            </div>
                        {% endfor %}
                    </dl>
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="card mb-6 bg-base-100 shadow">
        <div class="card-body">
            <div class="flex items-center justify-between">
                <h2 class="card-title text-base">{% lucide "toggle-right" size=18 %} Features</h2>
                <a class="btn btn-ghost btn-xs" href="{% url 'controlpanel:features' %}">Manage features</a>
            </div>
            <div class="overflow-x-auto">
                <table class="table">
                    <tbody>
                        {% for entry in flags %}
                            <tr>
                                <td class="font-mono font-medium">{{ entry.flag.name }}</td>
                                <td class="opacity-70">{{ entry.flag.note|default:"—" }}</td>
                                <td class="text-right">
                                    {% if entry.overridden %}
                                        {# `everyone` overrides club targeting, so a per-club toggle would be a lie. #}
                                        <span class="badge {% if entry.flag.everyone %}badge-success{% else %}badge-error{% endif %}">
                                            {% if entry.flag.everyone %}On for all clubs{% else %}Off everywhere{% endif %}
                                        </span>
                                    {% else %}
                                        <form method="post" action="{% url 'controlpanel:club_feature_toggle' club.pk entry.flag.pk %}">
                                            {% csrf_token %}
                                            <button class="btn btn-sm gap-1 {% if entry.enabled %}btn-success{% else %}btn-ghost{% endif %}" type="submit">
                                                {% if entry.enabled %}{% lucide "toggle-right" size=16 %} On{% else %}{% lucide "toggle-left" size=16 %} Off{% endif %}
                                            </button>
                                        </form>
                                    {% endif %}
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td class="text-center opacity-60">No features defined yet.</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="card bg-base-100 shadow">
        <div class="card-body">
            <div class="flex items-center justify-between">
                <h2 class="card-title text-base">Club admins</h2>
                <a class="btn btn-primary btn-sm gap-2" href="{% url 'controlpanel:club_admin_add' club.pk %}">{% lucide "user-plus" size=16 %} Add admin</a>
            </div>
            <div class="overflow-x-auto">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for role in admins %}
                            <tr>
                                <td>{{ role.member }}</td>
                                <td>{{ role.member.user.email|default:"—" }}</td>
                                <td class="text-right">
                                    <form method="post" action="{% url 'controlpanel:club_admin_remove' club.pk role.pk %}">
                                        {% csrf_token %}
                                        <button class="btn btn-ghost btn-xs gap-1 text-error" type="submit">{% lucide "trash-2" size=14 %} Remove</button>
                                    </form>
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="3" class="text-center opacity-60">No admins yet.</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock panel %}