{% extends 'frontend/base.html' %}

{% block title %} - {{ title }}{% endblock %}

{% block content %}
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h3>
                <i class="bi bi-question-circle"></i> {{ title }}
            </h3>
            <a href="{% url 'frontend:faq_list' %}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> Back to FAQ List
            </a>
        </div>

        <div class="card">
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    
                    <div class="mb-3">
                        <label for="{{ form.title.id_for_label }}" class="form-label fw-bold">
                            {{ form.title.label }}
                        </label>
                        {{ form.title }}
                        {% if form.title.help_text %}
                            <div class="form-text">{{ form.title.help_text }}</div>
                        {% endif %}
                        {% if form.title.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.title.errors %}
                                    <div>{{ error }}</div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    <div class="mb-3">
                        <label for="{{ form.content.id_for_label }}" class="form-label fw-bold">
                            {{ form.content.label }}
                        </label>
                        {{ form.content }}
                        {% if form.content.help_text %}
                            <div class="form-text">{{ form.content.help_text }}</div>
                        {% endif %}
                        {% if form.content.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.content.errors %}
                                    <div>{{ error }}</div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    <div class="mb-3">
                        <label for="{{ form.order.id_for_label }}" class="form-label fw-bold">
                            {{ form.order.label }}
                        </label>
                        {{ form.order }}
                        {% if form.order.help_text %}
                            <div class="form-text">{{ form.order.help_text }}</div>
                        {% endif %}
                        {% if form.order.errors %}
                            <div class="invalid-feedback d-block">
                                {% for error in form.order.errors %}
                                    <div>{{ error }}</div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            {% for error in form.non_field_errors %}
                                <div>{{ error }}</div>
                            {% endfor %}
                        </div>
                    {% endif %}

                    <div class="d-flex justify-content-between">
                        <a href="{% url 'frontend:faq_list' %}" class="btn btn-secondary">
                            <i class="bi bi-x-circle"></i> Cancel
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> {{ submit_text }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}