{% extends '::base.html.twig' %}

{% block stylesheets %}

    {# datepicker styles #}
    {# <link 
        rel="stylesheet" 
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/css/bootstrap-datetimepicker.min.css" 
        integrity="sha512-4yyv1lG510c3JZgYOkoajpJ1m4C4d/ZJMUlyhhXt6KXBaFdo0MoRCijWQGxLKJ+qyt+qmoI8081iQOjTmv62xA==" 
        crossorigin="anonymous" 
    /> #}

    {% stylesheets
        'bundles/app/dist/croppie/demo/prism.css'
        'bundles/app/dist/croppie/croppie.css'
        'bundles/app/dist/easyautocomplete/easy-autocomplete.min.css'
        'bundles/app/dist/dist/magnific-popup.css'
        'bundles/app/plugins/select2/select2.min.css'
        'bundles/app/plugins/datepickermobile/jquery-ui.css'
        'bundles/app/plugins/swalforms/css/swal-forms.css'
        'bundles/app/plugins/datetimepicker/css/datetimepicker.css'
        filter='cssrewrite'
    %}
        <link rel="stylesheet" href="{{ asset_url }}"/>
    {% endstylesheets %}

    {# <link rel="Stylesheet" type="text/css" href="https://cdn.rawgit.com/taromero/swal-forms/master/swal-forms.css"/> #}

{% endblock %}

{% block stylesheets2nd %}{% endblock %}

{% block stylesheets3rd %}{% endblock %}

{% block body %}
    <style>
    
    body{font-family: 'Montserrat', sans-serif!important;}

    .wrapper {
        min-height: 100%;
        position: relative;
        overflow: hidden !important;
    }

    .wrapper:before,
    .wrapper:after {
        content: " ";
        display: table;
    }

    .wrapper:after {
        clear: both;
    }

    .content-wrapper {
        margin-left:50px;
        background: transparent;
        box-shadow: none;
        position: relative;
        padding: 15px 15px 0 15px;
    }
    </style>

    <div class="wrapper">

        {# header nav #}
        {{ render(controller('AppBundle:Admin:includeHead')) }}

        {# aside nav options #}
        {{ render(controller('AppBundle:Admin:includeAsideLeft')) }}

        {# page content #}
        <main class="content-wrapper" style="background-color: #ecf0f5;">

            <section class="content-header">
                {% block content_header %}
                {{ include ('AppBundle:Default:includes/flashMessages.html.twig') }}
                <h1>{% block headercontent %}{% endblock %}</h1>
                {% block headerDateSync %}
                    <span id="lastSync" class="text-nowrap text-right mt-4" style="display: none; float: right; font-weight: bold; position: relative; top: 20px; margin-right: 25px;">
                {% endblock %}
                {% endblock %}
            </section>

            <div class="content" style="min-height: 250px;margin-right: auto;margin-left: auto;">
                {% block content %}{% endblock %}
            </div>

            <div class="container"></div>

        </main>

        <footer class="main-footer"></footer>

        <div class="control-sidebar-bg"></div>
    </div>

{% endblock %}

{% block javascripts %}

    <script type="text/javascript">
        /**
        * This object initializes a json taking determined values from twig.
        * @constant
        * @type {JSON}
        */
        const twigParamsObject = {
            userId: '{{ app.user.id }}',
            sellerId: '{{ app.user.empresa.id | default('') }}',
            sellerName: '{{ app.user.empresa.nombre | default('') }}',
            timezone: '{{ app.user.empresa.timezone.code | default('') }}',
            baseUrl: '{{ app.request.getBaseURL }}',
        }
    </script>

    {# moment.js library #}
    <script 
        src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" 
        integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" 
        crossorigin="anonymous">
    </script>

    {# moment.js locals #}
    <script 
        src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" 
        integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" 
        crossorigin="anonymous">
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.43/moment-timezone-with-data.min.js"></script>

    {# datepicker library #}
    {# <script 
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js" 
        integrity="sha512-S/yovhD96PAQtOskZtPuDTXcrU5ZOEYeiZfbYL1gfyZNobFCktETZERF1PTY+lHdqtSynoBNXKCgp/Lzh9dlBA==" 
        crossorigin="anonymous">
    </script> #}

    {% javascripts
        '@AppBundle/Resources/public/plugins/datetimepicker/js/datetimepicker.js'
        '@AppBundle/Resources/public/plugins/select2/select2.full.min.js'
        '@AppBundle/Resources/public/dist/easyautocomplete/jquery.easy-autocomplete.min.js'
        '@AppBundle/Resources/public/plugins/datepickermobile/jquery-ui.js'

        '@AppBundle/Resources/public/dist/croppie/demo/prism.js'
        '@AppBundle/Resources/public/dist/croppie/croppie.min.js'

        '@AppBundle/Resources/public/plugins/jQueryUI/jquery-ui.min.js'

        '@AppBundle/Resources/public/js/base.js'
        '@AppBundle/Resources/public/js/routes.js'
        '@AppBundle/Resources/public/js/global.functions.js'
        '@AppBundle/Resources/public/js/ajax.custom.global.GET.functions.js'
        '@AppBundle/Resources/public/js/ajax.custom.global.POST.functions.js'
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

    {# select2 spanish translation #}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/i18n/es.js"
        integrity="sha512-GqFdFW2aWVuPunYcy5A4ATbOBnMy65u+olxterkRwB55xQr0Yivqc/lKByOTFjSNUELyjqFZUX8v7kYzjFQ/jw==" 
        crossorigin="anonymous">
    </script>

{% endblock %}

{% block javascripts2nd %}{% endblock %}

{% block javascripts3rd %}{% endblock %}