{% extends "cms/base.html" %}
{% block title %}{% if adding %}Add Legal Page{% else %}Edit {{ obj.title }}{% endif %}{% endblock %}

{% block extra_head %}
{{ form.media.css }}
<style>
  .section-head {
    padding:.75rem 1rem;border-bottom:1px solid var(--cms-border);
    font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--cms-muted);
  }
  .field-label {
    width:160px;color:var(--cms-muted);font-size:.8rem;font-weight:600;
    white-space:nowrap;vertical-align:middle;padding:.6rem 1rem;
  }
  .field-label .hint { font-weight:400;font-size:.72rem;margin-top:.2rem; }
  .field-td { padding:.5rem 1rem .5rem 0; }
  .field-td input[type=text] {
    width:100%;border:1px solid var(--cms-border);border-radius:6px;
    padding:.45rem .75rem;font-size:.875rem;color:var(--cms-text);
    background:#fff;outline:none;box-sizing:border-box;
  }
  .field-td input[type=text]:focus { border-color:#033152; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <div>
    <h2>{% if adding %}New Legal Page{% else %}{{ obj.title }}{% endif %}</h2>
  </div>
  <a href="{% url 'cms_legal_pages' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
</div>

<form method="post">
{% csrf_token %}
<div class="row g-3">

  <div class="col-lg-8">

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Details</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Page Title</td>
            <td class="field-td">{{ form.title }}</td>
          </tr>
          {% if adding %}
          <tr>
            <td class="field-label">
              Slug
              <div class="hint" style="color:var(--cms-muted)">Leave blank to auto-generate</div>
            </td>
            <td class="field-td">{{ form.slug }}</td>
          </tr>
          {% endif %}
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Content</div>
      <div style="padding:1rem">{{ form.content }}</div>
    </div>

  </div>

  <div class="col-lg-4">

    <div class="d-flex gap-2 mb-3">
      <button type="submit" class="btn-cms w-100"><i class="fa-solid fa-floppy-disk me-1"></i>Save</button>
    </div>

    <a href="{% url 'cms_legal_pages' %}" class="btn-cms-ghost w-100" style="text-align:center;display:block">Cancel</a>

  </div>
</div>
</form>
{% endblock %}

{% block extra_js %}
{{ form.media.js }}
{% endblock %}