<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
        {% block stylesheets %}
            <!-- Font Awesome -->
            <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
            <!-- Google Fonts -->
            <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet"/>
            <!-- MDB -->
            <!--link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.1.0/mdb.min.css" rel="stylesheet"/-->
            <!-- Datatables.net -->
            <link href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css" rel="stylesheet"/>
            {{ encore_entry_link_tags('app') }}
        {% endblock %}

        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
            <!-- MDB -->
            <!--script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/7.1.0/mdb.umd.min.js"></script-->
            <!-- Includes all JS & CSS for AG Grid -->
            <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
            <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/ag-grid-enterprise@29.0.0/dist/ag-grid-enterprise.min.js"></script>
            <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
            <!-- Includes Datatables.net -->
            <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
        
        {% endblock %}
    </head>
    
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary" style="background-color: #EBF2FA; color: #06668C;">
    <!-- Container wrapper -->
    <div class="container-fluid">
        <!-- Toggle button -->
        <button data-mdb-collapse-init class="navbar-toggler" type="button" data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars"></i></button>

        <!-- Collapsible wrapper -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <!-- Navbar brand -->
        <a class="navbar-brand mt-2 mt-lg-0" href="/">
            <img src="https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/projectile_logo.png" height="35" alt="Projectiles Logo" loading="lazy"/>
        </a>
        <!-- Left links -->
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
                <a class="nav-link" href="/users">Mes utilisateurs</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/company/list">Mes clients</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/projects">Mes projets</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/tickets">Mes tickets</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Mes temps</a>
            </li>
        </ul>
        <!-- Left links -->
        </div>
        <!-- Collapsible wrapper -->

        <!-- Right elements -->
        <div class="d-flex align-items-center">

        <!-- Avatar -->
        <div class="dropdown">
            <a data-mdb-dropdown-init class="dropdown-toggle d-flex align-items-center hidden-arrow" href="#" id="navbarDropdownMenuAvatar" role="button" aria-expanded="false">
                {% if user_image is empty %}
                    <img src="/assets/icons/icon_user.png" class="rounded-circle" height="48" alt="Black and White Portrait of a Man" loading="lazy"/>
                {% else %}
                    <img src="/uploads/users/{{ user_image }}" class="rounded-circle" height="48" alt="Black and White Portrait of a Man" loading="lazy"/>
                {% endif %}
            </a>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuAvatar">
            <li>
                <a class="dropdown-item" href="#">My profile</a>
            </li>
            <li>
                <a class="dropdown-item" href="#">Settings</a>
            </li>
            <li>
                <a class="dropdown-item" href="#">Logout</a>
            </li>
            </ul>
        </div>
        </div>
        <!-- Right elements -->
    </div>
    <!-- Container wrapper -->
    </nav>
    <!-- Navbar -->

    <body style="background-color: #D5E2F1;">
    
    <div class="page-title">
        <div class="bandeau-img">
            <img src="https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/logo_projectiles_round.png">
        </div>
        <div class="bandeau-title">
            <h1>Page title</h1>
        </div>
    </div>
        {% block body %}
        {% include "_toasts.html.twig" %}
        {% endblock %}
    </body>
</html>
