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

<div class="dashboard-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
  <div>
    <h1 class="text-gradient">Locutores</h1>
    <p style="color: var(--text-muted);">Equipe da rádio.</p>
  </div>
  <a href="/admin/locutores/novo" class="btn btn-primary">
    <i class="fas fa-plus"></i> Novo Locutor
  </a>
</div>

<div class="dashboard-grid">
  <% if (locutores.length > 0) { %>
    <% locutores.forEach(locutor => { %>
      <div class="card" style="text-align: center; position: relative;">
        <form action="/admin/locutores/delete/<%= locutor.id %>" method="POST" style="position: absolute; top: 15px; right: 15px;" onsubmit="return confirm('Excluir este locutor?');">
          <button type="submit" class="btn btn-danger" style="padding: 6px 12px; font-size: 0.8rem; border-radius: 5px;">
            <i class="fas fa-trash"></i>
          </button>
        </form>
        
        <div style="width: 100px; height: 100px; margin: 0 auto 15px auto; border-radius: 50%; overflow: hidden; border: 3px solid var(--neon-blue); box-shadow: 0 0 15px rgba(0,240,255,0.3);">
          <% if (locutor.foto_url) { %>
            <img src="<%= locutor.foto_url %>" style="width: 100%; height: 100%; object-fit: cover;">
          <% } else { %>
            <div style="width: 100%; height: 100%; background: var(--bg-dark); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--text-muted);">
              <i class="fas fa-user"></i>
            </div>
          <% } %>
        </div>
        <h3 style="margin-bottom: 5px;"><%= locutor.nome %></h3>
        <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
          <%= locutor.biografia || 'Sem biografia' %>
        </p>
        <div style="display: flex; justify-content: center; gap: 10px;">
          <% if (locutor.facebook) { %><a href="<%= locutor.facebook %>" target="_blank" style="color: #1877F2;"><i class="fab fa-facebook fa-lg"></i></a><% } %>
          <% if (locutor.instagram) { %><a href="<%= locutor.instagram %>" target="_blank" style="color: #E1306C;"><i class="fab fa-instagram fa-lg"></i></a><% } %>
          <% if (locutor.twitter) { %><a href="<%= locutor.twitter %>" target="_blank" style="color: #1DA1F2;"><i class="fab fa-twitter fa-lg"></i></a><% } %>
        </div>
      </div>
    <% }) %>
  <% } else { %>
    <div style="grid-column: 1 / -1; text-align: center; color: var(--text-muted); padding: 40px;">
      Nenhum locutor cadastrado.
    </div>
  <% } %>
</div>
<%- include('../partials/footer') %>
