{% extends 'base.html.twig' %}

{% block title %}Gefahrenzone bearbeiten{% endblock %}

{% block content %}
    <div class="container mt-4">
        <h1>Gefahrenzone bearbeiten: {{ dangerZone.name }}</h1>

        {{ form_start(form) }}

        <div class="row">
            <div class="col-md-6">
                <div class="mb-3">
                    {{ form_label(form.name) }}
                    {{ form_widget(form.name, {'attr': {'class': 'form-control'}}) }}
                </div>
                <div class="mb-3">
                    {{ form_label(form.minX) }}
                    {{ form_widget(form.minX, {'attr': {'class': 'form-control'}}) }}
                </div>
                <div class="mb-3">
                    {{ form_label(form.minY) }}
                    {{ form_widget(form.minY, {'attr': {'class': 'form-control'}}) }}
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    {{ form_label(form.maxX) }}
                    {{ form_widget(form.maxX, {'attr': {'class': 'form-control'}}) }}
                </div>
                <div class="mb-3">
                    {{ form_label(form.maxY) }}
                    {{ form_widget(form.maxY, {'attr': {'class': 'form-control'}}) }}
                </div>
            </div>
        </div>

        <h2>Spawner</h2>
        <div id="spawners">
            {% for spawner in form.spawners %}
                <div class="spawner-item mb-3">
                    {{ form_widget(spawner, {'attr': {'class': 'form-control d-inline-block w-75'}}) }}
                    <button type="button" class="btn btn-danger remove-spawner">Entfernen</button>
                </div>
            {% endfor %}
        </div>

        <button type="button" class="btn btn-success mt-2" id="add-spawner">Spawner hinzufügen</button>

        <div class="mt-3">
            <button type="submit" class="btn btn-primary">Speichern</button>
            <a href="{{ path('danger_zone_index') }}" class="btn btn-secondary">Abbrechen</a>
        </div>

        {{ form_end(form) }}
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let spawnerContainer = document.getElementById('spawners');
            let addSpawnerBtn = document.getElementById('add-spawner');
            let index = {{ form.spawners|length }};

            addSpawnerBtn.addEventListener('click', function () {
                let prototype = '{{ form_widget(form.spawners.vars.prototype)|e('js') }}';
                let newForm = prototype.replace(/__name__/g, index);
                let div = document.createElement('div');
                div.classList.add('spawner-item', 'mb-3');
                div.innerHTML = newForm + '<button type="button" class="btn btn-danger remove-spawner">Entfernen</button>';
                spawnerContainer.appendChild(div);
                index++;
            });

            spawnerContainer.addEventListener('click', function (event) {
                if (event.target.classList.contains('remove-spawner')) {
                    event.target.parentElement.remove();
                }
            });
        });
    </script>
{% endblock %}