{% extends 'layouts/base.twig' %}

{% block title %}{{ title }}{% endblock %}

{% block styles %}
<style>
.profile-header {
    text-align: center;
    padding: 2rem 0;
}

.avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 1rem;
}

.avatar-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.avatar-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: white;
    border: 4px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-pills .nav-link {
    color: #495057;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    margin-bottom: 0.5rem;
}

.nav-pills .nav-link.active {
    background-color: #0d6efd;
    color: white;
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: #e9ecef;
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-3">
        <!-- Боковая панель навигации -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="profile-header">
                    <div class="avatar-container">
                        {% if user.avatar %}
                            <img src="{{ base_url('/uploads/avatars/' ~ user.avatar) }}" alt="Аватар" class="avatar-img">
                        {% else %}
                            <div class="avatar-placeholder">
                                {{ user.name|first|upper }}
                            </div>
                        {% endif %}
                    </div>
                    <h5 class="mb-1">{{ user.name }}</h5>
                    <p class="text-muted mb-0">{{ user.email }}</p>
                </div>

                <hr>

                <nav class="nav-pills flex-column">
                    <a href="{{ base_url('/profile') }}" class="nav-link {{ active_tab == 'general' ? 'active' : '' }}">
                        <i class="fa-solid fa-user me-2"></i> Основное
                    </a>
                    <a href="{{ base_url('/profile/organizations') }}" class="nav-link {{ active_tab == 'organizations' ? 'active' : '' }}">
                        <i class="fa-solid fa-building me-2"></i> Мои организации
                    </a>
                    <a href="{{ base_url('/profile/security') }}" class="nav-link {{ active_tab == 'security' ? 'active' : '' }}">
                        <i class="fa-solid fa-shield-halved me-2"></i> Безопасность
                    </a>
                </nav>
            </div>
        </div>
    </div>

    <div class="col-md-9">
        <!-- Смена пароля -->
        <div class="card mb-4">
            <div class="card-header bg-white">
                <h4 class="mb-0"><i class="fa-solid fa-key me-2"></i>Смена пароля</h4>
            </div>
            <div class="card-body">
                <form action="{{ base_url('/profile/change-password') }}" method="post">
                    {{ csrf_field()|raw }}

                    <div class="mb-3">
                        <label for="current_password" class="form-label">Текущий пароль</label>
                        <input type="password" class="form-control" id="current_password" name="current_password" required>
                    </div>

                    <div class="mb-3">
                        <label for="new_password" class="form-label">Новый пароль</label>
                        <input type="password" class="form-control" id="new_password" name="new_password" required minlength="6">
                        <div class="form-text">Минимум 6 символов</div>
                    </div>

                    <div class="mb-3">
                        <label for="confirm_password" class="form-label">Подтвердите новый пароль</label>
                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                    </div>

                    <div class="alert alert-info">
                        <i class="fa-solid fa-info-circle me-2"></i>
                        После смены пароля вы будете автоматически разлогинены на всех устройствах для безопасности.
                    </div>

                    <button type="submit" class="btn btn-primary">
                        <i class="fa-solid fa-check me-1"></i> Изменить пароль
                    </button>
                </form>
            </div>
        </div>

        <!-- Информация о безопасности -->
        <div class="card">
            <div class="card-header bg-white">
                <h4 class="mb-0"><i class="fa-solid fa-shield-halved me-2"></i>Рекомендации по безопасности</h4>
            </div>
            <div class="card-body">
                <ul class="mb-0">
                    <li class="mb-2">Используйте пароль длиной не менее 8 символов</li>
                    <li class="mb-2">Комбинируйте буквы, цифры и специальные символы</li>
                    <li class="mb-2">Не используйте один и тот же пароль для разных сервисов</li>
                    <li class="mb-2">Регулярно меняйте пароль</li>
                    <li>Не сообщайте пароль третьим лицам</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}