{% extends 'dashboard/base.html' %}
{% block title %}{% if legal_page %}Edit {{ legal_page.title }}{% else %}New Legal Page{% endif %}{% endblock %}
{% block content %}
<div class="sp-topbar">
  <div>
    <h1>{% if legal_page %}Edit Legal Page{% else %}New Legal Page{% endif %}</h1>
    <p class="sp-muted"><a href="{% url 'dashboard_legal_pages_list' %}">← All legal pages</a></p>
  </div>
</div>

<form method="post">
  {% csrf_token %}

  <div class="sp-card">
    <label class="sp-label">Page type</label>
    <p class="sp-muted" style="margin-top:-4px;">Just used to help organise things — the title and URL below are fully yours to edit.</p>
    {{ form.page_type }}

    <label class="sp-label">Title</label>
    {{ form.title }}

    <label class="sp-label">Page URL</label>
    {{ form.slug }}
    {% if legal_page %}
      <p class="sp-muted">Currently: <code>/legal/{{ legal_page.slug }}/</code></p>
    {% else %}
      <p class="sp-muted">Leave blank to generate automatically from the title.</p>
    {% endif %}

    <label class="sp-label">Content</label>
    {{ form.content }}
    <p class="sp-muted" style="margin-top:-4px;">Plain text is fine — paragraph breaks are kept automatically.</p>
  </div>

  <div class="sp-card">
    <h2>Visibility</h2>
    <label class="sp-label sp-flex" style="gap:8px;">{{ form.show_in_footer }} Show a link to this page in the site footer</label>
    <label class="sp-label sp-flex" style="gap:8px;">{{ form.is_active }} Active (untick to unpublish without deleting)</label>
    <label class="sp-label">Footer order</label>
    {{ form.order }}
  </div>

  <div class="sp-card">
    <h2>SEO &amp; Web Address</h2>
    <label class="sp-label">SEO Title</label>
    {{ form.meta_title }}
    <label class="sp-label">SEO Description</label>
    {{ form.meta_description }}
  </div>

  {% if legal_page %}
  <div class="sp-card">
    <h2>Use this on your Cookie Consent banner</h2>
    <p class="sp-muted" style="margin-top:-6px;">
      Paste this into the <strong>Cookie / privacy policy link</strong> field on the
      <a href="{% url 'dashboard_settings' %}?section=cookies">Cookie Consent settings</a> tab to point the banner's "Learn more" link at this page.
    </p>
    <input class="sp-input" type="text" readonly onclick="this.select();" value="/legal/{{ legal_page.slug }}/">
  </div>
  {% endif %}

  <div class="sp-save-bar">
    <span class="sp-save-hint">Don't forget to save your changes</span>
    <button type="submit" class="sp-btn-save"><i class="fa-solid fa-floppy-disk"></i> Save Legal Page</button>
  </div>
</form>
{% endblock %}