<%- include('layout', { pageTitle: 'Hero Slides', activePage: 'slides' }) %>

<div class="section-header">
    <h2><i class="fas fa-images"></i> Hero Slides</h2>
</div>

<div class="form-card">
    <h3>Add New Slide</h3>
    <form method="POST" action="/admin/slides" enctype="multipart/form-data" class="inline-add-form">
        <div class="form-row">
            <div class="form-group">
                <label>Caption</label>
                <input type="text" name="caption" placeholder="Slide caption text" required>
            </div>
            <div class="form-group">
                <label>Link (optional)</label>
                <input type="text" name="link" placeholder="/category/xerox-machines">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label>Upload Image</label>
                <input type="file" name="image" accept="image/*">
            </div>
            <div class="form-group">
                <label>Or Image URL</label>
                <input type="text" name="image_url" placeholder="https://example.com/slide.jpg">
            </div>
        </div>
        <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i> Add Slide</button>
    </form>
</div>

<% if (slides.length === 0) { %>
<div class="empty-state">
    <i class="fas fa-images"></i>
    <p>No hero slides yet. Add your first slide above.</p>
</div>
<% } else { %>
<div class="cards-grid">
    <% slides.forEach(slide => { %>
    <div class="media-card">
        <div class="media-card-image">
            <img src="<%= slide.image %>" alt="<%= slide.caption %>">
        </div>
        <div class="media-card-content">
            <p><strong><%= slide.caption %></strong></p>
            <% if (slide.link) { %><small>Link: <%= slide.link %></small><% } %>
            <form method="POST" action="/admin/slides/<%= slide.id %>/delete" onsubmit="return confirm('Delete this slide?')">
                <button type="submit" class="btn btn-sm btn-danger"><i class="fas fa-trash"></i> Delete</button>
            </form>
        </div>
    </div>
    <% }); %>
</div>
<% } %>

<%- include('layout-footer') %>
