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

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

{% block content %}
<div class="container">
    {# Хлебные крошки #}
    {% if breadcrumbs %}
    <nav class="breadcrumbs" aria-label="Навигация">
        {% for crumb in breadcrumbs %}
            {% if crumb.url_name %}
                <a href="{% url crumb.url_name %}" class="breadcrumb-link">{{ crumb.title }}</a>
                <span class="breadcrumb-separator">/</span>
            {% else %}
                <span class="breadcrumb-current">{{ crumb.title }}</span>
            {% endif %}
        {% endfor %}
    </nav>
    {% endif %}

    {# Заголовок страницы #}
    <div class="page-header">
        <h1 class="page-title">{{ solution.title }}</h1>
        <p class="page-subtitle">
            Опубликовано: {{ solution.time_create|date:"d.m.Y" }}
        </p>
    </div>

    {# Основное содержимое #}
    <article class="content-card">
        {# Секция: Описание задачи #}
        <section class="solution-section">
            <h2 class="section-title">📋 Описание задачи</h2>
            <div class="section-content">
                {{ solution.description|safe }}
            </div>
        </section>

        {# Секция: Описание решения #}
        <section class="solution-section">
            <h2 class="section-title">🔧 Описание решения</h2>
            <div class="section-content">
                {{ solution.implementation|safe }}
            </div>
        </section>

        {# Секция: Результат #}
        <section class="solution-section">
            <h2 class="section-title">✅ Результат</h2>
            <div class="section-content">
                {{ solution.closing|safe }}
            </div>
        </section>

        {# Кнопка возврата #}
        <div style="margin-top: 2rem; text-align: center;">
            <a href="{% url 'solution' %}" class="btn btn-outline">
                ← Вернуться к списку проектов
            </a>
        </div>
    </article>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function toggleAccordion(header) {
        const content = header.nextElementSibling;
        const icon = header.querySelector('.accordion-icon');
        
        // Закрываем все другие открытые элементы в этом аккордеоне (опционально)
        const accordion = header.closest('.solution-accordion');
        if (accordion) {
            accordion.querySelectorAll('.accordion-header').forEach(otherHeader => {
                if (otherHeader !== header) {
                    const otherContent = otherHeader.nextElementSibling;
                    const otherIcon = otherHeader.querySelector('.accordion-icon');
                    otherContent.classList.remove('active');
                    otherHeader.classList.remove('active');
                    if (otherIcon) otherIcon.style.transform = 'rotate(0deg)';
                }
            });
        }
        
        // Переключаем текущий элемент
        content.classList.toggle('active');
        header.classList.toggle('active');
        
        if (content.classList.contains('active')) {
            icon.style.transform = 'rotate(180deg)';
        } else {
            icon.style.transform = 'rotate(0deg)';
        }
    }

    // Инициализация: первый элемент открыт по умолчанию
    document.addEventListener('DOMContentLoaded', function() {
        const firstHeader = document.querySelector('.accordion-header');
        if (firstHeader) {
            toggleAccordion(firstHeader);
        }
    });
</script>
<script src="{% static 'programmer/js/floating-button.js' %}"></script>
{% endblock %}