{% extends "cms/base.html" %}
{% block title %}{% if obj %}Edit Link{% else %}Add Link{% endif %}{% endblock %}
{% block page_title %}{% if obj %}Edit Link{% else %}Add Link{% endif %}{% endblock %}

{% block extra_head %}
<style>
  .form-table td { padding:.65rem 1rem;border-bottom:1px solid var(--cms-border);vertical-align:middle; }
  .form-table tr:last-child td { border-bottom:none; }
  .field-label { width:190px;font-size:.8rem;color:var(--cms-muted);font-weight:600;text-align:right; }
  .field-td { font-size:.85rem; }
  .field-input { width:100%;padding:.55rem .8rem;border:1px solid var(--cms-border);border-radius:8px;font-size:.88rem;background:#fff;color:var(--cms-text); }
  .field-input:focus { outline:none;border-color:var(--cms-accent); }
  .req { color:var(--cms-accent); }
  .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); }
  .toggle-row { display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--cms-border);font-size:.85rem; }
  .toggle-row:last-child { border-bottom:none; }
  .toggle-row input { width:1rem;height:1rem;accent-color:var(--cms-accent);flex-shrink:0; }
  .toggle-row label { margin:0;cursor:pointer; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2>
    <a href="{% url 'cms_footer_links' %}" style="color:var(--cms-muted);font-weight:400;text-decoration:none">Footer Links</a>
    <span style="color:var(--cms-muted);font-weight:400">/</span>
    {% if obj %}{{ obj.label }}{% else %}Add Link{% endif %}
  </h2>
  <div style="display:flex;gap:.5rem;align-items:center">
    <a href="{% url 'cms_footer_links' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
    {% if obj and obj.url %}
    <a href="{% if '://' in obj.url %}{{ obj.url }}{% else %}https://{{ tenant.primary_domain }}{{ obj.url }}{% endif %}"
       target="_blank" rel="noopener" class="btn-cms-site">
      <i class="fa-solid fa-arrow-up-right-from-square"></i>View Live Page
    </a>
    {% endif %}
  </div>
</div>

<form method="post" id="footerLinkForm">
{% 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">Link</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Column <span class="req">*</span></td>
            <td class="field-td">
              <select name="column" required class="field-input">
                {% for val, display in column_choices %}
                <option value="{{ val }}"{% if obj and obj.column == val %} selected{% elif request.GET.col == val %} selected{% endif %}>{{ display }}</option>
                {% endfor %}
              </select>
            </td>
          </tr>
          <tr>
            <td class="field-label">Label <span class="req">*</span></td>
            <td class="field-td"><input type="text" name="label" value="{{ obj.label|default:'' }}" placeholder="e.g. About Us" required autofocus class="field-input"></td>
          </tr>
          <tr>
            <td class="field-label">URL <span class="req">*</span></td>
            <td class="field-td">
              <input type="text" name="url" value="{{ obj.url|default:'' }}" placeholder="/about/ or https://example.com/" required class="field-input" style="font-family:monospace">
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.3rem">A path on this site, or a full address for somewhere else.</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Open in</td>
            <td class="field-td">
              <select name="target" class="field-input" style="max-width:240px">
                <option value="_self"{% if not obj or obj.target == '_self' %} selected{% endif %}>Same tab</option>
                <option value="_blank"{% if obj and obj.target == '_blank' %} selected{% endif %}>New tab</option>
              </select>
            </td>
          </tr>
        </tbody>
      </table>
    </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>{% if obj %}Save Link{% else %}Add Link{% endif %}</button>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Visibility</div>
      <div class="toggle-row">
        <input type="checkbox" name="is_active" id="is_active" {% if not obj or obj.is_active %}checked{% endif %}>
        <label for="is_active">Active, shown in the footer</label>
      </div>
    </div>

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

  </div>

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