{% extends "cms/base.html" %}
{% load static %}
{% block title %}{% if obj.pk %}Edit Figure{% else %}Add Figure{% endif %} — CMS{% endblock %}

{% block extra_head %}
<style>
  .req { color:#ff404b;margin-left:3px;font-weight:700; }
  .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.top { vertical-align:top;padding-top:.85rem; }
  .field-td { padding:.5rem 1rem .5rem 0; }
  .field-input {
    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;
  }
  .field-input:focus { border-color:#033152; }
  .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:.55rem 1rem;border-bottom:1px solid var(--cms-border);
  }
  .toggle-row:last-child { border-bottom:none; }
  .toggle-row label { font-size:.88rem;color:var(--cms-text);font-weight:500;margin:0;cursor:pointer; }
  .toggle-row input[type=checkbox] { width:auto;accent-color:#033152;flex-shrink:0; }
  .hint { color:var(--cms-muted);font-size:.72rem;margin-top:.35rem; }
  .figure-preview {
    display:flex;align-items:baseline;justify-content:center;gap:.1rem;
    padding:1.1rem 1rem .35rem;
  }
  .figure-preview .n { font-size:2.1rem;font-weight:800;color:var(--cms-accent);line-height:1; }
  .figure-preview .s { font-size:1.3rem;font-weight:700;color:var(--cms-accent);line-height:1; }
  .figure-caption { text-align:center;font-size:.82rem;color:var(--cms-muted);padding:0 1rem 1rem; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <div>
    <h2>{% if obj.pk %}Edit Figure{% else %}Add Figure{% endif %}</h2>
    {% if obj.pk %}<div style="font-size:.82rem;color:var(--cms-muted);margin-top:.15rem">{{ obj.label }}</div>{% endif %}
  </div>
  <div style="display:flex;gap:.5rem;align-items:center">
    <a href="{% url 'cms_counters' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
  </div>
</div>

<form method="post" id="counterForm">
{% 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">Figure</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Number <span class="req">*</span></td>
            <td class="field-td">
              <input type="number" name="number" id="f_number" value="{{ obj.number|default:0 }}"
                     class="field-input" style="max-width:200px" required autofocus oninput="drawPreview()">
              <div class="hint">Digits only. It counts up to this from zero when the visitor reaches it.</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Suffix</td>
            <td class="field-td">
              <input type="text" name="suffix" id="f_suffix" value="{{ obj.suffix }}"
                     class="field-input" style="max-width:140px" placeholder="+" oninput="drawPreview()">
              <div class="hint">Sits beside the number and does not animate. Usually + or %. Leave blank for none.</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Label <span class="req">*</span></td>
            <td class="field-td">
              <input type="text" name="label" id="f_label" value="{{ obj.label }}"
                     class="field-input" placeholder="Years in Business" required oninput="drawPreview()">
              <div class="hint">The words under the figure.</div>
            </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>Save Figure</button>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Preview</div>
      <div class="figure-preview">
        <span class="n" id="p_number">{{ obj.number|default:0 }}</span><span class="s" id="p_suffix">{{ obj.suffix }}</span>
      </div>
      <div class="figure-caption" id="p_label">{{ obj.label|default:"Label" }}</div>
    </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 obj.is_active or not obj.pk %}checked{% endif %}>
        <label for="is_active">Shown in the band</label>
      </div>
      <div style="padding:.65rem 1rem;font-size:.72rem;color:var(--cms-muted)">
        Order is set by dragging the rows on the Counter list.
      </div>
    </div>

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

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

{% block extra_js %}
<script>
function drawPreview() {
  document.getElementById('p_number').textContent = document.getElementById('f_number').value || '0';
  document.getElementById('p_suffix').textContent = document.getElementById('f_suffix').value || '';
  document.getElementById('p_label').textContent  = document.getElementById('f_label').value || 'Label';
}
</script>
{% endblock %}