<div class="contenedor">
  <h1>Panel profesional</h1>
  <div class="respuesta-corta"><p><strong><%= cirujano.nombre %></strong> · Gestiona tu agenda, tus consentimientos y tu actividad. Mensajería de pacientes: <strong><%= cirujano.mensajeria_activada ? 'activada' : 'desactivada' %></strong>.
  <form method="post" action="/pro/mensajeria" style="display:inline">
    <input type="hidden" name="activar" value="<%= cirujano.mensajeria_activada ? '0' : '1' %>">
    <button class="btn btn--fantasma btn--mini"><%= cirujano.mensajeria_activada ? 'Desactivar' : 'Activar' %> mensajería</button>
  </form></p></div>
  <section class="seccion" style="padding:16px 0"><h2 style="font-size:20px">Agenda</h2>
    <form method="post" action="/pro/slots" class="u-mt-8" style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end">
      <div class="campo" style="margin:0"><label>Fecha</label><input type="date" name="fecha" required></div>
      <div class="campo" style="margin:0"><label>Hora</label><input type="time" name="hora" required></div>
      <div class="campo" style="margin:0"><label>Min</label><input type="number" name="duracion" value="20" min="10" max="60" style="width:80px"></div>
      <div class="campo" style="margin:0"><label>Modalidad</label><select name="modalidad"><option>presencial</option><option>video</option></select></div>
      <button class="btn btn--secundario btn--mini" type="submit">Abrir hueco</button>
    </form>
    <div class="tabla-envoltorio u-mt-16"><table class="tabla-datos"><caption>Próximos huecos</caption>
      <thead><tr><th>Inicio</th><th>Min</th><th>Modalidad</th><th>Estado</th><th>Paciente</th></tr></thead><tbody>
      <% slots.forEach(function(s){ %>
      <tr><td><%= new Date(s.inicio).toLocaleString('es-ES') %></td><td><%= s.duracion_min %></td><td><%= s.modalidad %></td>
        <td><span class="badge <%= s.estado==='libre'?'badge--verificado':'badge--declarado' %>"><%= s.estado %></span></td>
        <td><%= s.paciente || '—' %></td></tr>
      <% }) %></tbody></table></div>
  </section>
  <section class="seccion" style="padding:16px 0"><h2 style="font-size:20px">Consentimientos</h2>
    <form method="post" action="/pro/consentimientos" class="u-mt-8" style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end">
      <div class="campo" style="margin:0"><label>Plantilla ID</label><input name="plantilla_id" value="1" style="width:110px"></div>
      <div class="campo" style="margin:0;min-width:260px"><label>Email del paciente</label><input name="email_paciente" type="email" required></div>
      <button class="btn btn--secundario btn--mini" type="submit">Enviar a firma</button>
    </form>
    <div class="tabla-envoltorio u-mt-16"><table class="tabla-datos"><caption>Enviados</caption>
      <thead><tr><th>Paciente</th><th>Documento</th><th>Estado</th><th>Firmado</th></tr></thead><tbody>
      <% consentimientos.forEach(function(c){ %>
      <tr><td><%= c.paciente %></td><td><%= c.titulo %></td>
        <td><span class="badge <%= c.estado==='firmado'?'badge--verificado':(c.estado==='rechazado'?'badge--demo':'badge--declarado') %>"><%= c.estado %></span></td>
        <td><%= c.firmado_at ? new Date(c.firmado_at).toLocaleString('es-ES') : '—' %></td></tr>
      <% }) %></tbody></table></div>
  </section>
</div>
