{% extends "base.html" %}
{% block title %}Branchen{{ " - " + app_name() }}{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Branchen verwalten</h1>
    <a href="/einstellungen" role="button" class="btn-sm outline">← Einstellungen</a>
</div>

<div class="card">
    <div class="card-header">
        <h3>Neue Branche</h3>
    </div>
    <form method="post" action="/einstellungen/branchen/neu" style="display: flex; gap: 0.75rem; align-items: end;">
        <div style="flex: 1;">
            <label for="name" style="font-size: 0.85rem;">Name</label>
            <input type="text" id="name" name="name" required placeholder="z.B. IT-Dienstleistung" style="margin: 0;">
        </div>
        <button type="submit" class="btn-sm" style="margin: 0; height: 2.4rem;">Anlegen</button>
    </form>
</div>

<div class="card">
    <div class="card-header">
        <h3>Branchen ({{ branchen|length }})</h3>
    </div>
    {% if branchen %}
    <table class="data-table">
        <thead>
            <tr>
                <th style="width: 2.5rem;">#</th>
                <th>Name</th>
                <th style="width: 6rem;">Kontakte</th>
                <th style="width: 12rem;">Aktionen</th>
            </tr>
        </thead>
        <tbody>
            {% for b in branchen %}
            <tr>
                <td style="color: var(--kw-text-muted); font-size: 0.8rem;">{{ loop.index }}</td>
                <td>{{ b.name }}</td>
                <td style="font-size: 0.85rem;">{{ b.kontakte|length }}</td>
                <td>
                    <div style="display: flex; gap: 0.25rem;">
                        <form method="post" action="/einstellungen/branchen/{{ b.id }}/hoch" style="display: inline;">
                            <button type="submit" class="btn-icon" style="font-size: 0.75rem; padding: 0.15rem 0.4rem;" title="Nach oben">&#x25B2;</button>
                        </form>
                        <form method="post" action="/einstellungen/branchen/{{ b.id }}/runter" style="display: inline;">
                            <button type="submit" class="btn-icon" style="font-size: 0.75rem; padding: 0.15rem 0.4rem;" title="Nach unten">&#x25BC;</button>
                        </form>
                        <button type="button" class="btn-icon" style="font-size: 0.75rem; padding: 0.15rem 0.4rem;"
                                onclick="var n=prompt('Neuer Name:','{{ b.name }}'); if(n && n.trim()) { var f=document.getElementById('rename-form-{{ b.id }}'); f.querySelector('input[name=name]').value=n.trim(); f.submit(); }"
                                title="Umbenennen">&#x270F;</button>
                        <form id="rename-form-{{ b.id }}" method="post" action="/einstellungen/branchen/{{ b.id }}/umbenennen" style="display: none;">
                            <input type="hidden" name="name" value="">
                        </form>
                        <form method="post" action="/einstellungen/branchen/{{ b.id }}/loeschen" style="display: inline;"
                              onsubmit="return confirm('Branche &quot;{{ b.name }}&quot; wirklich löschen?');">
                            <button type="submit" class="btn-icon" style="font-size: 0.75rem; padding: 0.15rem 0.4rem; color: var(--kw-danger);" title="Löschen">&#x1F5D1;</button>
                        </form>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state">
        <p>Noch keine Branchen angelegt.</p>
    </div>
    {% endif %}
</div>
{% endblock %}
