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

{% block title %}{% trans "SEO Pages" %}{% endblock %}

{% block content %}
<div class="d-flex align-items-center justify-content-between mb-3">
  <h1 class="h3 mb-0">{% trans "SEO Pages" %}</h1>
  <a href="{% url 'dashboard:site_page_seo_new' %}" class="btn btn-primary">
    {% trans "Add SEO Page" %}
  </a>
</div>

<p class="text-muted">
  {% trans "Manage the SEO pages shown on your website." %}
</p>

{% if seo_pages %}
  <div class="table-responsive">
    <table class="table table-sm table-hover">
      <thead class="thead-light">
        <tr>
          <th>{% trans "Page" %}</th>
          <th>{% trans "SEO Title" %}</th>
          <th>{% trans "SEO Description" %}</th>
          <th class="text-right">{% trans "Actions" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for item in seo_pages %}
          <tr>
            <td>
              <div class="fw-bold">{{ item.get_page_display }}</div>
              <div class="small text-muted">{{ item.page }}</div>
            </td>

            <td>
              {% if item.seo_title %}
                <div class="fw-bold">{{ item.seo_title }}</div>
              {% else %}
                -
              {% endif %}
            </td>

            <td>
              {% if item.seo_description %}
                <div class="small text-muted">{{ item.seo_description|truncatechars:40 }}</div>
              {% else %}
                -
              {% endif %}
            </td>

            <td class="text-right">
              <a
                href="{% url 'dashboard:site_page_seo_edit' item.pk %}"
                class="btn btn-sm btn-outline-secondary"
              >
                {% trans "Edit" %}
              </a>
              <a
                href="{% url 'dashboard:site_page_seo_delete' item.pk %}"
                class="btn btn-sm btn-outline-danger"
              >
                {% trans "Delete" %}
              </a>
            </td>
          </tr>
        {% empty %}
          <tr>
            <td colspan="5">{% trans "No SEO pages yet." %}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% else %}
  <div class="alert alert-info">{% trans "No SEO pages yet." %}</div>
{% endif %}
{% endblock %}