{% extends 'programmer/base.html' %}
{% load django_bootstrap5 %}
{% load static %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Личный кабинет</h1>
    <p class="page-subtitle">{{ user.username }}</p>
</div>

<div class="content-card">
    <div class="row">
        <div class="col-md-4">
            {% if user.profile.avatar %}
                <img src="{{ user.profile.avatar.url }}" class="img-fluid rounded-circle" alt="Аватар">
            {% else %}
                <div class="text-center p-5 bg-light rounded-circle">
                    <span style="font-size: 3rem;">👤</span>
                </div>
            {% endif %}
        </div>
        <div class="col-md-8">
            <h3>Информация</h3>
            <p><strong>Имя:</strong> {{ user.first_name|default:"не указано" }}</p>
            <p><strong>Email:</strong> {{ user.email }}</p>
            <p><strong>Телефон:</strong> {{ user.profile.phone|default:"не указан" }}</p>
            <p><strong>Компания:</strong> {{ user.profile.company|default:"не указана" }}</p>
            <p><strong>Специализация:</strong> {{ user.profile.specialization|default:"не указана" }}</p>
            
            <a href="{% url 'profile_edit' %}" class="btn btn-primary">Редактировать профиль</a>
        </div>
    </div>
</div>

<div class="skills-grid">
    <div class="skill-category" data-url="{% url 'my_callbacks' %}" onclick="openModalContent(this)">
        <h4>📋 Мои заявки</h4>
        <p>Просмотр истории обращений</p>
    </div>
    <div class="skill-category" data-url="{% url 'my_comments' %}" onclick="openModalContent(this)">
        <h4>💬 Мои комментарии</h4>
        <p>Управление комментариями к статьям</p>
    </div>
    <div class="skill-category" data-url="{% url 'notification_settings' %}" onclick="openModalContent(this)">
        <h4>🔔 Настройки уведомлений</h4>
        <p>Email-рассылка и оповещения</p>
    </div>
</div>
{% endblock %}

{% block extra_js %}
    <script src="{% static 'programmer/js/profile.js' %}"></script>
{% endblock %}