{% extends "base.html" %}

{% block title %}Профиль{% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/inputmask.min.js"></script>
{% endblock %}

{% block content %}
<div class="row g-4">
    <!-- Левая колонка: аватар -->
    <div class="col-md-4">
        <div class="card border-0 shadow-sm text-center">
            <div class="card-body py-4">
                <div class="avatar-wrapper mx-auto mb-3">
                    {% if user.avatar %}
                        <img src="{{ url_for('static', filename='uploads/avatars/' ~ user.avatar) }}"
                             alt="Аватар" class="rounded-circle"
                             style="width:100px;height:100px;object-fit:cover;border:3px solid #dee2e6;">
                    {% else %}
                        <div class="avatar-placeholder rounded-circle mx-auto"
                             style="width:100px;height:100px;background:#0d6efd;color:#fff;font-size:40px;display:flex;align-items:center;justify-content:center;">
                            {{ user.login[0]|upper }}
                        </div>
                    {% endif %}
                </div>
                <h5 class="mb-1">{{ user.login }}</h5>
                <span class="badge {% if user.role == 'admin' %}bg-danger{% else %}bg-secondary{% endif %}">
                    {{ 'Администратор' if user.role == 'admin' else 'Пользователь' }}
                </span>
                <p class="text-muted small mt-2 mb-0">
                    Зарегистрирован: {{ user.created_at.strftime('%d.%m.%Y') }}
                </p>

                <!-- Форма загрузки аватара -->
                <form method="POST" enctype="multipart/form-data" class="mt-3">
                    <input type="hidden" name="action" value="update">
                    <label class="btn btn-outline-primary btn-sm w-100" for="avatarInput">
                        📷 Изменить фото
                    </label>
                    <input type="file" id="avatarInput" name="avatar" accept="image/jpeg,image/png"
                           class="d-none" onchange="this.form.submit()">
                    <small class="text-muted d-block mt-1">JPG, PNG до 2MB</small>
                </form>
            </div>
        </div>
    </div>

    <!-- Правая колонка: данные -->
    <div class="col-md-8">
        <!-- Редактирование данных -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">✏️ Личные данные</h5>
            </div>
            <div class="card-body p-4">
                <form method="POST" enctype="multipart/form-data">
                    <input type="hidden" name="action" value="update">
                    {{PROFILE_EXTRA_FIELDS}}
                    {{CUSTOM_USER_PROFILE_FIELDS}}
                    <button type="submit" class="btn btn-primary">💾 Сохранить</button>
                </form>
            </div>
        </div>

        <!-- Смена пароля -->
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">🔑 Смена пароля</h5>
            </div>
            <div class="card-body p-4">
                <form method="POST">
                    <input type="hidden" name="action" value="change_password">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Текущий пароль</label>
                        <input type="password" class="form-control" name="old_password"
                               placeholder="Введите текущий пароль" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Новый пароль</label>
                        <input type="password" class="form-control" name="new_password"
                               placeholder="Минимум 8 символов" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Подтверждение нового пароля</label>
                        <input type="password" class="form-control" name="confirm_new_password"
                               placeholder="Повторите новый пароль" required>
                    </div>
                    <button type="submit" class="btn btn-warning">🔒 Изменить пароль</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
const profilePhone = document.getElementById('profilePhone');
if (profilePhone) {
    Inputmask('+7 (999) 999-99-99').mask(profilePhone);
}
</script>
{% endblock %}