<div class="contenedor">
  <h1>TuPrótesis Clinic<%= clinica ? ' · ' + clinica.nombre : '' %></h1>
  <% if (!cirujanos.length) { %><p class="u-texto-suave">Sin cirujanos vinculados todavía.</p><% } else { %>
  <div class="respuesta-corta"><p>Actividad agregada de tus <strong><%= cirujanos.length %> cirujano(s)</strong>: episodios, seguimiento pendiente y próximas citas.</p></div>
  <% if (promsPend.length) { %><div class="banner-alerta banner-alerta--informativa"><div><strong>Seguimiento pendiente:</strong>
  <% promsPend.forEach(function(p){ %><%= p.nombre %> (<%= p.n %>) <% }) %></div></div><% } %>
  <h2 style="font-size:20px" class="u-mt-16">Episodios</h2>
  <div class="tabla-envoltorio"><table class="tabla-datos">
    <thead><tr><th>#</th><th>Paciente</th><th>Cirujano</th><th>Art.</th><th>Estado</th><th>Informe</th></tr></thead><tbody>
    <% episodios.forEach(function(e){ %>
    <tr><td><%= e.id %></td><td><%= e.paciente %></td><td><%= e.cirujano %></td><td><%= e.articulacion %></td>
      <td><span class="badge <%= e.estado==='realizado'?'badge--verificado':'badge--declarado' %>"><%= e.estado %></span></td>
      <td><a class="btn btn--fantasma btn--mini" href="/clinic/episodios/<%= e.id %>/informe">Ver informe</a></td></tr>
    <% }) %></tbody></table></div>
  <h2 style="font-size:20px" class="u-mt-24">Próximas citas</h2>
  <div class="tabla-envoltorio"><table class="tabla-datos">
    <thead><tr><th>Inicio</th><th>Cirujano</th><th>Paciente</th><th>Modalidad</th></tr></thead><tbody>
    <% citas.forEach(function(c){ %>
    <tr><td><%= new Date(c.inicio).toLocaleString('es-ES') %></td><td><%= c.cirujano %></td><td><%= c.paciente %></td><td><%= c.modalidad %></td></tr>
    <% }) %></tbody></table></div>
  <% } %>
</div>
