<div class="contenedor">
  <h1>Episodios quirúrgicos</h1>
  <% if (creado) { %><div class="banner-alerta banner-alerta--informativa"><div>Operación registrada correctamente.</div></div><% } %>
  <form method="post" action="/pro/episodios" style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end" class="u-mt-16">
    <div class="campo" style="margin:0;min-width:240px"><label>Email del paciente</label><input name="email_paciente" type="email" required></div>
    <div class="campo" style="margin:0"><label>Articulación</label><select name="articulacion"><% ['rodilla','cadera','hombro','columna','tobillo'].forEach(function(a){ %><option><%= a %></option><% }) %></select></div>
    <div class="campo" style="margin:0"><label>Procedimiento</label><input name="procedimiento" placeholder="PTR primaria"></div>
    <div class="campo" style="margin:0"><label>Fecha prevista</label><input name="fecha_prevista" type="date"></div>
    <div class="campo" style="margin:0"><label>Lado</label><select name="lado"><option value="na">—</option><option>izquierda</option><option>derecha</option></select></div>
    <button class="btn btn--secundario btn--mini">Crear episodio</button>
  </form>
  <div class="tabla-envoltorio u-mt-24"><table class="tabla-datos"><caption>Mis episodios</caption>
    <thead><tr><th>Paciente</th><th>Art.</th><th>Fecha</th><th>Estado</th><th>Implante</th><th>Acciones</th></tr></thead><tbody>
    <% eps.forEach(function(e){ %>
    <tr><td><%= e.paciente %></td><td><%= e.articulacion %></td>
      <td><%= (e.fecha_intervencion||e.fecha_prevista) ? new Date(e.fecha_intervencion||e.fecha_prevista).toISOString().slice(0,10) : '—' %></td>
      <td><span class="badge <%= e.estado==='realizado'?'badge--verificado':'badge--declarado' %>"><%= e.estado %></span></td>
      <td><%= e.producto || '—' %><%= e.lote ? ' · '+e.lote : '' %></td>
      <td>
        <% if (e.estado==='planificado') { %>
        <details><summary class="btn btn--fantasma btn--mini" style="display:inline-block">Registrar implante</summary>
        <form method="post" action="/pro/episodios/<%= e.id %>/implante" class="u-mt-8">
          <input name="producto_slug" placeholder="slug producto (p.ej. demoknee-x1)" style="width:100%;margin-bottom:6px">
          <input name="lote" placeholder="lote" style="width:48%"> <input name="udi" placeholder="UDI" style="width:48%">
          <input name="fecha_intervencion" type="date" style="width:100%;margin:6px 0">
          <button class="btn btn--primario btn--mini">Cerrar episodio</button>
        </form></details>
        <details><summary class="btn btn--fantasma btn--mini" style="display:inline-block">Pedir kit</summary>
        <form method="post" action="/pro/episodios/<%= e.id %>/kit" class="u-mt-8">
          <input name="fabricante_slug" placeholder="slug fabricante" style="width:100%;margin-bottom:6px">
          <input name="detalle" placeholder="detalle del kit" style="width:100%;margin-bottom:6px">
          <button class="btn btn--secundario btn--mini">Solicitar</button>
        </form></details>
        <% } %>
      </td></tr>
    <% }) %></tbody></table></div>
</div>
