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

{% block extra_css %}
<link rel="stylesheet" href="{% static 'programmer/css/competence.css' %}">
{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Компетенции</h1>
    <p class="page-subtitle">Профессиональные навыки и опыт</p>
</div>

<div class="competence-grid">
    {% for p in posts %}
    <div class="modern-card fade-in">
        <div class="competence-item">
            {% if p.photo %}
            <div class="competence-scan-wrapper">
                <div class="competence-scan-container">
                    <img src="{{ p.photo.url }}"
                         alt="Сертификат 1С: {{ p.title }} - {{ p.content|striptags }}"
                         class="competence-scan"
                         onclick="openCompetenceModal('{{ p.photo.url }}', '{{ p.title }}')">
                    <div class="scan-hint">
                        <span class="scan-zoom-icon">🔍</span>
                        <span class="scan-text">Нажмите для увеличения</span>
                    </div>
                </div>
            </div>
            {% endif %}

            <div class="competence-content">
                <h2 class="competence-title">{{ p.title }}</h2>
                <div class="competence-description">
                    {{ p.content|linebreaks }}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% if not posts %}
<div class="modern-card text-center fade-in">
    <h3>📚 Информация о компетенциях</h3>
    <p class="card-subtitle">Раздел находится в разработке</p>
    <div class="card-actions justify-center">
        <a href="{% url 'solution' %}" class="btn btn-primary">Посмотреть проекты</a>
        <a href="{% url 'about' %}" class="btn btn-secondary">Обо мне</a>
    </div>
</div>
{% endif %}

<!-- Модальное окно для увеличенного просмотра -->
<div id="competenceModal" class="modal competence-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="competenceModalTitle">Компетенция</h3>
            <button class="modal-close" onclick="closeCompetenceModal()">&times;</button>
        </div>
        <div class="modal-body">
            <img class="modal-image" id="competenceModalImage" alt="Увеличенное изображение компетенции">
        </div>
    </div>
</div>
{% endblock %}

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