{% load i18n %}
<div class="page-content" id="help-category-page">

    <div style="margin-bottom:1.25rem;">
        <a href="{% url 'help' %}"
           hx-get="{% url 'help' %}" hx-target="#main-content" hx-push-url="{% url 'help' %}" hx-indicator="#loader"
           style="font-size:0.8125rem; color:var(--color-muted-foreground); text-decoration:none;">← {% trans "К справке" %}</a>
        <h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground); margin-top:0.5rem;">{{ help_category.title }}</h1>
        {% if help_category.description %}
        <p style="font-size:0.875rem; color:var(--color-muted-foreground); margin-top:0.25rem;">{{ help_category.description }}</p>
        {% endif %}
    </div>

    <div style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; overflow:hidden;">
        {% for article in help_articles %}
        <a href="{% url 'help_article' article.slug %}"
           hx-get="{% url 'help_article' article.slug %}" hx-target="#main-content" hx-push-url="{% url 'help_article' article.slug %}" hx-indicator="#loader"
           style="display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.875rem 1.25rem; text-decoration:none; border-bottom:1px solid var(--color-border); color:var(--color-foreground);">
            <span style="font-size:0.875rem; font-weight:500;">{{ article.title }}</span>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--color-muted-foreground)" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
        </a>
        {% empty %}
        <div style="padding:1.25rem; font-size:0.875rem; color:var(--color-muted-foreground);">
            {% trans "В этой категории пока нет опубликованных статей." %}
        </div>
        {% endfor %}
    </div>

    <div style="margin-top:1rem;">
        <a href="{% url 'help_contribute' %}?category={{ help_category.pk }}"
           hx-get="{% url 'help_contribute' %}?category={{ help_category.pk }}" hx-target="#main-content" hx-push-url="true" hx-indicator="#loader"
           class="btn btn-ghost" style="font-size:0.8125rem;">
            {% trans "Предложить статью в эту категорию" %}
        </a>
    </div>
</div>