<!DOCTYPE html>
<html lang="{{ app.request.locale }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="manifest" href="{{ preload(asset('manifest.json'), {as: 'manifest'}) }}">

    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="application-name" content="Part-DB">
    <meta name="apple-mobile-web-app-title" content="Part-DB">
    <meta name="msapplication-config" content="{{ asset('icons/browserconfig.xml') }}">
    <meta name="theme-color" content="#ffffff">
    <meta name="theme-color" content="#ffffff">
    <meta name="msapplication-navbutton-color" content="#ffffff">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="msapplication-starturl" content="/en/">


    <link rel="shortcut icon" type="image/x-icon" href="{{ asset('icons/favicon.ico') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('icons/apple-touch-icon.png') }}">
    <link rel="icon" type="image/png" href="{{ asset('icons/favicon-32x32.png') }}" sizes="32x32">
    <link rel="icon" type="image/png" href="{{  asset('icons/favicon-16x16.png') }}" sizes="16x16">
    <link rel="mask-icon" href="{{ asset('icons/safari-pinned-tab.svg') }}" color="#5bbad5">


    <title>{% apply trim %}{% block title %}{{ partdb_title}}{% endblock %}{% endapply %}</title>
    {% block stylesheets %}
        {# Include the main bootstrap theme based on user/global setting #}



        {% if not app.user.theme is defined %}
            {% set theme = global_theme %}
        {% else %}
            {% set theme = app.user.theme %}
        {% endif %}



        {% if theme %}
            <link rel="stylesheet" href="{{ preload(asset('build/themes/' ~ theme ~ '.css'), {as: 'style'}) }}">
        {% else %}
            <link rel="stylesheet" href="{{ preload(asset('build/themes/bootstrap.css'), {as: 'style'}) }}">
        {% endif %}

        {{ encore_entry_link_tags('app') }}
    {% endblock %}
</head>
<body data-base-url="{{ url('homepage', {'_locale': app.request.locale}) }}">
{% block body %}

    <header>

        {% include "_navbar.html.twig" %}

        {% include "_flash.html.twig" %}

    </header>

    <main>
        <div class="container-fluid">
            <div class="row">
                <div class="collapse d-md-block bg-light" id="sidebar-container">
                    <nav  class="fixed-sidebar col-md-3 col-lg-2 " id="fixed-sidebar">
                        {% include "_sidebar.html.twig" %}
                        <noscript><b>{% trans %}vendor.base.javascript_hint{% endtrans %}</b></noscript>
                    </nav>
                </div>

                <div class="col-md-9 col-lg-10 offset-md-3 offset-lg-2 pl-0" id="main">
                    <button class="btn btn-outline-dark btn-sm p-0" type="button" id="sidebar-toggle-button" title="{% trans %}sidebar.big.toggle{% endtrans %}">
                        <i class="fas fa-angle-left"></i>
                    </button>
                    <div class="container-fluid mr-0 pr-0" id="content">
                        <div id="content-data">
                            {# Here will be the real content be injected#}

                            {% block content %}
                            {% endblock %}

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    {# Modal for loading bar #}
    <div class="modal border-primary" id="progressModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content shadow-lg">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{% trans %}loading.caption{% endtrans %}
                        <small class="text-muted">{% trans %}loading.message{% endtrans %}</small></h5>
                </div>
                <div class="modal-body">
                    <div class="progress-bar progress-bar-striped active progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                         aria-valuemax="100" style="width: 100%;">
                        <span>{% trans %}loading.bar{% endtrans %}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Back to top buton #}

    <!-- Back to top button -->
    <a id="back-to-top" href="#" class="btn btn-primary back-to-top" data-no-ajax role="button"
       title="{% trans %}back_to_top{% endtrans %}" data-toggle="tooltip" data-placement="left">
        <i class="fas fa-angle-up fa-fw"></i>
    </a>


{% endblock %}
{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
    {{ encore_entry_script_tags('ru2ftwofactor') }}
{% endblock %}

{% block scripts %}

{% endblock %}
</body>
</html>
