ACORE/templates/pages/help.html

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

    <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem;">
        <div>
            <h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground);">{% trans "Справка" %}</h1>
            <p style="font-size:0.875rem; color:var(--color-muted-foreground); margin-top:0.25rem;">
                {% trans "База знаний портала: инструкции и ответы на частые вопросы" %}
            </p>
        </div>
        <div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
            <a href="{% url 'help_contribute' %}"
               hx-get="{% url 'help_contribute' %}" hx-target="#main-content" hx-push-url="{% url 'help_contribute' %}" hx-indicator="#loader"
               class="btn btn-primary" style="display:inline-flex; align-items:center; gap:0.375rem;">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" x2="12" y1="5" y2="19"/><line x1="5" x2="19" y1="12" y2="12"/></svg>
                {% trans "Предложить статью" %}
            </a>
            <a href="/it-support/"
               hx-get="/it-support/" hx-target="#main-content" hx-push-url="/it-support/" hx-indicator="#loader"
               class="btn btn-ghost" style="display:inline-flex; align-items:center; gap:0.375rem;">
                {% trans "Поддержка IT" %}
            </a>
        </div>
    </div>

    {% if help_message == 'sent' %}
    <div style="background:rgba(22,163,74,0.08); border:1px solid rgba(22,163,74,0.3); border-radius:0.75rem; padding:0.875rem 1.125rem; margin-bottom:1.25rem; font-size:0.875rem; color:#16a34a;">
        {% trans "Предложение отправлено на проверку. После одобрения администратором статья появится в справке." %}
    </div>
    {% endif %}

    <form method="get" action="{% url 'help' %}"
          hx-get="{% url 'help' %}" hx-target="#main-content" hx-push-url="true" hx-indicator="#loader"
          style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; padding:1.25rem; margin-bottom:1.5rem;">
        <label style="display:block; font-size:0.8125rem; font-weight:500; color:var(--color-foreground); margin-bottom:0.5rem;">
            {% trans "Поиск по справке" %}
        </label>
        <div style="display:flex; gap:0.5rem; max-width:36rem;">
            <input type="search" name="q" value="{{ help_query }}" placeholder="{% trans 'Например: отпуск, пароль, подмена…' %}"
                   class="input" style="flex:1;">
            <button type="submit" class="btn btn-primary">{% trans "Найти" %}</button>
        </div>
    </form>

    {% if help_query %}
    <div style="margin-bottom:1.5rem;">
        <h2 style="font-size:0.9375rem; font-weight:600; color:var(--color-foreground); margin-bottom:0.75rem;">
            {% blocktrans count counter=help_search_results|length %}Найдена {{ counter }} статья{% plural %}Найдено статей: {{ counter }}{% endblocktrans %}
            <span style="font-weight:400; color:var(--color-muted-foreground);">«{{ help_query }}»</span>
        </h2>
        {% if help_search_results %}
        <div style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; overflow:hidden;">
            {% for article in help_search_results %}
            <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:block; padding:0.875rem 1.125rem; text-decoration:none; border-bottom:1px solid var(--color-border); color:var(--color-foreground);">
                <div style="font-size:0.875rem; font-weight:500;">{{ article.title }}</div>
                <div style="font-size:0.75rem; color:var(--color-muted-foreground); margin-top:0.2rem;">{{ article.category.title }}</div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <p style="font-size:0.875rem; color:var(--color-muted-foreground);">{% trans "Ничего не найдено. Попробуйте другие слова или предложите новую статью." %}</p>
        {% endif %}
    </div>
    {% endif %}

    <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(16rem, 1fr)); gap:1rem; margin-bottom:1.5rem;">
        {% for cat in help_categories %}
        <a href="{% url 'help_category' cat.slug %}"
           hx-get="{% url 'help_category' cat.slug %}" hx-target="#main-content" hx-push-url="{% url 'help_category' cat.slug %}" hx-indicator="#loader"
           style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); padding:1.25rem; text-decoration:none; color:inherit; transition:border-color 150ms;">
            <div style="width:2.5rem; height:2.5rem; border-radius:0.625rem; background:hsl(205 80% 55% / 0.12); color:hsl(205 80% 45%); display:flex; align-items:center; justify-content:center; margin-bottom:0.75rem;">
                {% include "partials/help-icon.html" with icon=cat.icon %}
            </div>
            <div style="font-size:0.875rem; font-weight:600; color:var(--color-foreground); margin-bottom:0.25rem;">{{ cat.title }}</div>
            <div style="font-size:0.8125rem; color:var(--color-muted-foreground);">{{ cat.description }}</div>
            <div style="font-size:0.75rem; color:var(--color-primary); margin-top:0.625rem; font-weight:500;">
                {% blocktrans count counter=cat.article_count %}{{ counter }} статья →{% plural %}{{ counter }} статей →{% endblocktrans %}
            </div>
        </a>
        {% empty %}
        <p style="font-size:0.875rem; color:var(--color-muted-foreground);">{% trans "Категории пока не добавлены." %}</p>
        {% endfor %}
    </div>

    {% if help_featured %}
    <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); overflow:hidden; margin-bottom:1.5rem;">
        <div style="padding:0.875rem 1.25rem; border-bottom:1px solid var(--color-border);">
            <span style="font-size:0.8125rem; font-weight:500; color:var(--color-foreground);">{% trans "Частые вопросы" %}</span>
        </div>
        {% for article in help_featured %}
        <details style="border-bottom:1px solid var(--color-border);">
            <summary style="padding:1rem 1.25rem; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:0.75rem;">
                <span style="display:flex; align-items:center; gap:0.625rem; font-size:0.875rem; font-weight:500; color:var(--color-foreground);">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--color-primary)" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
                    {{ article.title }}
                </span>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
            </summary>
            <div style="padding:0 1.25rem 1rem 2.75rem; font-size:0.875rem; color:var(--color-muted-foreground); line-height:1.55;">
                {{ article.body|safe }}
                <div style="margin-top:0.75rem;">
                    <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="font-size:0.8125rem; color:var(--color-primary); text-decoration:none; font-weight:500;">
                        {% trans "Открыть полностью" %} →
                    </a>
                </div>
            </div>
        </details>
        {% endfor %}
    </div>
    {% endif %}

    {% if help_my_contributions %}
    <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); overflow:hidden;">
        <div style="padding:0.875rem 1.25rem; border-bottom:1px solid var(--color-border);">
            <span style="font-size:0.8125rem; font-weight:500; color:var(--color-foreground);">{% trans "Мои предложения" %}</span>
        </div>
        <div style="overflow-x:auto;">
            <table style="width:100%; border-collapse:collapse; font-size:0.8125rem;">
                <thead>
                    <tr style="text-align:left; color:var(--color-muted-foreground); border-bottom:1px solid var(--color-border);">
                        <th style="padding:0.625rem 1.25rem; font-weight:500;">{% trans "Заголовок" %}</th>
                        <th style="padding:0.625rem 1rem; font-weight:500;">{% trans "Тип" %}</th>
                        <th style="padding:0.625rem 1rem; font-weight:500;">{% trans "Статус" %}</th>
                        <th style="padding:0.625rem 1.25rem; font-weight:500;">{% trans "Дата" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for c in help_my_contributions %}
                    <tr style="border-bottom:1px solid var(--color-border);">
                        <td style="padding:0.75rem 1.25rem; color:var(--color-foreground);">{{ c.title }}</td>
                        <td style="padding:0.75rem 1rem; color:var(--color-muted-foreground);">{{ c.get_kind_display }}</td>
                        <td style="padding:0.75rem 1rem;">
                            {% if c.status == 'pending' %}
                            <span class="badge badge-warning">{{ c.get_status_display }}</span>
                            {% elif c.status == 'approved' %}
                            <span class="badge badge-success">{{ c.get_status_display }}</span>
                            {% else %}
                            <span class="badge badge-danger">{{ c.get_status_display }}</span>
                            {% endif %}
                            {% if c.status == 'rejected' and c.review_note %}
                            <div style="font-size:0.75rem; color:var(--color-muted-foreground); margin-top:0.25rem;">{{ c.review_note }}</div>
                            {% endif %}
                        </td>
                        <td style="padding:0.75rem 1.25rem; color:var(--color-muted-foreground);">{{ c.created_at|date:"d.m.Y H:i" }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
</div>