{% extends "cms/base.html" %}
{% block title %}Edit Hero{% endblock %}
{% block page_title %}Edit Hero Section{% endblock %}

{% block extra_head %}
<style>
  .form-table td:first-child { text-align:left; }
  .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">
  <h2><a href="{% url 'cms_homepage' %}#content-sections" style="color:var(--cms-muted);font-weight:400;text-decoration:none">Homepage</a> <span style="color:var(--cms-muted);font-weight:400">/</span> Hero Section</h2>
  <a href="{% url 'cms_homepage' %}#content-sections" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
</div>

<form method="post" enctype="multipart/form-data">
  {% csrf_token %}

  <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)">Heading</div>
    <table class="cms-table form-table" style="margin:0">
      <tbody>
        <tr>
          <td style="width:180px;color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Line 1</td>
          <td><input type="text" name="heading_line1" value="{{ obj.heading_line1 }}" 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">Accent Word <span style="font-weight:400">(gold)</span></td>
          <td><input type="text" name="heading_accent" value="{{ obj.heading_accent }}" 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">Line 2</td>
          <td><input type="text" name="heading_line2" value="{{ obj.heading_line2 }}" 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;vertical-align:top;padding-top:.85rem">Description</td>
          <td><textarea name="description" 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.description }}</textarea></td>
        </tr>
      </tbody>
    </table>
  </div>

  <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)">Social Proof</div>
    <table class="cms-table form-table" style="margin:0">
      <tbody>
        <tr>
          <td style="width:180px;color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Trusted Clients Count</td>
          <td><input type="text" name="trusted_clients_count" value="{{ obj.trusted_clients_count }}" 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">Trusted Clients Label</td>
          <td><input type="text" name="trusted_clients_label" value="{{ obj.trusted_clients_label }}" 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">Portfolio Button Text</td>
          <td><input type="text" name="portfolio_btn_text" value="{{ obj.portfolio_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>
      </tbody>
    </table>
  </div>

  <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)">Media</div>
    <table class="cms-table form-table" style="margin:0">
      <tbody>
        <tr>
          <td style="width:180px;color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Video URL</td>
          <td><input type="url" name="video_url" value="{{ obj.video_url }}" placeholder="https://youtube.com/..." 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">Play Button URL</td>
          <td><input type="url" name="play_btn_url" value="{{ obj.play_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>
        <tr>
          <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap;vertical-align:middle">Hero Video File</td>
          <td>
            <div style="display:flex;align-items:center;gap:.75rem">
              <div>
                <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.video %}Change Video{% else %}Upload Video{% endif %}
                  </button>
                  <input type="file" name="video" accept="video/*" onchange="updateFileName(this, 'video-name')">
                </div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <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)">Badges</div>
    <table class="cms-table form-table" style="margin:0">
      <tbody>
        <tr>
          <td style="width:180px;color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Badge 1</td>
          <td><input type="text" name="badge_1" value="{{ obj.badge_1 }}" 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">Badge 2</td>
          <td><input type="text" name="badge_2" value="{{ obj.badge_2 }}" 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">Badge 3</td>
          <td><input type="text" name="badge_3" value="{{ obj.badge_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"></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 Hero</button>
    <a href="{% url 'cms_homepage' %}#content-sections" class="btn-cms-ghost">Cancel</a>
  </div>
</form>
{% endblock %}

{% block extra_js %}
<script>
function updateFileName(input, labelId) {
  const label = document.getElementById(labelId);
  if (label && input.files[0]) {
    const name = input.files[0].name;
    label.textContent = name.length > 40 ? name.slice(0,40)+'…' : name;
  }
}
</script>
{% endblock %}