{% extends 'admin/base_admin.html' %}

{% block title %}FAQ Setup | ChatLab{% endblock %}
{% block admin_faq_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">FAQ Quick Responses</h2>
        <p class="page-subtitle">Configured clickable question options that print replies immediately, bypassing LLM API costs.</p>
    </div>
    <a href="{% url 'admin_faq_create' %}" class="btn btn-primary">
        Add FAQ Question
    </a>
</div>

<div class="glass-card" style="padding: 2rem; border-radius: 0;">
    <h3 style="margin-bottom: 1.25rem; font-family: var(--font-heading); font-size: 1.25rem;">Chatbot FAQs</h3>
    
    {% if faqs %}
        <div class="table-container">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th style="width: 35%;">Question</th>
                        <th style="width: 45%;">Immediate Answer</th>
                        <th style="text-align: right; width: 20%;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for faq in faqs %}
                        <tr>
                            <td style="font-weight: 600; color: var(--text-primary);">{{ faq.question }}</td>
                            <td style="font-size: 0.9rem; line-height: 1.45;">{{ faq.answer|truncatechars:100 }}</td>
                            <td style="text-align: right;">
                                <div style="display: inline-flex; gap: 0.5rem; justify-content: flex-end;">
                                    <a href="{% url 'admin_faq_edit' faq.pk %}" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem; border-radius: 0;">
                                        Edit
                                    </a>
                                    <form action="{% url 'admin_faq_delete' faq.pk %}" method="post" onsubmit="return confirm('Are you sure you want to delete this FAQ question?');" style="display: inline;">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem; color: var(--danger); border-color: rgba(239, 68, 68, 0.2); border-radius: 0;">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div style="text-align: center; padding: 4rem 2rem; color: var(--text-secondary);">
            <div style="font-size: 3rem; margin-bottom: 1.5rem;">[?]</div>
            <h4 style="margin-bottom: 0.5rem;">No Quick Replies Defined</h4>
            <p style="font-size: 0.9rem; margin-bottom: 1.5rem; color: var(--text-muted);">Configure 3-4 standard FAQs to capture common visitor inquiries.</p>
            <a href="{% url 'admin_faq_create' %}" class="btn btn-primary">Add FAQ Question</a>
        </div>
    {% endif %}
</div>
{% endblock %}