<section>
  <div class="admin-header">
    <h1>Hero Slides</h1>
    <a class="button button-primary" href="/admin/hero-slides/new">+ New Slide</a>
  </div>
  <p class="hint">These rotate on the homepage background, in this order. Drag a card to reorder.</p>

  <% if (!slides.length) { %>
    <div class="dash-empty-state">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="3" y="3" width="18" height="14" rx="2"></rect>
        <circle cx="8.5" cy="9" r="1.5"></circle>
        <path d="M21 15l-5-5-9 9"></path>
      </svg>
      <p>No hero slides yet. The homepage will show a plain fallback background until you add one.</p>
      <a href="/admin/hero-slides/new">Add your first slide &rarr;</a>
    </div>
  <% } else { %>
    <div class="reorder-list" id="hero-slides-list" data-reorder-list data-reorder-url="/admin/hero-slides/reorder">
      <% slides.forEach(function(slide) { %>
        <div class="reorder-item" data-reorder-item data-id="<%= slide.id %>" draggable="true">
          <span class="reorder-handle" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="8" x2="20" y2="8"></line><line x1="4" y1="16" x2="20" y2="16"></line></svg>
          </span>
          <span class="reorder-thumb">
            <% if (slide.mediaType === 'video') { %>
              <video src="<%= slide.mediaUrl %>" muted></video>
            <% } else if (slide.mediaUrl) { %>
              <img src="<%= slide.mediaUrl %>" alt="">
            <% } else { %>
              <span class="upload-empty">No media</span>
            <% } %>
          </span>
          <span class="reorder-body">
            <strong><%= slide.headline %></strong>
            <span class="admin-table-meta"><%= slide.mediaType %> &middot; <span class="tag"><%= slide.status %></span></span>
          </span>
          <span class="reorder-actions">
            <a href="/admin/hero-slides/<%= slide.id %>/edit">Edit</a>
            <form action="/admin/hero-slides/<%= slide.id %>?_method=DELETE" method="POST" style="display:inline"
                  onsubmit="return confirm('Delete this slide?')">
              <button type="submit">Delete</button>
            </form>
          </span>
        </div>
      <% }) %>
    </div>
  <% } %>
</section>

<script src="/js/drag-reorder.js"></script>
