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

{% 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="{{ p.title }}"
                         class="competence-scan"
                         onclick="openModal('{{ p.photo.url }}')">
                    <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="imageModal" class="modal">
    <span class="modal-close" onclick="closeModal()">&times;</span>
    <img class="modal-content" id="modalImage">
    <div id="modalCaption"></div>
</div>

<script>
function openModal(imageUrl) {
    console.log('Opening modal with:', imageUrl);
    const modal = document.getElementById('imageModal');
    const modalImg = document.getElementById('modalImage');

    if (modal && modalImg) {
        modal.style.display = "block";
        modalImg.src = imageUrl;
    }
}

function closeModal() {
    const modal = document.getElementById('imageModal');
    if (modal) {
        modal.style.display = "none";
    }
}

// Закрытие модального окна при клике вне изображения
document.addEventListener('click', function(event) {
    const modal = document.getElementById('imageModal');
    if (event.target === modal) {
        closeModal();
    }
});

// Закрытие по ESC
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeModal();
    }
});
</script>
{% endblock %}