{%- extends 'skeleton.html.twig' -%}

{% block body_attrs %}data-mercure-url="{{ mercure_url }}"{% endblock %}

{% block body_content %}
    <header>
        <nav class="navbar navbar-expand-lg {{ navbarColor }}" {% if navbarColor in ['bg-dark', 'bg-primary'] %}data-bs-theme="dark"{% endif %}>
            <div class="container-fluid">
                <a class="navbar-brand" href="{{ path('home') }}">
                    <img src="{{ asset(logoNavbar) }}" alt="{{ title }}" title="{{ title }}" height="38">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#novosga-navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div id="novosga-navbar" class="collapse navbar-collapse novosga-navbar">
                    {% if app.user and (app.user.admin or app.user.lotacao) %}
                        {{ render(controller('App\\Controller\\DefaultController::menu')) }}
                    {% endif %}

                    {% if app.user %}
                        <ul class="navbar-nav ml-auto mr-sm-2">
                            {% if is_granted('ROLE_USER') %}
                                <li class="nav-item">
                                    <a href="{{ path('about') }}" title="{{ 'menu.about'|trans }}" class="nav-link">
                                        <i class="fa fa-question-circle fa-fw"></i>
                                    </a>
                                </li>
                            {% endif %}
                            {% if is_granted('ROLE_ADMIN') %}
                                <li class="nav-item">
                                    <a href="{{ path('admin_index') }}" title="{{ 'menu.admin'|trans }}" class="nav-link">
                                        <i class="fa fa-cog fa-fw"></i>
                                    </a>
                                </li>
                            {% endif %}
                            <li class="nav-item dropdown">
                                <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
                                    <i class="fa fa-user fa-fw"></i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-end">
                                    <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">
                                        {{ app.user }}
                                    </a>
                                    <div class="dropdown-divider"></div>
                                    <a href="{{ path('profile_index') }}" title="" class="dropdown-item">
                                        <i class="fa fa-user fa-fw"></i>
                                        {{ 'menu.user.profile'|trans }}
                                    </a>
                                    <a href="{{ path('_logout_main') }}" class="dropdown-item">
                                        <i class="fa fa-sign-out fa-fw"></i>
                                        {{ 'menu.user.logout'|trans }}
                                    </a>
                                </div>
                            </li>
                        </ul>
                    {% endif %}
                </div>
            </div>
        </nav>
    </header>
    <section>
        <div class="container-fluid">
            {% block body %}
            {% endblock %}
        </div>
    </section>
    <footer>
        <p>{{ title }} v{{ version }} <i class="fa fa-heart" aria-hidden="true"></i> <a href="https://mangati.com?utm_source=novosga&utm_medium=novosga&utm_campaign=novosga&utm_content=footer" target="_blank" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Mangati</a></p>
    </footer>
    
    <div id="error-modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ 'modal.error.title'|trans }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        {{ 'button.close'|trans }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <span id="ajax-loading" class="mini-loading" style="display:none"></span>

    <script type="text/javascript" src="{{ asset('js/popper.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/vue.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/script.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/moment-with-locales.min.js') }}"></script>
    <script type="text/javascript">
        App.baseUrl = '{{ app.request.baseUrl() }}';
        App.version = '{{ version }}';
        App.dateFormat = '{{ "m/d/Y"|trans }}';
    </script>
    {% if app.user and app.user.lotacao %}
        {{ render(controller('App\\Controller\\DefaultController::unidades')) }}
    {% endif %}
{% endblock %}
