{% load i18n %}
<div class="page-content">

    <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap;">
        <div>
            <h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground);">{% trans "Системные справочники" %}</h1>
            <p style="font-size:0.875rem; color:var(--color-muted-foreground); margin-top:0.25rem;">{% trans "Типы и записи справочников портала" %}</p>
        </div>
        {% if can_edit_directories %}
        <form method="post" action="{% url 'directory_rebuild' %}" style="margin:0;">
            {% csrf_token %}
            <button type="submit" class="btn btn-secondary" style="font-size:0.8125rem; border:1px solid var(--color-border);">
                {% trans "Перестроить дерево" %}
            </button>
        </form>
        {% endif %}
    </div>

    {% if dir_message %}
    <div style="margin-bottom:1rem; padding:0.65rem 0.9rem; border-radius:0.5rem; background:color-mix(in srgb, #16a34a 12%, var(--color-card)); border:1px solid color-mix(in srgb, #16a34a 30%, var(--color-border)); font-size:0.8125rem; color:var(--color-foreground);">{{ dir_message }}</div>
    {% endif %}
    {% if dir_error %}
    <div style="margin-bottom:1rem; padding:0.65rem 0.9rem; border-radius:0.5rem; background:color-mix(in srgb, #dc2626 12%, var(--color-card)); border:1px solid color-mix(in srgb, #dc2626 30%, var(--color-border)); font-size:0.8125rem; color:var(--color-foreground);">{{ dir_error }}</div>
    {% endif %}

    <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem;">
        <div class="stat-card">
            <div style="font-size:0.75rem; font-weight:500; color:var(--color-muted-foreground); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5rem;">{% trans "Справочники" %}</div>
            <div style="font-size:1.5rem; font-weight:700; color:var(--color-foreground);">{{ types_count }}</div>
        </div>
        <div class="stat-card">
            <div style="font-size:0.75rem; font-weight:500; color:var(--color-muted-foreground); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5rem;">{% trans "Записей" %}</div>
            <div style="font-size:1.5rem; font-weight:700; color:var(--color-foreground);">{{ records_count }}</div>
        </div>
        <div class="stat-card">
            <div style="font-size:0.75rem; font-weight:500; color:var(--color-muted-foreground); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5rem;">{% trans "Активных" %}</div>
            <div style="font-size:1.5rem; font-weight:700; color:var(--color-foreground);">{{ active_records_count }}</div>
        </div>
        <div class="stat-card">
            <div style="font-size:0.75rem; font-weight:500; color:var(--color-muted-foreground); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5rem;">{% trans "Обновлено" %}</div>
            <div style="font-size:1.125rem; font-weight:600; color:var(--color-foreground);">{{ last_updated|date:"d.m.Y H:i"|default:"—" }}</div>
        </div>
    </div>

    <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); box-shadow:0 1px 2px rgb(0 0 0/0.05); overflow:hidden;">
        <div style="padding:0.875rem 1.25rem; border-bottom:1px solid var(--color-border);">
            <span style="font-size:0.8125rem; font-weight:500; color:var(--color-foreground);">{% trans "Типы справочников" %}</span>
        </div>
        <table style="width:100%; border-collapse:collapse;">
            <thead>
                <tr style="background:var(--color-muted);">
                    <th style="padding:0.625rem 1.25rem; text-align:left; font-size:0.75rem; font-weight:600; color:var(--color-muted-foreground); text-transform:uppercase;">{% trans "Название" %}</th>
                    <th style="padding:0.625rem 1rem; text-align:left; font-size:0.75rem; font-weight:600; color:var(--color-muted-foreground); text-transform:uppercase;">{% trans "Код" %}</th>
                    <th style="padding:0.625rem 1rem; text-align:left; font-size:0.75rem; font-weight:600; color:var(--color-muted-foreground); text-transform:uppercase;">{% trans "Записей" %}</th>
                    <th style="padding:0.625rem 1rem; text-align:left; font-size:0.75rem; font-weight:600; color:var(--color-muted-foreground); text-transform:uppercase;">{% trans "Статус" %}</th>
                    <th style="padding:0.625rem 1rem;"></th>
                </tr>
            </thead>
            <tbody>
                {% for dtype in directory_types %}
                <tr class="tr-hover">
                    <td style="padding:0.875rem 1.25rem;">
                        <div style="font-size:0.8125rem; font-weight:500; color:var(--color-foreground);">{{ dtype.name }}</div>
                        <div style="font-size:0.75rem; color:var(--color-muted-foreground);">{{ dtype.get_hierarchy_type_display|default:dtype.hierarchy_type }}</div>
                    </td>
                    <td style="padding:0.875rem 1rem;"><span class="badge badge-info">{{ dtype.code }}</span></td>
                    <td style="padding:0.875rem 1rem; font-size:0.8125rem; color:var(--color-foreground);">{{ dtype.records }}</td>
                    <td style="padding:0.875rem 1rem;">
                        {% if dtype.is_active %}
                        <span class="badge badge-success">{% trans "Активный" %}</span>
                        {% else %}
                        <span class="badge badge-muted">{% trans "Выключен" %}</span>
                        {% endif %}
                    </td>
                    <td style="padding:0.875rem 1rem; text-align:right;">
                        <a href="{% url 'directory_type_detail' dtype.id %}"
                           hx-get="{% url 'directory_type_detail' dtype.id %}"
                           hx-target="#main-content" hx-push-url="{% url 'directory_type_detail' dtype.id %}"
                           hx-indicator="#loader"
                           class="btn btn-ghost" style="font-size:0.75rem; padding:0.25rem 0.625rem; text-decoration:none;">
                            {% trans "Открыть" %}
                        </a>
                    </td>
                </tr>
                {% empty %}
                <tr><td colspan="5" style="padding:2rem; text-align:center; color:var(--color-muted-foreground); font-size:0.875rem;">{% trans "Справочников пока нет" %}</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>