{% extends 'Comitium5DesignerBundle:Breakpoint:create.html.twig' %}

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

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

{% block form_content %}
    {{ form_start(form, {action: app.request.uri, attr: {class: ''} } ) }}

    <div class="form-row">
        <div class="form-group col-md-8">
            {{ form_label(form.name, "breakpoint_admin.fields.name"|trans) }}
            {{ form_widget(form.name, { attr: { placeholder: "breakpoint_admin.form.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.type, "breakpoint_admin.fields.type"|trans) }}
            {{ form_widget(form.type, { attr: { class: "form-control enable-select2" } }) }}
            {{ form_errors(form.type) }}
        </div>
    </div>

    <div class="form-row">
        <div class="form-group col-md-4">
            {{ form_label(form.minWidth, "breakpoint_admin.fields.min_width"|trans) }}
            <div class="input-group-prepend">
                {{ form_widget(form.minWidth, { attr: { class: "form-control" } }) }}
            </div>
            {{ form_errors(form.minWidth) }}
        </div>
    </div>

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

    <div class="form-row fixat" data-nav-element >
        <div class="form-group col-md-12 fixat-group">
            
            {{ btn.cancel( {class: "btn btn-outline-secondary", attr: { href: form_referer(form, url('designer_breakpoint_index')) }} ) }}

            {% if app.request.attributes.get('_route') == 'designer_breakpoint_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.breakpoint"|transchoice(1)}),
                    "data-message" : 'designer_common.messages.confirm_delete'|trans(),
                    "data-url" : url('designer_breakpoint_delete', {id: form.vars.value.id}),
                    "data-redirect-url" : form_referer(form, url('designer_breakpoint_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>
    {{ form_end(form) }}
    <script type="application/javascript">
        document.addEventListener("DOMContentLoaded", function (event) {
            var breakpointForm = new BreakpointForm();
            breakpointForm.init()
        });
    </script>
{% endblock form_content %}