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

{% 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">
                        <strong>Описание задачи</strong>
                    </div>
                    <div class="accordion-content">
                        {{p.description}}
                    </div>
                </div>

                <div class="accordion-item">
                    <div class="accordion-header">
                        <strong>Описание решения</strong>
                    </div>
                    <div class="accordion-content">
                        {{p.implementation}}
                    </div>
                </div>

                <div class="accordion-item">
                    <div class="accordion-header">
                        <strong>Результат</strong>
                    </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 %}

{% endblock %}