{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
    <div class="level">
        <div class="level-left">
            <h2 class="title is-4">🔧 Modul-Builder</h2>
        </div>
        <div class="level-right">
            <a href="{{ url_for('custom_modules.neu') }}" class="button is-primary">+ Neues Modul</a>
        </div>
    </div>

    {% if current_user.is_superadmin() and templates %}
    <h3 class="title is-5 mt-4">🌐 Globale Vorlagen</h3>
    <div class="table-container">
        <table class="table is-fullwidth is-hoverable">
            <thead>
                <tr>
                    <th style="width:32px"></th>
                    <th>Name</th>
                    <th>Kategorie</th>
                    <th>Erstellt</th>
                    <th>Aktionen</th>
                </tr>
            </thead>
            <tbody id="js-sort-templates">
                {% for m in templates %}
                <tr data-id="{{ m.id }}">
                    <td class="drag-handle" style="cursor:grab;text-align:center;color:#aaa">⠿</td>
                    <td>{{ m.icon }} {{ m.name }}</td>
                    <td>{{ m.kategorie }}</td>
                    <td>{{ m.created_at.strftime('%d.%m.%Y') if m.created_at else '' }}</td>
                    <td>
                        <a href="{{ url_for('custom_modules.edit', module_id=m.id) }}" class="button is-small">Bearbeiten</a>
                        <a href="{{ url_for('custom_modules.builder', module_id=m.id) }}" class="button is-small is-info">Builder</a>
                        <form method="POST" action="{{ url_for('custom_modules.loeschen', module_id=m.id) }}" style="display:inline">
                            <button class="button is-small is-danger" onclick="return confirm('Wirklich löschen?')">Löschen</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}

    {% if current_user.is_superadmin() %}
    <h3 class="title is-5 mt-4">🏢 Alle Firmen-Module</h3>
    {% else %}
    <h3 class="title is-5 mt-4">🏢 Meine Module</h3>
    {% endif %}

    {% if not current_user.is_superadmin() and templates %}
    <div class="message is-info">
        <div class="message-body">
            <strong>Vorlagen verfügbar:</strong>
            {% for t in templates %}
            <span class="tag is-medium ml-2">
                {{ t.icon }} {{ t.name }}
                <form method="POST" action="{{ url_for('custom_modules.importieren', module_id=t.id) }}" style="display:inline">
                    <button class="button is-small is-ghost ml-1" title="Importieren">📥</button>
                </form>
            </span>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <div class="table-container">
        <table class="table is-fullwidth is-hoverable">
            <thead>
                <tr>
                    <th style="width:32px"></th>
                    <th>Name</th>
                    <th>Kategorie</th>
                    <th>Firma</th>
                    {% if current_user.is_superadmin() %}<th>Vorlage</th>{% endif %}
                    <th>Aktiv</th>
                    <th>Aktionen</th>
                </tr>
            </thead>
            <tbody id="js-sort-company">
                {% for m in company_modules %}
                <tr data-id="{{ m.id }}">
                    <td class="drag-handle" style="cursor:grab;text-align:center;color:#aaa">⠿</td>
                    <td>{{ m.icon }} {{ m.name }}</td>
                    <td>{{ m.kategorie }}</td>
                    <td>{{ m.company.name if m.company else '—' }}</td>
                    {% if current_user.is_superadmin() %}
                    <td>
                        {% if m.original_template_id %}
                        <span class="tag is-light">kopiert</span>
                        {% else %}
                        <span class="tag is-white">eigenes</span>
                        {% endif %}
                    </td>
                    {% endif %}
                    <td>
                        <span class="tag {% if m.is_active %}is-success{% else %}is-light{% endif %}">
                            {{ 'Aktiv' if m.is_active else 'Inaktiv' }}
                        </span>
                    </td>
                    <td>
                        {% if current_user.is_superadmin() or (current_user.is_firmadmin() and m.company_id == current_user.company_id) %}
                        <a href="{{ url_for('custom_modules.edit', module_id=m.id) }}" class="button is-small">Bearbeiten</a>
                        <a href="{{ url_for('custom_modules.builder', module_id=m.id) }}" class="button is-small is-info">Builder</a>
                        <form method="POST" action="{{ url_for('custom_modules.loeschen', module_id=m.id) }}" style="display:inline">
                            <button class="button is-small is-danger" onclick="return confirm('Wirklich löschen?')">Löschen</button>
                        </form>
                        {% if current_user.is_superadmin() %}
                        <form method="POST" action="{{ url_for('custom_modules.als_vorlage', module_id=m.id) }}" style="display:inline">
                            <button class="button is-small is-warning">Als Vorlage</button>
                        </form>
                        {% endif %}
                        {% endif %}
                    </td>
                </tr>
                {% else %}
                <tr><td colspan="7" class="has-text-centered"><em>Keine Module vorhanden.</em></td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<style>
.sortable-ghost{opacity:0.4}
.sortable-chosen{background:#d4e3ff}
.drag-handle:hover{color:#2F5496!important}
#js-sort-templates tr.dragging, #js-sort-company tr.dragging{background:#f0f4ff}
</style>

<script>
(function(){
    function commitSort(listId, endpoint) {
        var el = document.getElementById(listId);
        if (!el) return;
        if (el._sortable) el._sortable.destroy();
        el._sortable = new Sortable(el, {
            handle: '.drag-handle',
            animation: 150,
            ghostClass: 'sortable-ghost',
            chosenClass: 'sortable-chosen',
            dragClass: 'dragging',
            onEnd: function() {
                var rows = el.querySelectorAll('tr[data-id]');
                var order = [];
                rows.forEach(function(r, idx) {
                    order.push({id: parseInt(r.dataset.id), sort_index: idx});
                });
                fetch(endpoint, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(order)
                }).then(function(r){return r.json()}).then(function(d){
                    if (!d.ok) console.warn('Sort failed', d);
                });
            }
        });
    }
    commitSort('js-sort-templates', '{{ url_for("custom_modules.sort_batch")|safe }}');
    commitSort('js-sort-company', '{{ url_for("custom_modules.sort_batch")|safe }}');
})();
</script>
{% endblock %}