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

    <div style="margin-bottom:1rem;">
        <a href="{% url 'databases' %}" hx-get="{% url 'databases' %}" hx-target="#main-content" hx-push-url="{% url 'databases' %}" hx-indicator="#loader"
           style="font-size:0.8125rem; color:var(--color-muted-foreground); text-decoration:none;">← {% trans "Системные справочники" %}</a>
    </div>

    <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap;">
        <div>
            <h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground);">{{ dtype.name }}</h1>
            <p style="font-size:0.875rem; color:var(--color-muted-foreground); margin-top:0.25rem;">
                <span class="badge badge-info">{{ dtype.code }}</span>
                · {{ dtype.get_hierarchy_type_display }}
            </p>
        </div>
        {% if can_update_directories %}
        <div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
            <form method="post" action="{% url 'directory_sort_alpha' dtype.id %}" 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>
            <form method="post" action="{% url 'directory_rebuild' %}" style="margin:0;">
                {% csrf_token %}
                <input type="hidden" name="type_id" value="{{ dtype.id }}">
                <button type="submit" class="btn btn-secondary" style="font-size:0.8125rem; border:1px solid var(--color-border);">{% trans "Перестроить дерево" %}</button>
            </form>
        </div>
        {% 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;">{{ 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;">{{ dir_error }}</div>
    {% endif %}

    {% if edit_item and can_update_directories or not edit_item and can_create_directories %}
    <div style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; padding:1rem 1.25rem; margin-bottom:1.25rem;">
        <div style="font-size:0.875rem; font-weight:600; margin-bottom:0.75rem; color:var(--color-foreground);">
            {% if edit_item %}{% trans "Редактировать запись" %}{% else %}{% trans "Новая запись" %}{% endif %}
        </div>
        <form method="post" action="{% url 'directory_item_save' dtype.id %}">
            {% csrf_token %}
            {% if edit_item %}<input type="hidden" name="pk" value="{{ edit_item.pk }}">{% endif %}
            <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:0.75rem; margin-bottom:0.75rem;">
                <div>
                    <label style="display:block; font-size:0.7rem; color:var(--color-muted-foreground); margin-bottom:0.2rem;">{% trans "Название" %}</label>
                    <input type="text" name="name" required class="input" style="width:100%;" value="{{ edit_item.name|default:'' }}">
                </div>
                <div>
                    <label style="display:block; font-size:0.7rem; color:var(--color-muted-foreground); margin-bottom:0.2rem;">{% trans "Код" %}</label>
                    <input type="text" name="code" class="input" style="width:100%;" value="{{ edit_item.code|default:'' }}" placeholder="{% trans 'авто из названия' %}">
                </div>
                <div>
                    <label style="display:block; font-size:0.7rem; color:var(--color-muted-foreground); margin-bottom:0.2rem;">{% trans "Родитель" %}</label>
                    <select name="parent_id" class="input" style="width:100%;">
                        <option value="">{% trans "— корень —" %}</option>
                        {% for p in parents %}
                        <option value="{{ p.id }}" {% if edit_item.parent_id == p.id %}selected{% endif %}>{{ p.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div style="margin-bottom:0.75rem;">
                <label style="display:block; font-size:0.7rem; color:var(--color-muted-foreground); margin-bottom:0.2rem;">{% trans "Описание" %}</label>
                <input type="text" name="description" class="input" style="width:100%;" value="{{ edit_item.description|default:'' }}">
            </div>
            <label style="display:inline-flex; align-items:center; gap:0.4rem; font-size:0.8125rem; margin-bottom:0.75rem;">
                <input type="checkbox" name="is_active" value="1" {% if not edit_item or edit_item.is_active %}checked{% endif %}>
                {% trans "Активна" %}
            </label>
            <div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
                <button type="submit" class="btn btn-primary" style="font-size:0.8125rem;">{% if edit_item %}{% trans "Сохранить" %}{% else %}{% trans "Добавить" %}{% endif %}</button>
                {% if edit_item %}
                <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-secondary" style="font-size:0.8125rem; border:1px solid var(--color-border); text-decoration:none;">{% trans "Отмена" %}</a>
                {% endif %}
            </div>
        </form>
    </div>
    {% endif %}

    <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); overflow:hidden;">
        <div style="padding:0.875rem 1.25rem; border-bottom:1px solid var(--color-border); font-size:0.8125rem; font-weight:500; display:flex; justify-content:space-between; gap:0.75rem; flex-wrap:wrap;">
            <span>{% trans "Записи" %} · {{ items|length }}</span>
            {% if can_update_directories %}
            <span style="font-size:0.75rem; color:var(--color-muted-foreground); font-weight:400;">{% trans "Перетащите строку, чтобы изменить порядок (среди одного родителя)" %}</span>
            {% endif %}
        </div>
        {% if can_update_directories %}{% csrf_token %}{% endif %}
        <table style="width:100%; border-collapse:collapse; font-size:0.8125rem;">
            <thead>
                <tr style="background:var(--color-muted);">
                    {% if can_update_directories %}<th style="padding:0.5rem 0.75rem; width:2.25rem;"></th>{% endif %}
                    <th style="padding:0.5rem 1rem; text-align:left; color:var(--color-muted-foreground); font-size:0.7rem; text-transform:uppercase;">{% trans "Название" %}</th>
                    <th style="padding:0.5rem 1rem; text-align:left; color:var(--color-muted-foreground); font-size:0.7rem; text-transform:uppercase;">{% trans "Код" %}</th>
                    <th style="padding:0.5rem 1rem; text-align:left; color:var(--color-muted-foreground); font-size:0.7rem; text-transform:uppercase;">{% trans "Родитель" %}</th>
                    <th style="padding:0.5rem 1rem; text-align:left; color:var(--color-muted-foreground); font-size:0.7rem; text-transform:uppercase;">{% trans "Статус" %}</th>
                    {% if can_update_directories %}<th style="padding:0.5rem 1rem;"></th>{% endif %}
                </tr>
            </thead>
            <tbody id="dir-items-tbody"
                   data-type-id="{{ dtype.id }}"
                   data-can-edit="{% if can_update_directories %}1{% else %}0{% endif %}"
                   data-reorder-url="{% url 'directory_item_reorder' dtype.id %}">
                {% for item in items %}
                <tr class="tr-hover dir-item-row"
                    style="border-bottom:1px solid var(--color-border);"
                    data-id="{{ item.pk }}"
                    data-parent-id="{{ item.parent_id|default:'' }}">
                    {% if can_update_directories %}
                    <td class="dir-drag-handle" draggable="true"
                        style="padding:0.5rem 0.65rem; color:var(--color-muted-foreground); user-select:none; cursor:grab;"
                        title="{% trans 'Перетащить' %}">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
                    </td>
                    {% endif %}
                    <td style="padding:0.65rem 1rem; color:var(--color-foreground);">
                        <span style="display:inline-block; padding-left:{{ item.indent_depth }}rem;">{{ item.name }}</span>
                    </td>
                    <td style="padding:0.65rem 1rem;"><code style="font-size:0.75rem;">{{ item.code }}</code></td>
                    <td style="padding:0.65rem 1rem; color:var(--color-muted-foreground);">{{ item.parent.name|default:"—" }}</td>
                    <td style="padding:0.65rem 1rem;">
                        {% if item.is_active %}<span class="badge badge-success">{% trans "Активна" %}</span>
                        {% else %}<span class="badge badge-muted">{% trans "Выкл." %}</span>{% endif %}
                    </td>
                    {% if can_update_directories %}
                    <td style="padding:0.65rem 1rem; text-align:right;">
                        <a href="{% url 'directory_type_detail' dtype.id %}?edit={{ item.pk }}"
                           hx-get="{% url 'directory_type_detail' dtype.id %}?edit={{ item.pk }}"
                           hx-target="#main-content" hx-push-url="{% url 'directory_type_detail' dtype.id %}?edit={{ item.pk }}"
                           hx-indicator="#loader"
                           class="btn btn-ghost" style="font-size:0.75rem; padding:0.2rem 0.5rem; text-decoration:none;">{% trans "Изменить" %}</a>
                    </td>
                    {% endif %}
                </tr>
                {% empty %}
                <tr><td colspan="6" style="padding:2rem; text-align:center; color:var(--color-muted-foreground);">{% trans "Записей нет" %}</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<style>
    tr.dir-dragging { opacity: 0.55; background: color-mix(in srgb, var(--color-primary) 8%, var(--color-card)); }
    td.dir-drag-handle:active { cursor: grabbing; }
</style>