{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
    <nav class="breadcrumb" aria-label="breadcrumbs">
        <ul>
            <li><a href="{{ url_for('custom_modules.index') }}">Modul-Builder</a></li>
            <li class="is-active"><a href="#">{{ module.name if module else 'Neues Modul' }}</a></li>
        </ul>
    </nav>

    <h2 class="title is-4">{{ '✏️' if module else '➕' }} {{ module.name if module else 'Neues Modul' }}</h2>

    <form method="POST" class="box">
        <div class="columns is-multiline">
            <div class="column is-6">
                <label class="label">Name *</label>
                <input class="input" name="name" value="{{ module.name if module else '' }}" required>
            </div>
            <div class="column is-3">
                <label class="label">Icon (Emoji)</label>
                <input class="input" name="icon" value="{{ module.icon if module else '🔧' }}">
            </div>
            <div class="column is-3">
                <label class="label">Kategorie</label>
                <div class="select is-fullwidth">
                    <select name="kategorie">
                        <option value="allgemein" {% if module and module.kategorie=='allgemein' %}selected{% endif %}>Allgemein</option>
                        <option value="tiefbau" {% if module and module.kategorie=='tiefbau' %}selected{% endif %}>Tiefbau</option>
                        <option value="graben" {% if module and module.kategorie=='graben' %}selected{% endif %}>Graben</option>
                        <option value="montage" {% if module and module.kategorie=='montage' %}selected{% endif %}>Montage</option>
                        <option value="sonder" {% if module and module.kategorie=='sonder' %}selected{% endif %}>Sonder</option>
                    </select>
                </div>
            </div>
            <div class="column is-12">
                <label class="label">Beschreibung</label>
                <textarea class="textarea" name="description" rows="2">{{ module.description if module else '' }}</textarea>
            </div>
            {% if is_superadmin %}
            <div class="column is-3">
                <label class="checkbox mt-5">
                    <input type="checkbox" name="is_template" value="1" {% if module and module.is_template %}checked{% endif %}>
                    Globale Vorlage
                </label>
            </div>
            {% endif %}
            <div class="column is-3">
                <label class="checkbox mt-5">
                    <input type="checkbox" name="is_active" value="1" {% if not module or module.is_active %}checked{% endif %}>
                    Aktiv
                </label>
            </div>
        </div>

        <div class="buttons mt-3">
            <button class="button is-primary" type="submit">Speichern</button>
            <a href="{{ url_for('custom_modules.index') }}" class="button is-light">Abbrechen</a>
        </div>
    </form>

    {% if module %}
    <div class="buttons mt-4">
        <a href="{{ url_for('custom_modules.builder', module_id=module.id) }}" class="button is-info is-large">
            🎨 Zum Builder
        </a>
    </div>

    {% if module.company_id %}
    <hr>
    <h3 class="title is-5">👥 Mitarbeiter-Zugriff</h3>
    <p class="subtitle is-6">Lege fest, welche Mitarbeiter dieses Modul nutzen dürfen.</p>
    <div class="table-container">
        <table class="table is-fullwidth is-hoverable">
            <thead>
                <tr><th>Mitarbeiter</th><th>Zugriff</th></tr>
            </thead>
            <tbody>
                {% for u in users %}
                <tr>
                    <td>{{ u.full_name }}</td>
                    <td>
                        <label class="checkbox">
                            <input type="checkbox"
                                   class="js-user-toggle"
                                   data-module-id="{{ module.id }}"
                                   data-user-id="{{ u.id }}"
                                   {% if u.id in assignments %}checked{% endif %}>
                            Freigegeben
                        </label>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
document.querySelectorAll('.js-user-toggle').forEach(function(cb) {
    cb.addEventListener('change', function() {
        var moduleId = this.dataset.moduleId;
        var userId = this.dataset.userId;
        fetch('/custom-modules/' + moduleId + '/user/' + userId + '/toggle', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({active: this.checked, can_edit: false})
        }).then(function(r) { return r.json(); }).then(function(data) {
            if (data.message) console.log(data.message);
        });
    });
});
</script>
{% endblock %}