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

{% block title %}{% trans "App Order" %}{% endblock %}
{% block breadcrumbs %}{% endblock %}

{% block content %}
<div class="max-w-3xl">
    <section class="glass-panel form-hero rounded-2xl p-6 mb-6">
        <div class="flex items-start gap-4">
            <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-primary/10 text-primary text-lg">
                <i class="fa-solid fa-arrow-up-short-wide"></i>
            </div>
            <div class="flex-1 min-w-0">
                <h1 class="text-xl font-bold tracking-tight">{% trans "App Order" %}</h1>
                <p class="text-sm text-base-content/60 mt-1 leading-relaxed">
                    {% trans "Rearrange and rename the apps on the dashboard and sidebar. Use the ↑ ↓ buttons to move an app, or type a new name and press ✓ — everything is saved immediately." %}
                </p>
            </div>
        </div>
    </section>

    <section class="glass-panel rounded-2xl overflow-hidden">
        <div class="flex items-center justify-between border-b border-base-content/10 px-5 py-3">
            <span class="text-sm font-semibold">{% trans "Apps" %}</span>
            <span class="badge badge-sm">{{ app_rows|length }}</span>
        </div>

        {% if app_rows %}
        <ul class="divide-y divide-base-content/10">
            {% for row in app_rows %}
            <li class="flex items-center gap-3 px-5 py-3 {% cycle 'bg-base-content/[0.015]' '' %}">
                <span class="w-6 text-center font-mono text-xs text-base-content/40" aria-hidden="true">{{ forloop.counter }}</span>
                <i class="{{ row.icon }} w-4 text-center text-sm text-base-content/60"></i>
                <div class="flex-1 min-w-0">
                    <form method="post" action="{% url 'admin:dash-app-order-rename' row.app_label %}" class="flex items-center gap-2">
                        {% csrf_token %}
                        <input type="text" name="display_name" value="{{ row.name }}" maxlength="100"
                               class="input input-sm w-full min-w-0"
                               aria-label="{% trans 'App name' %}"
                               title="{% trans 'Type a new name and press save' %}">
                        <button type="submit" class="btn btn-sm btn-ghost"
                                title="{% trans 'Save name' %}" aria-label="{% trans 'Save name' %}">
                            <i class="fa-solid fa-check text-success"></i>
                        </button>
                    </form>
                    <div class="truncate ps-1 text-[0.65rem] text-base-content/40">{{ row.app_label }} &middot; {% blocktrans count counter=row.model_count %}{{ counter }} model{% plural %}{{ counter }} models{% endblocktrans %}</div>
                </div>
                <div class="flex items-center gap-1">
                    <form method="post" action="{% url 'admin:dash-app-order-move' row.app_label 'up' %}" class="inline">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-circle"
                                {% if row.is_first %}disabled aria-disabled="true"{% endif %}
                                title="{% trans 'Move up' %}" aria-label="{% trans 'Move up' %} {{ row.name }}">
                            <i class="fa-solid fa-arrow-up"></i>
                        </button>
                    </form>
                    <form method="post" action="{% url 'admin:dash-app-order-move' row.app_label 'down' %}" class="inline">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-sm btn-circle"
                                {% if row.is_last %}disabled aria-disabled="true"{% endif %}
                                title="{% trans 'Move down' %}" aria-label="{% trans 'Move down' %} {{ row.name }}">
                            <i class="fa-solid fa-arrow-down"></i>
                        </button>
                    </form>
                </div>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <p class="px-5 py-8 text-center text-sm text-base-content/50">{% trans "No apps available." %}</p>
        {% endif %}
    </section>

    <p class="mt-4 text-center text-[0.65rem] text-base-content/40">
        {% trans "New apps you add later appear automatically at the end." %}
    </p>
</div>
{% endblock %}