{% extends 'dashboard/base.html' %}
{% block title %}Pages{% endblock %}
{% block content %}
<div class="sp-topbar">
  <div>
    <h1>Pages</h1>
    <p>Edit the content of every page on your website.</p>
  </div>
</div>

<div class="sp-card">
  <table class="sp-table">
    <thead><tr><th>Page</th><th>Type</th><th>Shown in menu</th><th></th></tr></thead>
    <tbody>
      {% for page in pages %}
      <tr>
        <td><a href="{% url 'dashboard_page_editor' page.id %}"><strong>{{ page.title }}</strong></a>{% if page.is_homepage %} <span class="sp-pill sp-pill-blue">Home</span>{% endif %}</td>
        <td class="sp-muted">{{ page.get_page_type_display }}</td>
        <td>{% if page.show_in_menu %}<span class="sp-pill sp-pill-green">Visible</span>{% else %}<span class="sp-pill sp-pill-gray">Hidden</span>{% endif %}</td>
        <td>
          <a href="{% url 'dashboard_page_editor' page.id %}" class="sp-btn sp-btn-sm">Edit</a>
          {% if not page.is_homepage %}
          <form method="post" action="{% url 'dashboard_page_delete' page.id %}" style="display:inline;" data-sp-confirm="This cannot be undone." data-sp-confirm-title="Delete this page?">
            {% csrf_token %}
            <button class="sp-btn sp-btn-sm sp-btn-danger" type="submit">Delete</button>
          </form>
          {% endif %}
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="4" class="sp-empty">No pages yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="sp-card" style="max-width:420px;">
  <h2>+ Add New Page</h2>
  <form method="post">
    {% csrf_token %}
    <label class="sp-label">Page title</label>
    {{ form.title }}
    <label class="sp-label">Page type</label>
    {{ form.page_type }}
    <button class="sp-btn sp-btn-primary" type="submit">Create Page</button>
  </form>
</div>
{% endblock %}