{% extends 'admin/@layout.html.twig' %}

{% set pageName = 'page_name_template_layouts'|trans({}, 'admin') %}

{% block content %}
    <div class="row" data-controller="layout" data-template="{{ template.id }}">
        <div class="col-6">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <section class="preview">
                                <h2>Preview</h2>
                                <ul class="devices">
                                    <li><a href="#" data-action="layout#changeDevice:prevent" data-type="desktop">Desktop</a>
                                    </li>
                                    <li><a href="#" data-action="layout#changeDevice:prevent"
                                           data-type="tablet">Tablet</a>
                                    </li>
                                    <li><a href="#" data-action="layout#changeDevice:prevent"
                                           data-type="mobile">Mobile</a>
                                    </li>
                                </ul>

                                <div class="device device-desktop">
                                    <iframe src="" class="preview-window"></iframe>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6">
            {{ form_start(form) }}
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            {{ form_row(form.pageType) }}
                            {{ form_row(form.layout) }}
                            <hr>
                            {{ _self.sectionForm(form.templateSections) }}
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-12 text-right">
                            <twig:button_save/>
                        </div>
                    </div>
                </div>
            </div>
            {{ form_end(form) }}
        </div>
    </div>
{% endblock %}

{% macro sectionForm(templateSections) %}
    {% for section in templateSections %}
        <div class="card section-settings">
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        {{ form_widget(section.sectionType) }}
                    </div>
                    <div class="col-6">
                        {% if section.sectionType.vars.value in ['header', 'content', 'footer'] %}
                            {{ form_row(section.containerEnabled) }}
                        {% else %}
                            <div class="d-none">
                                {{ form_row(section.containerEnabled) }}
                            </div>
                        {% endif %}
                    </div>
                </div>
                <div class="row">
                    <hr>
                </div>
                <div class="row">
                    <div class="col-2">
                        {{ form_row(section.widthExtraSmall) }}
                    </div>
                    <div class="col-2">
                        {{ form_row(section.widthSmall) }}
                    </div>
                    <div class="col-2">
                        {{ form_row(section.widthMedium) }}
                    </div>
                    <div class="col-2">
                        {{ form_row(section.widthLarge) }}
                    </div>
                    <div class="col-2">
                        {{ form_row(section.widthExtraLarge) }}
                    </div>
                    <div class="col-2">
                        {{ form_row(section.widthExtraExtraLarge) }}
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
{% endmacro %}

{% block body_class %}template-layouts{% endblock %}