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

<div class="dashboard-header" style="margin-bottom: 30px;">
  <a href="/admin/locutores" style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 10px; display: inline-block;">
    <i class="fas fa-arrow-left"></i> Voltar para Locutores
  </a>
  <h1 class="text-gradient">Adicionar Locutor</h1>
</div>

<div class="card" style="max-width: 600px;">
  <% if (typeof error !== 'undefined' && error) { %>
    <div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> <%= error %></div>
  <% } %>

  <form action="/admin/locutores/novo" method="POST" enctype="multipart/form-data">
    <div class="form-group">
      <label class="form-label">Nome do Locutor *</label>
      <input type="text" name="nome" class="form-control" required>
    </div>

    <div class="form-group">
      <label class="form-label">Foto de Perfil</label>
      <div style="position: relative; overflow: hidden; display: inline-block; width: 100%;">
        <button type="button" class="btn" style="background: var(--bg-dark); border: 1px solid var(--border-color); color: var(--text-main); width: 100%; text-align: left; padding: 15px;">
          <i class="fas fa-camera" style="color: var(--neon-blue); margin-right: 10px;"></i> 
          <span id="file-name-foto">Selecionar foto...</span>
        </button>
        <input type="file" name="foto" accept="image/*" 
               style="font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer;"
               onchange="document.getElementById('file-name-foto').textContent = this.files[0] ? this.files[0].name : 'Selecionar foto...'">
      </div>
    </div>
    
    <div class="form-group">
      <label class="form-label">Biografia</label>
      <textarea name="biografia" class="form-control" rows="4"></textarea>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px;">
      <div class="form-group">
        <label class="form-label">Facebook</label>
        <input type="url" name="facebook" class="form-control" placeholder="URL">
      </div>
      <div class="form-group">
        <label class="form-label">Instagram</label>
        <input type="url" name="instagram" class="form-control" placeholder="URL">
      </div>
      <div class="form-group">
        <label class="form-label">Twitter</label>
        <input type="url" name="twitter" class="form-control" placeholder="URL">
      </div>
    </div>

    <button type="submit" class="btn btn-primary" style="margin-top: 10px; width: 100%; justify-content: center; padding: 12px;">
      <i class="fas fa-save"></i> Salvar Locutor
    </button>
  </form>
</div>
<%- include('../partials/footer') %>
