{% extends "base.html" %}

{% block title %}Личный кабинет{% endblock %}

{% block extra_head %}
<style>
/* ═══ ПОЛНЫЙ ФИКС дёрганья модального окна ═══ */
html {
    overflow-y: scroll !important;
    scrollbar-gutter: stable;
}
body.modal-open {
    padding-right: 0 !important;
    overflow: hidden !important;
}
body.modal-open .navbar,
body.modal-open .fixed-top {
    padding-right: 0 !important;
}
.modal {
    padding-right: 0 !important;
}
.modal-backdrop {
    width: 100vw !important;
}
/* Убираем ВСЕ анимации/переходы внутри модального окна */
.modal,
.modal * {
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
}
.modal *:hover,
.modal *:focus,
.modal *:active {
    transform: none !important;
    box-shadow: inherit !important;
    transition: none !important;
}
.modal.fade,
.modal.fade .modal-dialog {
    transform: none !important;
    transition: none !important;
}
.modal-dialog {
    margin: 80px auto !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
}
.modal-content {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
}
/* Отключаем hover-эффекты на элементах ПОД модальным окном */
body.modal-open .card,
body.modal-open .card:hover,
body.modal-open .btn:hover,
body.modal-open .product-card:hover,
body.modal-open .table-hover tbody tr:hover {
    transform: none !important;
    box-shadow: inherit !important;
    transition: none !important;
}
</style>

{% endblock %}

{% block content %}
<div class="row g-4">
    <!-- Приветствие -->
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-body d-flex align-items-center gap-3 py-3">
                {% if user.avatar %}
                    <img src="{{ url_for('static', filename='uploads/avatars/' ~ user.avatar) }}"
                         class="rounded-circle" width="56" height="56" style="object-fit:cover;" alt="Аватар">
                {% else %}
                    <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center"
                         style="width:56px;height:56px;font-size:24px;">
                        {{ (user.email or user.login or 'U')[0]|upper }}
                    </div>
                {% endif %}
                <div>
                    <h5 class="mb-0">Добро пожаловать, <strong>{{ user.email or user.login or 'Пользователь' }}</strong>!</h5>
                    {% if user.full_name is defined and user.full_name %}
                        <small class="text-muted">{{ user.full_name }}</small>
                    {% endif %}
                </div>
                <div class="ms-auto d-flex gap-2 flex-wrap">
                    {{DASHBOARD_ACTION_BUTTONS}}
                    <a href="{{ url_for('profile') }}" class="btn btn-outline-secondary btn-sm">
                        ⚙️ Профиль
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{DASHBOARD_MAIN_CONTENT}}
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// Анимация удаления строки
document.querySelectorAll('.delete-btn').forEach(function(btn) {
    btn.closest('form').addEventListener('submit', function(e) {
        const rowId = btn.getAttribute('data-row');
        const row = document.getElementById(rowId);
        if (row) {
            row.style.transition = 'opacity 0.4s, transform 0.4s';
            row.style.opacity = '0';
            row.style.transform = 'translateX(30px)';
        }
    });
});
</script>
{% endblock %}