<%- include('../partials/header') %>

<div class="navbar">
    <h3 class="text-neon-blue m-0">Nova Música</h3>
    <a href="/admin/musicas" class="btn btn-pink" style="padding: 5px 15px; font-size: 0.9rem;">Voltar</a>
</div>

<div class="mobile-container mt-4" style="max-width: 600px;">
    
    <% if (locals.error_msg && locals.error_msg.length > 0) { %>
        <div style="background: rgba(255,0,0,0.2); border: 1px solid red; padding: 10px; border-radius: 5px; margin-bottom: 15px; color: #fff;">
            <%= error_msg %>
        </div>
    <% } %>

    <div class="glass-card">
        <form action="/admin/musicas/salvar" method="POST" enctype="multipart/form-data">
            
            <label class="text-muted">Título da Música</label>
            <input type="text" name="titulo" class="form-control" required>

            <label class="text-muted">Artista / Banda</label>
            <input type="text" name="artista" class="form-control" required>

            <label class="text-muted">Categoria</label>
            <select name="categoria_id" class="form-control" required>
                <option value="">Selecione...</option>
                <% categorias.forEach(c => { %>
                    <option value="<%= c.id %>"><%= c.nome %></option>
                <% }) %>
            </select>

            <label class="text-muted">Arquivo MP3</label>
            <input type="file" name="arquivo_mp3" accept="audio/mpeg" class="form-control" required>

            <label class="text-muted">Capa (Opcional)</label>
            <input type="file" name="capa" accept="image/*" class="form-control">

            <button type="submit" class="btn btn-neon mt-4" style="width: 100%;">Salvar Música</button>
        </form>
    </div>
</div>

<%- include('../partials/footer') %>
