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

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

{% block content %}
<h1>{{title}}</h1>

<div class="improved-list">
    {% autoescape off %}
    {% for p in posts %}
    <li class="fade-in">
        <div class="content-card">
            <h2>{{p.title}}</h2>

            <div class="solution-accordion">
                <div class="accordion-item">
                    <div class="accordion-header" onclick="toggleAccordion(this)">
                        <strong>📋 Описание задачи</strong>
                        <span class="accordion-icon">▼</span>
                    </div>
                    <div class="accordion-content">
                        {{p.description}}
                    </div>
                </div>

                <div class="accordion-item">
                    <div class="accordion-header" onclick="toggleAccordion(this)">
                        <strong>🔧 Описание решения</strong>
                        <span class="accordion-icon">▼</span>
                    </div>
                    <div class="accordion-content">
                        {{p.implementation}}
                    </div>
                </div>

                <div class="accordion-item">
                    <div class="accordion-header" onclick="toggleAccordion(this)">
                        <strong>✅ Результат</strong>
                        <span class="accordion-icon">▼</span>
                    </div>
                    <div class="accordion-content">
                        {{p.closing}}
                    </div>
                </div>
            </div>

            <div class="article-panel">
                <p class="first">Опубликовано: {{p.time_create|date:"d.m.Y"}}</p>
            </div>
        </div>
    </li>
    {% endfor %}
    {% endautoescape %}
</div>

{% if not posts %}
<div class="content-card text-center">
    <h3>Примеры решений скоро появятся</h3>
    <p>Мы готовим для вас интересные кейсы и решения</p>
</div>
{% endif %}

<!-- Подключаем внешний скрипт -->
<script src="{% static 'programmer/js/solution-accordion.js' %}"></script>

{% endblock %}