{% extends "layout.html.twig" %}

{% block title %}
    Dev Project
{% endblock %}

{% block favicons %}
    <link href="assets/img/favicon.png" rel="icon">
    <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
{% endblock %}

{% block fonts %}
    <link href="https://fonts.gstatic.com" rel="preconnect">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
          rel="stylesheet">
{% endblock %}

{% block flash %}
    <div class="position-absolute" style="z-index: 999999">
{#        <div {{ react_component("Alert", {flashes: app.flashes}) }}></div>#}
    </div>
{% endblock %}

{% block header_javascripts %}
{% endblock %}

 {% block stylesheets %}
     {{ encore_entry_link_tags("app") }}
 {% endblock %}

{% block header %}
    <header id="header" class="header fixed-top d-flex align-items-center">
        <div class="d-flex align-items-center justify-content-between">
            <a href="{{ path("home_index") }}" class="logo d-flex flex-row align-items-center">
                <span class="d-none d-lg-block">&nbsp;DEV</span>
            </a>
            <i class="bi bi-list toggle-sidebar-btn"></i>
        </div>
        {% block search_bar %}
{#            {% include 'widgets/search_bar.html.twig' %}#}
        {% endblock %}

        <nav class="header-nav ms-auto">
            <ul class="d-flex align-items-center">
                <li class="nav-item d-block d-lg-none">
                    <a class="nav-link nav-icon search-bar-toggle " href="#">
                        <i class="bi bi-search"></i>
                    </a>
                </li>

                {% block notifications %}
{#                    {% include 'widgets/notifications_widget.html.twig' %}#}
                {% endblock %}

                {% block messages %}
{#                    {% include 'widgets/messages_widget.html.twig' %}#}
                {% endblock %}

                {% block profile %}
{#                    {% include 'widgets/profile.html.twig' %}#}
                {% endblock %}
            </ul>
        </nav>
    </header>
{% endblock %}

 {% block sidebar %}
     {% include 'menu/sidebar.html.twig' %}
 {% endblock %}

{% block main %}
    <main id="main" class="main">
        <div class="pagetitle">
            <div class="row">
                <div class="col">
                    <h1>{% block page_title %}{% endblock %}</h1>
                    <h6>{% block page_sub_title %}{% endblock %}</h6>
                </div>
                <div class="col-auto">
                    {% block extra_header_options %}{% endblock %}
                </div>
                <div class="col-auto text-end">
                    {% block buttons %}{% endblock %}
                </div>
            </div>
            <nav class="d-flex flex-row justify-content-between">
                <ol class="breadcrumb">
                    {% block breadcrumbs %}{% endblock %}
                </ol>
            </nav>
        </div>

        <section class="section dashboard">
            {% block content %}{% endblock %}
        </section>
    </main>
{% endblock %}

{% block footer %}
{% endblock %}

{% block back_to_top %}
    <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
                class="bi bi-arrow-up-short"></i></a>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags("app") }}
{% endblock %}