{% extends "layout.html" %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ getUrl('static', path='css/user.css') }}">
<link rel="stylesheet" href="{{ getUrl('static', path='css/index.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css">
{% endblock %}

{% block body %}
<!-- Заголовок с современным дизайном -->
<header class="glass-header py-3 mb-4 flex-fill">
    <div class="container-xxl">
        <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between">
            <!-- Заголовок слева -->
            <div class="mb-3 mb-md-0 animate-fade-up">
                <div class="d-flex align-items-center">
                    <img src="{{ getUrl('static', path='images/logo.png') }}" alt="Toolbox" class="me-2 rounded"
                        width="70">
                    <div>
                        <h1 class="h3 fw-bold mb-1">Toolbox</h1>
                        <p class="text-muted mb-0 opacity-85">
                            <i class="bi bi-cloud-check me-1"></i>
                            Онлайн-сервис для управления инструментами и расходниками
                        </p>
                    </div>
                </div>
            </div>

            <!-- Информация о клиенте справа -->
            <div class="animate-fade-up" style="animation-delay: 0.2s">
                <div class="client-card d-inline-block">
                    <div class="d-flex align-items-center gap-3">
                        <!-- Аватар с индикатором активности -->
                        <div class="position-relative clickable">
                            <img src="" alt="Загрузка..." class="client-avatar">
                            <span
                                class="position-absolute bottom-0 end-0 bg-success border border-2 border-white rounded-circle p-1"></span>
                        </div>

                        <!-- Информация -->
                        <div class="me-3">
                            <h6 class="client-name mb-1">Загрузка...</h6>
                            <div class="d-flex align-items-center">
                                <span
                                    class="badge bg-primary bg-opacity-10 text-primary fs-7 px-2 py-1 me-2 client-role">
                                    <i class="bi bi-shield-check me-1"></i>
                                    Загрузка...
                                </span>
                            </div>
                        </div>

                        <!-- Кнопка выхода -->
                        <div class="dropdown">
                            <button class="logout-btn btn d-flex align-items-center" type="button" id="clientLogoutBtn">
                                <i class="bi bi-box-arrow-right me-2"></i>
                                <span class="d-none d-md-inline">Выйти</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Основной контент -->
<main class="container-xxl" id="mainContent">

</main>

{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
<script type="module" src="{{ getUrl('static', path='js/user.js') }}"></script>
<script type="module" src="{{ getUrl('static', path='js/index.js') }}"></script>
{% endblock %}