{% extends "dashboard/base.html" %} 
{% load i18n %} 

{% block title %}{% trans "FAQ" %}{% endblock %} 
{% block content %}
<div class="d-flex align-items-center justify-content-between mb-3">
  <h1 class="h3 mb-0">{% trans "FAQ" %}</h1>
  <a href="{% url 'dashboard:faq_new' %}" class="btn btn-primary"
    >{% trans "New FAQ item" %}</a>
</div>

{% if faqs %}
<div class="table-responsive">
  <table class="table table-sm table-hover">
    <thead class="thead-light">
      <tr>
        <th>{% trans "Question" %}</th>
        <th>{% trans "Active" %}</th>
        <th class="text-right">{% trans "Actions" %}</th>
      </tr>
    </thead>
    <tbody>
      {% for f in faqs %}
      <tr>
        <td>
          <div class="fw-bold">{{ f.question }}</div>
          <div class="small text-muted">{{ f.answer|truncatechars:120 }}</div>
        </td>
        <td>
          {% if f.is_active %}<span class="badge badge-success">{% trans "Yes" %}</span>
          {% else %}<span class="badge badge-secondary">{% trans "No" %}</span
          >{% endif %}
        </td>
        <td class="text-right">
          <a
            class="btn btn-sm btn-outline-secondary"
            href="{% url 'dashboard:faq_edit' f.pk %}">
            {% trans "Edit" %}
          </a>
          <a
            class="btn btn-sm btn-outline-danger"
            href="{% url 'dashboard:faq_delete' f.pk %}">
            {% trans "Delete" %}
          </a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="alert alert-info">{% trans "No FAQ items yet." %}</div>
{% endif %} {% endblock %}