{% extends 'admin/_layout.html.twig' %}

{% set active_nav = 'blocks' %}

{% block title %}{{ mode == 'new' ? 'Nuevo bloque' : 'Editar bloque' }}{% endblock %}

{% block admin_content %}
    <div style="max-width: 940px; margin: 0 auto;">
        <a href="{{ path('admin_blocks_index') }}" class="back-link">&larr; Bloques</a>

        <div class="card">
            <h1 class="card-title">{{ mode == 'new' ? 'Nuevo bloque' : 'Editar bloque' }}</h1>

            {{ form_errors(form) }}
            {{ form_start(form, {attr: {class: 'adm__form', novalidate: 'novalidate', id: 'block-form'}}) }}
                {{ form_row(form.title) }}
                {{ form_row(form.showTitle) }}
                {{ form_row(form.zone) }}
                {{ form_row(form.type) }}

                <div class="block-type-settings" data-for-type="tag_cloud">
                    {{ form_row(form.tagCloudLimit) }}
                </div>
                <div class="block-type-settings" data-for-type="recent_articles">
                    {{ form_row(form.recentArticlesLimit) }}
                    {{ form_row(form.recentArticlesLayout) }}
                </div>
                <div class="block-type-settings" data-for-type="custom_html">
                    {{ form_row(form.customHtml) }}
                    {{ plugin_hook('article_editor', {textarea_id: 'block_custom_html'}) }}
                </div>

                <button type="submit" class="adm__btn adm__btn--primary adm__btn--block">{{ 'common.save'|trans }}</button>
            {{ form_end(form) }}
        </div>
    </div>

    <script>
    (function () {
        var form = document.getElementById('block-form');
        var typeSelect = document.getElementById('{{ form.type.vars.id }}');
        if (!form || !typeSelect) {
            return;
        }

        var groups = form.querySelectorAll('.block-type-settings');

        function updateVisibility() {
            var selected = typeSelect.value;
            groups.forEach(function (group) {
                group.hidden = group.getAttribute('data-for-type') !== selected;
            });
        }

        typeSelect.addEventListener('change', updateVisibility);
        updateVisibility();
    })();
    </script>
{% endblock %}