{% extends "base.html" %} {% block title %}LiB - Профиль{% endblock %} {% block
content %}

<div class="flex flex-1 mt-4 p-4">
    <main class="flex-1 max-w-2xl mx-auto">
        <div id="profile-card" class="bg-white p-6 rounded-lg shadow-md mb-6">
        </div>
        <div id="account-section" class="bg-white p-6 rounded-lg shadow-md mb-6">
            <h2 class="text-xl font-semibold mb-4">Информация об аккаунте</h2>
            <div id="account-container">
            </div>
        </div>
        <div id="roles-section" class="bg-white p-6 rounded-lg shadow-md mb-6">
            <h2 class="text-xl font-semibold mb-4">Роли и права</h2>
            <div id="roles-container">
            </div>
        </div>
        <div id="actions-section" class="bg-white p-6 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold mb-4">Действия</h2>
            <div id="actions-container">
            </div>
        </div>
    </main>
</div>
<div id="password-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md mx-4">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-semibold">Смена пароля</h3>
            <button id="close-password-modal" class="text-gray-400 hover:text-gray-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <form id="password-form">
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-medium mb-2">Текущий пароль</label>
                <input type="password" id="current-password" 
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
                    required minlength="6">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 text-sm font-medium mb-2">Новый пароль</label>
                <input type="password" id="new-password" 
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
                    required minlength="6">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 text-sm font-medium mb-2">Подтвердите новый пароль</label>
                <input type="password" id="confirm-password" 
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
                    required minlength="6">
            </div>
            <div id="password-error" class="mb-4 text-red-600 text-sm hidden"></div>
            <div class="flex gap-3">
                <button type="submit" class="flex-1 bg-gray-500 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition-colors">
                    Сменить пароль
                </button>
                <button type="button" id="cancel-password" class="flex-1 bg-white text-gray-700 py-2 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors">
                    Отмена
                </button>
            </div>
        </form>
    </div>
</div>

{% endblock %} {% block scripts %}
<script type="text/javascript" src="/static/profile.js"></script>
{% endblock %}