<h1>Edit Media</h1>

<form action="/media/edit/<%= mediaItem._id %>" method="POST" enctype="multipart/form-data">
<div class="mb-3">
            <label class="form-label">Category</label>
            <select name="category" class="form-select" required>
                <option value="Article" <%= mediaItem.category === 'Article' ? 'selected' : '' %>>Article</option>
                <option value="Gallery" <%= mediaItem.category === 'Gallery' ? 'selected' : '' %>>Gallery</option>
            </select>
        </div>
    <div class="mb-3">
        <label class="form-label">Title</label>
        <input type="text" class="form-control" name="title" value="<%= mediaItem.title %>" required>
    </div>

    <div class="mb-3">
        <label class="form-label">Description</label>
        <textarea class="form-control" name="description" rows="3" required><%= mediaItem.description %></textarea>
    </div>

    <div class="mb-3">
        <label class="form-label">Current Media File</label>
        <% if (mediaItem.url) { %>
            <div class="mb-2">
                <!-- <a href="<%= mediaItem.url %>" target="_blank">View Current Media</a> -->
                 <img src="<%= mediaItem.url %>" alt="Current Media" style="width: 200px; height: 100px; object-fit: cover;" class="rounded border">  
            </div>
        <% } else { %>
            <div class="mb-2 text-muted">No media file uploaded.</div>
        <% } %>
        <label class="form-label">Upload New Media File (optional)</label>
        <input type="file" class="form-control" name="mediaFile">
    </div>

    <button type="submit" class="btn btn-primary">
        Update Media
    </button>
    <a href="/media/list" class="btn btn-secondary">Cancel</a>
</form>