{% extends 'base.html.twig' %}
{% block content %}
    <div class="container-fluid">
        {% if page_title is defined %}
        <div class="row pt-3">
            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <h3 class="pt-2">
                    {{ page_title }}
                </h3>
            </div>
        </div>
        {% endif %}
        <div class="card">
            <div class="card-header">
                {% for alert, messages in app.flashes %}
                    <div class="alert alert-{{ alert }}">
                        {% for message in messages %}
                            {{ message }}
                        {% endfor %}
                    </div>
                {% endfor %}

                {% if back_route is defined %}
                <div class="row">
                    <div class="col-sm-12 col-md-8 col-lg-6 col-xl-6">
                        <a href="{{ path(back_route) }}" class="btn btn-ghost">
                            <i class="icon asg-chevron-left"></i>Back
                        </a>
                    </div>
                </div>
                {% endif %}
            </div>
            <div class="card-body">
                <div class="col-sm-12 col-md-8 col-lg-6 col-xl-6">
                    {{ form_start(form) }}
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts_post_body %}
    <script type="text/javascript">
        $(document).ready(function () {

            $.fn.selectpicker.Constructor.BootstrapVersion = '4';

            $('select').selectpicker({
                liveSearch:true
            });

            $('#role_permissions_section').on('change', function () {
                let section = $('#role_permissions_section option:selected').text();
                let subsection = $('#role_permissions_subsections');

                function appendBreakdownOptions (data) {
                    subsection.append(new Option('Select subcategory', ''));
                    $.each(data, function (dataKey, dataValue) {
                        subsection.append(new Option(dataValue.name, dataValue.id));
                    });
                }

                function loadBreakdownTypes (data) {
                    subsection.empty();
                    appendBreakdownOptions(data);
                }

                let url = "{{ path('user_account_permissions_sub_select', {'section': 'sectionPlaceholder'}) }}";
                $.get(url.replace('sectionPlaceholder', section), loadBreakdownTypes);

                setTimeout(function () {
                    $(subsection).selectpicker('refresh')
                }, 500);
            });

        });
    </script>
{% endblock %}