{% extends "madga/studio/base.html" %}
{% load i18n madga_studio_tags %}

{% block breadcrumbs %}<span class="crumb is-current">Pages</span>{% endblock %}

{% block content %}
<div class="madga-page">
  <div class="madga-page-header">
    <div class="madga-page-title-block">
      <h1 class="madga-page-title">Pages</h1>
      <p class="madga-page-subtitle">Páginas estáticas: about, pricing, privacidad, etc.</p>
    </div>
    <div class="madga-page-actions">
      {% studio_btn label="Nueva página" href="/studio/pages/new/" variant="primary" icon="plus" %}
    </div>
  </div>

  <div class="madga-table-wrap">
    <table class="madga-table">
      <thead>
        <tr>
          <th>Título</th>
          <th>{% trans "Slug" %}</th>
          <th>{% trans "Estado" %}</th>
          <th>{% trans "Layout" %}</th>
          <th>Actualizada</th>
          <th class="col-actions"></th>
        </tr>
      </thead>
      <tbody>
        {% for p in pages %}
        <tr>
          <td>
            <a href="{% url 'madga_studio:page_edit' pk=p.pk %}" class="madga-post-title" style="text-decoration:none;">{{ p.title }}</a>
          </td>
          <td><span class="madga-post-slug">/{{ p.slug }}</span></td>
          <td>{% studio_badge p.status p.get_status_display %}</td>
          <td>{{ p.layout }}</td>
          <td>{{ p.updated_at|date:"M j, Y" }}</td>
          <td class="col-actions">
            <div style="display:flex; gap:4px; justify-content:flex-end;">
              {% if p.slug %}
                <a href="{% url 'madga_studio:page_preview' pk=p.pk %}" target="_blank" class="madga-btn madga-btn--ghost madga-btn--sm" title="Preview">{% studio_icon "eye" size=14 stroke=2 %}</a>
              {% endif %}
              <a href="{% url 'madga_studio:page_edit' pk=p.pk %}" class="madga-btn madga-btn--ghost madga-btn--sm">{% trans "Editar" %}</a>
            </div>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="6">{% studio_empty title="Sin páginas" message="Crea la primera." action_label="Nueva página" action_href="/studio/pages/new/" %}</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}