<%- include('layout', { pageTitle: 'Videos', activePage: 'videos' }) %>

<div class="section-header">
    <h2><i class="fas fa-video"></i> Product Videos</h2>
</div>

<div class="form-card">
    <h3>Add New Video</h3>
    <form method="POST" action="/admin/videos" class="inline-add-form">
        <div class="form-row">
            <div class="form-group">
                <label>Video Title *</label>
                <input type="text" name="title" required placeholder="e.g. Canon IR 2006N Demo">
            </div>
            <div class="form-group">
                <label>YouTube Video ID *</label>
                <input type="text" name="youtube_id" required placeholder="e.g. dQw4w9WgXcQ">
                <small>The part after "v=" in the YouTube URL</small>
            </div>
        </div>
        <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i> Add Video</button>
    </form>
</div>

<% if (videos.length === 0) { %>
<div class="empty-state">
    <i class="fas fa-video"></i>
    <p>No videos yet. Add your first video above.</p>
</div>
<% } else { %>
<div class="cards-grid">
    <% videos.forEach(v => { %>
    <div class="media-card">
        <div class="media-card-image">
            <img src="https://img.youtube.com/vi/<%= v.youtube_id %>/mqdefault.jpg" alt="<%= v.title %>">
            <div class="play-icon"><i class="fas fa-play-circle"></i></div>
        </div>
        <div class="media-card-content">
            <p><strong><%= v.title %></strong></p>
            <small>ID: <%= v.youtube_id %></small>
            <form method="POST" action="/admin/videos/<%= v.id %>/delete" onsubmit="return confirm('Delete this video?')">
                <button type="submit" class="btn btn-sm btn-danger"><i class="fas fa-trash"></i> Delete</button>
            </form>
        </div>
    </div>
    <% }); %>
</div>
<% } %>

<%- include('layout-footer') %>
