ACORE/templates/pages/help-contribute.html

{% load i18n %}
<div class="page-content" id="help-contribute-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;">
            {% if help_article %}{% trans "Предложить правку" %}{% else %}{% trans "Предложить статью" %}{% endif %}
        </h1>
        <p style="font-size:0.875rem; color:var(--color-muted-foreground); margin-top:0.25rem;">
            {% trans "Текст отправится на проверку администратору. После одобрения статья появится в справке." %}
        </p>
    </div>

    <form method="post" action="{% url 'help_contribute' %}"
          hx-post="{% url 'help_contribute' %}" hx-target="#main-content" hx-push-url="{% url 'help' %}" hx-indicator="#loader"
          style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; padding:1.25rem 1.5rem; max-width:40rem; display:flex; flex-direction:column; gap:1rem;">
        {% csrf_token %}
        {% if help_article %}
        <input type="hidden" name="kind" value="update">
        <input type="hidden" name="article_id" value="{{ help_article.pk }}">
        <div style="font-size:0.8125rem; color:var(--color-muted-foreground);">
            {% trans "Правка к статье" %}: <strong style="color:var(--color-foreground);">{{ help_article.title }}</strong>
        </div>
        {% else %}
        <input type="hidden" name="kind" value="create">
        {% endif %}

        <div>
            <label style="display:block; font-size:0.8125rem; font-weight:500; margin-bottom:0.375rem;">{% trans "Категория" %} *</label>
            <select name="category_id" class="input" style="width:100%;" required>
                <option value="">{% trans "Выберите…" %}</option>
                {% for cat in help_categories %}
                <option value="{{ cat.pk }}" {% if help_form.category_id == cat.pk|stringformat:"s" %}selected{% endif %}>{{ cat.title }}</option>
                {% endfor %}
            </select>
            {% if help_errors.category_id %}<div style="font-size:0.75rem; color:var(--color-destructive); margin-top:0.25rem;">{{ help_errors.category_id }}</div>{% endif %}
        </div>

        <div>
            <label style="display:block; font-size:0.8125rem; font-weight:500; margin-bottom:0.375rem;">{% trans "Заголовок" %} *</label>
            <input type="text" name="title" value="{{ help_form.title }}" class="input" style="width:100%;" maxlength="250" required>
            {% if help_errors.title %}<div style="font-size:0.75rem; color:var(--color-destructive); margin-top:0.25rem;">{{ help_errors.title }}</div>{% endif %}
        </div>

        <div>
            <label style="display:block; font-size:0.8125rem; font-weight:500; margin-bottom:0.375rem;">{% trans "Текст" %} *</label>
            <textarea name="body" required rows="10" class="input" style="width:100%; min-height:12rem; resize:vertical;"
                      placeholder="{% trans 'Опишите инструкцию по шагам. Абзацы разделяйте пустой строкой.' %}">{{ help_form.body }}</textarea>
            {% if help_errors.body %}<div style="font-size:0.75rem; color:var(--color-destructive); margin-top:0.25rem;">{{ help_errors.body }}</div>{% endif %}
            {% if help_article %}
            <div style="margin-top:0.75rem; padding:0.75rem; background:var(--color-muted); border-radius:var(--radius); font-size:0.75rem; color:var(--color-muted-foreground);">
                <div style="font-weight:500; margin-bottom:0.35rem; color:var(--color-foreground);">{% trans "Текущий текст (для справки)" %}</div>
                <div style="max-height:10rem; overflow:auto;">{{ help_article.body|safe }}</div>
            </div>
            {% endif %}
        </div>

        <div style="display:flex; gap:0.5rem; justify-content:flex-end;">
            <a href="{% url 'help' %}"
               hx-get="{% url 'help' %}" hx-target="#main-content" hx-push-url="{% url 'help' %}" hx-indicator="#loader"
               class="btn btn-ghost">{% trans "Отмена" %}</a>
            <button type="submit" class="btn btn-primary">{% trans "Отправить на проверку" %}</button>
        </div>
    </form>
</div>