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

{% block extra_head %}
<style>
  .req { color:#ff404b;margin-left:3px;font-weight:700; }
  .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.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; }
  .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; }
  .img-upload-zone { display:flex;align-items:center;gap:.75rem; }
  .img-preview-box { width:70px;height:70px;border-radius:6px;border:1px solid var(--cms-border);background:#f7fafc;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden; }
  .img-preview-box img { width:70px;height:70px;object-fit:cover; }
  .img-preview-box .no-img { color:#cbd5e1;font-size:1.2rem; }
  .upload-btn-wrap { position:relative;overflow:hidden;display:inline-block; }
  .upload-btn-wrap input[type=file] { position:absolute;left:0;top:0;opacity:0;width:100%;height:100%;cursor:pointer; }
  .file-chosen { font-size:.75rem;color:var(--cms-muted);margin-top:.3rem; }
</style>
{% endblock %}

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

<form method="post" enctype="multipart/form-data" id="slideForm">
{% 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">Basic Info</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Label</td>
            <td class="field-td"><input type="text" name="label" value="{{ obj.label }}" class="field-input" placeholder="Business Group" autofocus></td>
          </tr>
          <tr>
            <td class="field-label">Headline</td>
            <td class="field-td"><input type="text" name="headline" value="{{ obj.headline }}" class="field-input" placeholder="Building Businesses."></td>
          </tr>
          <tr>
            <td class="field-label">Emphasis</td>
            <td class="field-td"><input type="text" name="headline_em" value="{{ obj.headline_em }}" class="field-input" placeholder="Creating Institutions."></td>
          </tr>
          <tr>
            <td class="field-label top">Body</td>
            <td class="field-td"><textarea name="body" rows="4" class="field-input" style="resize:vertical">{{ obj.body }}</textarea></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Button</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Button</td>
            <td class="field-td">
              <div style="display:flex;gap:.5rem;flex-wrap:wrap">
                <input type="text" name="btn1_text" value="{{ obj.btn1_text }}" class="field-input" placeholder="Our Portfolio" style="max-width:240px">
                <input type="text" name="btn1_url" value="{{ obj.btn1_url }}" class="field-input" placeholder="#portfolio" style="max-width:320px;font-family:monospace">
              </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 Slide</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 obj.is_active or not obj.pk %}checked{% endif %}>
        <label for="is_active">Included in the slider</label>
      </div>
      <div style="padding:.65rem 1rem;font-size:.72rem;color:var(--cms-muted)">
        Order is set by dragging the rows on the Hero Slides list.
      </div>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Media</div>
      <div style="padding:.65rem 1rem">
        <div class="img-upload-zone">
          <div class="img-preview-box" id="img-preview-box">
            {% if obj.image %}
              <img src="{{ obj.image.url }}" id="img-preview">
            {% else %}
              <i class="fa-solid fa-image no-img"></i>
            {% endif %}
          </div>
          <div>
            <div style="font-size:.72rem;color:var(--cms-muted);margin-bottom:.4rem">Landscape, at least 1600px wide</div>
            <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap">
              <div class="upload-btn-wrap">
                <button type="button" class="btn-cms-ghost" style="padding:.4rem .9rem;font-size:.8rem">
                  <i class="fa-solid fa-arrow-up-from-bracket me-1"></i>{% if obj.image %}Change{% else %}Upload{% endif %}
                </button>
                <input type="file" name="image" id="f_image" accept="image/*" onchange="previewImg(this)">
              </div>
              {% if obj.image %}
              <label class="btn-cms-danger" style="padding:.4rem .9rem;font-size:.8rem;cursor:pointer;margin:0">
                <input type="checkbox" name="clear_image" value="1" style="display:none" onchange="this.closest('label').style.opacity=this.checked?'.55':'1'">
                <i class="fa-solid fa-trash me-1"></i>Remove
              </label>
              {% endif %}
            </div>
            <div class="file-chosen" id="img-file-name"></div>
          </div>
        </div>
      </div>
    </div>

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

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

{% block extra_js %}
<script>
function previewImg(input) {
  const file = input.files[0];
  if (!file) return;
  const box = document.getElementById('img-preview-box');
  const label = document.getElementById('img-file-name');
  const reader = new FileReader();
  reader.onload = e => { box.innerHTML = '<img src="' + e.target.result + '" style="width:70px;height:70px;object-fit:cover;">'; };
  reader.readAsDataURL(file);
  if (label) label.textContent = file.name.length > 30 ? file.name.slice(0,30)+'…' : file.name;
}
</script>
{% endblock %}