{% extends '@Comitium5Designer/Template/create.html.twig' %}

{% import 'Comitium5DesignerBundle:Common:alerts.html.twig' as alert %}

{% form_theme form '@Comitium5Designer/Template/form_div_layout.html.twig' %}

{% block form_content %}
{{ form_start(form, {action: app.request.uri, attr: {class: ''} } ) }}
<div class="col-lg-8">
    <!-- Acordion -->
    <div id="accordion">

        <!-- Collapsable Card 1 -->
        <div class="card">

            <!-- Card Header - Accordion -->
            <a href="#collapseCardExample" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseCardExample">
                <h6 class="m-0 font-weight-bold text-primary">
                    <span class="number">1</span> {{ "template_admin.form.new.group_1.title"|trans }}</h6>
            </a>

            <!-- Card Content - Collapse -->
            <div class="collapse show" id="collapseCardExample">
                <div class="card-body">
                    <div class="form-row">
                        <div class="form-group col-md-8">
                            {{ form_label(form.name, "template_admin.fields.name"|trans) }}
                            {{ form_widget(form.name, { attr: { placeholder: "template_admin.form.new.fields.name.placeholder"|trans, class: "form-control" } }) }}
                            {{ form_errors(form.name) }}
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-8">
                            {{ form_label(form.description, "template_admin.fields.description"|trans) }}
                            {{ form_widget(form.description, { attr: { placeholder: "template_admin.form.new.fields.description.placeholder"|trans, class: "form-control" } }) }}
                            {{ form_errors(form.description) }}
                        </div>
                    </div>

                    <div class="custom-control custom-switch">
                        {{ form_widget(form.enabled, { attr: { class: "custom-control-input" } }) }}
                        {{ form_label(form.enabled, "template_admin.form.new.fields.active.label"|trans,{label_attr: {class: "custom-control-label"}}) }}
                        {{ form_errors(form.enabled) }}
                    </div>
                </div>
            </div>

        </div>

        <div class="my-2"></div>

        <!-- Collapsable Card 2 -->
        <div class="card">
            <a href="#collapseCardExample2" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseCardExample2">
                <h6 class="m-0 font-weight-bold text-primary">
                    <span class="number">2</span> {{ "template_admin.form.new.group_2.title"|trans }}</h6>
            </a>

            <!-- Card Content - Collapse -->
            <div class="collapse show" id="collapseCardExample2">
                <div class="card-body">

                    <div>{{ "template_admin.form.new.group_2.info"|trans }}</div>
                    <div class="custom-control custom-radio">
                        <input type="radio" id="parentRadio1" name="parentRadio" class="custom-control-input" value="existing" {% if form.parent.vars.value is defined and form.parent.vars.value is not empty %}checked{% endif %}>
                        <label class="custom-control-label" for="parentRadio1">{{ "template_admin.form.new.fields.exist_or_new.label_op_1"|trans }}</label>
                    </div>

                    <div class="my-2"></div>

                    <div class="form-row">
                        <div class="form-group col-md-4">
                            {{ form_widget(form.parent, { attr: { class: "form-control enable-select2", "data-placeholder": "template_admin.form.new.fields.exist_or_new.placeholder"|trans } }) }}
                            {{ form_errors(form.parent) }}
                        </div>
                    </div>

                    <div class="custom-control custom-radio">
                        <input type="radio" id="parentRadio2" name="parentRadio" class="custom-control-input" value="none" {% if form.parent.vars.value is defined and form.parent.vars.value is empty %}checked{% endif %}>
                        <label class="custom-control-label" for="parentRadio2">{{ "template_admin.form.new.fields.exist_or_new.label_op_2"|trans }}</label>
                    </div>

                    <div class="my-2"></div>
                </div>
            </div>
        </div>

        <div class="my-2"></div>

        <!-- Collapsable Card 3 -->
        <div class="card">
            <a href="#collapseCardExample5" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseCardExample5">
                <h6 class="m-0 font-weight-bold text-primary">
                    <span class="number">3</span> {{ "template_admin.form.new.group_3.title"|trans }}</h6>
            </a>

            <!-- Card Content - Collapse -->
            <div class="collapse show" id="collapseCardExample5">
                <div class="card-body">

                    <h6><b>{{ "template_admin.form.new.info_title"|trans }}</b></h6>
                    <p>{{ "template_admin.form.new.group_3.info"|trans }}</p>

                    <a href="https://symfony.com/doc/current/templates.html" target="_blank" class="btn btn-primary btn-icon-split btn-sm">
                        <span class="icon text-white-50">
                            <i class="fas fa-info-circle"></i>
                        </span>
                        <span class="text">{{ "template_admin.form.new.more_info"|trans }}</span>
                    </a>

                    <div class="my-4"></div>

                    <div class="form-group ace-editor-container">
                        {{ form_label(form.html, "template_admin.form.new.fields.content.label"|trans) }}
                        {{ form_widget(form.html, { attr: { class: "form-control", "data-editor": "twig", "style": "height: 500px;width: 100%;" } }) }}
                        {{ form_errors(form.html) }}
                    </div>
                </div>
            </div>
        </div>

        <div class="my-2"></div>

        <!-- Collapsable Card 4 -->
        <div class="card">
            <a href="#collapseCardExample6" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="collapseCardExample6">
                <h6 class="m-0 font-weight-bold text-primary" data-breakpoints-block-title>
                    <span class="number">4</span> {{ "template_admin.form.new.group_4.title"|trans }}</h6>
            </a>

            <!-- Card Content - Collapse -->
            <div class="collapse show" id="collapseCardExample6">
                <div class="card-body" data-breakpoint-card-body>

                    <h6><b>{{ "template_admin.form.new.info_title"|trans }} </b></h6>
                    <p>{{ "template_admin.form.new.group_4.info"|trans }}</p>
                    <a href="https://www.w3.org/TR/css3-mediaqueries/#width" target="_blank" class="btn btn-primary btn-icon-split btn-sm">
                        <span class="icon text-white-50">
                            <i class="fas fa-info-circle"></i>
                        </span>
                        <span class="text">{{ "template_admin.form.new.more_info"|trans }}</span>
                    </a>

                    <div class="my-4"></div>

                    {{ form_label(form.breakpoints, "template_admin.form.new.group_4.placeholder"|trans) }}
                    <div class="input-group">
                        {{ form_widget(form.breakpoints, { attr: { class: "custom-select form-control enable-select2" } }) }}
                        {{ form_errors(form.breakpoints) }}
                    </div>

                    <div class="my-4"></div>
                </div>
                <div class='card-body' data-message-container style="display: none;">
                    <h6><b>{{ "template_admin.form.new.info_title"|trans }}</b></h6>
                    <span data-breakpoint-message>
                    {{ "template_admin.form.new.group_4.blocked_breakpoints_info_message"|trans }}
                    </span>
                    <span data-breakpoint-message-template></span>
                </div>
            </div>
        </div>

        <!-- End Acordion -->
    </div>
</div>

<div class="col-lg-8">
    <!-- DataTales Example -->
    <div class="my-4"></div>
    <div class="form-row fixat" data-nav-element >
        <div class="container-fluid">
            <div class="form-group col-md-12 fixat-group">
                {{ btn.cancel( {class: "btn btn-outline-secondary", attr: { href: form_referer(form, url('designer_template_index')) }} ) }}
                {% if app.request.attributes.get('_route') == 'designer_template_edit' %}
                {{ btn.delete( {class: "btn-danger", attr: {
                        "data-toggle" : 'modal',
                        "data-behaviour" : 'delete',
                        "data-title" : 'designer_common.action.delete.something'|trans({"%something%": "designer_common.entity.template"|transchoice(1)}),
                        "data-message" : 'designer_common.messages.confirm_delete'|trans(),
                        "data-url" : url('designer_template_delete', {id: form.vars.value.id}),
                        "data-redirect-url" : form_referer(form, url('designer_template_index'))
                    },
                        "type" : 'button'
                    } ) }}
                {% endif %}
                {{ form_widget(form.submit, { attr: { class: "btn btn-primary float-right" }}) }}
            </div>
            <!-- Scroll to Top Button-->
            <a class="scroll-to-top rounded" style="margin-bottom: -9px;" href="#page-top">
                <i class="fas fa-angle-up"></i>
            </a>
        </div>
    </div>
    <!-- End of DataTales Example -->
</div>
{{ form_end(form) }}
<script type="application/javascript">
    document.addEventListener("DOMContentLoaded", function(event) {
        var templateForm = new TemplateForm();
        templateForm.init()
    });

</script>
{% endblock form_content %}
