{% extends "cms/base.html" %}
{% block title %}Edit CTA {{ cta_num }}{% endblock %}
{% block page_title %}Edit CTA Block {{ cta_num }}{% endblock %}

{% block extra_head %}<style>.form-table td:first-child { text-align:left; }</style>{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2><a href="{% url 'cms_homepage' %}#cta-sections" style="color:var(--cms-muted);font-weight:400;text-decoration:none">Homepage</a> <span style="color:var(--cms-muted);font-weight:400">/</span> CTA Block {{ cta_num }}</h2>
  <a href="{% url 'cms_homepage' %}#cta-sections" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
</div>

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

  {% if cta_num == 1 %}
  <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
    <div style="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)">Highlight Words</div>
    <table class="cms-table form-table" style="margin:0">
      <tbody>
        <tr>
          <td style="width:160px;color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Word 1</td>
          <td><input type="text" name="word1" value="{{ obj.word1 }}" style="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"></td>
        </tr>
        <tr>
          <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Word 2</td>
          <td><input type="text" name="word2" value="{{ obj.word2 }}" style="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"></td>
        </tr>
        <tr>
          <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Word 3</td>
          <td><input type="text" name="word3" value="{{ obj.word3 }}" style="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"></td>
        </tr>
      </tbody>
    </table>
  </div>
  {% endif %}

  <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
    <div style="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)">Content</div>
    <table class="cms-table form-table" style="margin:0">
      <tbody>
        {% if cta_num != 1 %}
        <tr>
          <td style="width:160px;color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Heading</td>
          <td><input type="text" name="heading" value="{{ obj.heading }}" style="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"></td>
        </tr>
        {% endif %}
        <tr>
          <td style="{% if cta_num == 1 %}width:160px;{% endif %}color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap;vertical-align:top;padding-top:.85rem">Body Text</td>
          <td><textarea name="body" rows="3" style="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;resize:vertical">{{ obj.body }}</textarea></td>
        </tr>
        <tr>
          <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Button Text</td>
          <td><input type="text" name="btn_text" value="{{ obj.btn_text }}" style="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"></td>
        </tr>
        <tr>
          <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Button URL</td>
          <td><input type="text" name="btn_url" value="{{ obj.btn_url }}" style="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"></td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="d-flex gap-2">
    <button type="submit" class="btn-cms"><i class="fa-solid fa-floppy-disk me-1"></i>Save CTA {{ cta_num }}</button>
    <a href="{% url 'cms_homepage' %}#cta-sections" class="btn-cms-ghost">Cancel</a>
  </div>
</form>
{% endblock %}