{% extends "pages/abstract/dashboard.html.twig" %}

{% block page_title %}{{ translate('SITE.CONFIG.MANAGER') }}{% endblock %}
{% block page_description %}{{ translate('SITE.CONFIG.PAGEDESC') }}{% endblock %}

{% block body_matter %}
    <div class="row">
        <div class="col-lg-3">
            <div class="box box-primary">
                <div class="box-header">
                    <h3 class="box-title">Menu</h3>
                </div>
                <div class="box-body">
                    <ul id="configMenu" class="nav nav-pills nav-stacked">
                    {% for schema in schemas %}
                        <li role="presentation" {% if loop.first %} class="active"{% endif %}><a href="#configPanel-{{ schema.filename }}" data-target="configPanel-{{ schema.filename }}">{{ translate(schema.name) }}</a></li>
                    {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-9">
            {% for schema in schemas %}
            <div id="configPanel-{{ schema.filename }}" class="box box-primary" {% if not loop.first %} style="display: none;"{% endif %}>
                <form method="post" action="{{schema.formAction}}" class="form-horizontal">
                    <div class="box-header">
                        <h3 class="box-title">{{ translate(schema.name) }}</h3>
                    </div>
                    <div class="box-body">
                        {% if schema.desc %}<p>{{ translate(schema.desc) }}</p>{% endif %}
                        {% include "forms/csrf.html.twig" %}
                        <div class="form-alerts"></div>
                        {% include 'FormGenerator/FormGenerator.html.twig' with {fields: schema.fields, 'formLayout': 'horizontal'} %}
                    </div>
                    <div class="box-footer text-center">
                        <button type="reset" class="btn btn-default">{{translate('RESET')}}</button>
                        <button type="submit" class="btn btn-primary js-submit">{{translate('SAVE')}}</button>
                    </div>
                </form>
            </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}
{% block scripts_page %}

    <script>
        $(document).ready(function () {
            $("[id^=configPanel-]").ConfigManager({
                menu : $("#configMenu"),
                validators : {
                    {% for schema in schemas %}
                        "configPanel-{{ schema.filename }}" : {{schema.validators | raw}},
                    {% endfor %}
                }
            });
        });
    </script>

    <!-- Include form widgets JS -->
    {{ assets.js('js/ConfigManager') | raw }}
    {{ assets.js('js/form-widgets') | raw }}

{% endblock %}