{% extends "page.html" %}
{% block page_content %}
<div class="card">
    <div class="card-header"><h2>{% if editing_tech %}Меню для техников{% else %}Быстрое меню{% endif %}</h2>
        <span style="font-size:12px;color:var(--text-muted);">Настройте ссылки, отображаемые в верхней панели навигации</span>
    </div>
    <form method="post" action="{% if editing_tech %}/service/quick-menu/tech-save{% else %}/service/quick-menu/save{% endif %}">
        <div class="table-wrap"><table><thead><tr><th style="width:40px;">#</th><th>Название</th><th>Ссылка</th><th class="actions"><button type="button" class="btn btn-primary btn-sm" onclick="addRow()">+ Добавить</button></th></tr></thead>
            <tbody id="items-body">
                {% for item in items %}
                <tr>
                    <td>{{ loop.index }}</td>
                    <td><input type="text" name="label[]" value="{{ item.label }}" style="width:100%;" required></td>
                    <td><input type="text" name="url[]" value="{{ item.url }}" style="width:100%;" required></td>
                    <td class="actions"><button type="button" class="btn btn-danger btn-sm" onclick="this.closest('tr').remove()">✕</button></td>
                </tr>
                {% endfor %}
            </tbody>
        </table></div>
        {% if items|length == 0 %}
        <div class="empty-state" id="empty-state"><h3>Нет элементов</h3><p>Добавьте ссылки для быстрого доступа</p></div>
        {% endif %}
        <div class="form-actions"><button type="submit" class="btn btn-primary">Сохранить</button>
        <a href="/service/dashboard" class="btn btn-secondary">Отмена</a></div>
    </form>
</div>
<script>
function addRow(){
    var tbody = document.getElementById('items-body');
    var empty = document.getElementById('empty-state');
    if(empty) empty.style.display = 'none';
    var tr = document.createElement('tr');
    var count = tbody.children.length + 1;
    tr.innerHTML = '<td>'+count+'</td><td><input type="text" name="label[]" style="width:100%;" required></td><td><input type="text" name="url[]" style="width:100%;" required></td><td class="actions"><button type="button" class="btn btn-danger btn-sm" onclick="this.closest(\'tr\').remove()">✕</button></td>';
    tbody.appendChild(tr);
}
</script>
{% endblock %}