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

{% block heading %}Features{% endblock heading %}

{% block actions %}
    <button class="btn btn-primary gap-2" type="button" onclick="document.getElementById('flag_create_modal').showModal()">{% lucide "plus" size=16 %} New feature</button>
{% endblock actions %}

{% block panel %}
    {% url 'controlpanel:flag_create' as flag_create_url %}
    {% include "controlpanel/_modal_form.html" with modal_id="flag_create_modal" title="New feature" form=flag_form action_url=flag_create_url submit_label="Create" submit_icon="plus" %}

    {% comment %}
        The lock-down. Clubs get a maintenance page, the scheduled jobs stand down, and the
        control panel and the auth screens stay open — otherwise you could not sign in to
        turn it back off.
    {% endcomment %}
    <div class="card mb-6 bg-base-100 shadow {% if maintenance.is_active %}border-l-4 border-error{% endif %}">
        <div class="card-body">
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div class="w-full">
                    <h2 class="card-title text-base mb-2">{% lucide "wrench" size=18 %} Maintenance mode</h2>
                    {% if maintenance.is_active %}
                        <div class="flex flex-row gap-2 text-sm">
                            <span class="badge badge-error gap-1">{% lucide "lock" size=12 %} Platform closed</span>
                            <div>&middot;</div>
                            <div>since {{ maintenance.started_at|date:"j M Y, H:i" }}{% if maintenance.started_by %} by {{ maintenance.started_by.email }}{% endif %}</div>
                        </div>

                        {% if maintenance.message %}
                            <div class="my-4">
                                <div class="font-semibold mb-1">Message</div>
                                <div class="p-4 bg-base-300 border-l-4 border-info w-full font-mono">{{ maintenance.message }}</div>
                            </div>
                        {% endif %}
                    {% else %}
                        <p class="text-sm opacity-70">
                            Closes every club subdomain and stands the scheduled jobs down. The control panel and the sign-in screens stay open.
                        </p>
                    {% endif %}
                </div>
            </div>

            <form class="mt-2" method="post" action="{% url 'controlpanel:maintenance' %}">
                {% csrf_token %}
                {% if not maintenance.is_active %}
                    <div class="form-control my-2 w-full pb-2">
                        <label class="label" for="{{ maintenance_form.message.id_for_label }}">
                            <span class="label-text">{{ maintenance_form.message.label }}</span>
                        </label>
                        {{ maintenance_form.message|daisy }}
                        <span class="label-text-alt mt-1 block text-xs text-base-content/70">{{ maintenance_form.message.help_text }}</span>
                    </div>
                    <button class="btn btn-error gap-2" type="submit">{% lucide "lock" size=16 %} Close the platform</button>
                {% else %}
                    <button class="btn btn-success gap-2" type="submit">{% lucide "lock-open" size=16 %} Reopen the platform</button>
                {% endif %}
            </form>
        </div>
    </div>

    <div class="card mb-6 bg-base-100 shadow">
        <div class="card-body">
            <h2 class="card-title text-base">{% lucide "flag" size=18 %} Flags</h2>
            <p class="text-sm opacity-70">
                Flags are turned on per club. Setting <em>Everyone</em> to Yes or No overrides club targeting entirely.
            </p>
            <div class="overflow-x-auto">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Everyone</th>
                            <th>Clubs</th>
                            <th>Note</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for flag in flags %}
                            <tr>
                                <td class="font-mono font-medium">{{ flag.name }}</td>
                                <td>
                                    {% if flag.everyone is True %}
                                        <span class="badge badge-success">On for all</span>
                                    {% elif flag.everyone is False %}
                                        <span class="badge badge-error">Off everywhere</span>
                                    {% else %}
                                        <span class="badge badge-info">Per club</span>
                                    {% endif %}
                                </td>
                                <td>{{ flag.clubs.count }}</td>
                                <td class="max-w-xs truncate opacity-70">{{ flag.note|default:"-" }}</td>
                                <td class="text-right">
                                    <button class="btn btn-outline btn-sm gap-1" type="button" onclick="document.getElementById('{{ flag.pk|dom_id:"flag_edit_modal" }}').showModal()">{% lucide "pencil" size=14 %} Edit</button>
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="5" class="text-center opacity-60">No features yet.</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {% comment %} Dialogs live outside the table: <tbody> may only contain <tr> elements. {% endcomment %}
            {% for flag in flags %}
                {% url 'controlpanel:flag_update' flag.pk as flag_update_url %}
                {% include "controlpanel/_modal_form.html" with modal_id=flag.pk|dom_id:"flag_edit_modal" title="Edit "|add:flag.name form=flag.edit_form action_url=flag_update_url submit_label="Save" submit_icon="check" %}
            {% endfor %}
        </div>
    </div>
    <div class="card bg-base-100 shadow">
        <div class="card-body">
            <h2 class="card-title text-base">{% lucide "power" size=18 %} Switches</h2>
            <p class="text-sm opacity-70">Global on/off for the whole platform — kill-switches, maintenance, infra rollouts.</p>
            <div class="overflow-x-auto">
                <table class="table">
                    <tbody>
                        {% for switch in switches %}
                            <tr>
                                <td class="font-mono font-medium">{{ switch.name }}</td>
                                <td class="opacity-70">{{ switch.note|default:"-" }}</td>
                                <td class="text-right">
                                    <form method="post" action="{% url 'controlpanel:switch_toggle' switch.pk %}">
                                        {% csrf_token %}
                                        <button class="btn btn-sm gap-1 {% if switch.active %}btn-success{% else %}btn-ghost{% endif %}" type="submit">
                                            {% if switch.active %}{% lucide "toggle-right" size=16 %} On{% else %}{% lucide "toggle-left" size=16 %} Off{% endif %}
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td class="text-center opacity-60">No switches yet — add one in the Django admin.</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock panel %}