<div class="contenedor prosa">
  <%- include('../partials/breadcrumbs', { items: migas }) %>
  <h1>Mi preparación</h1>
  <% if (!plan) { %>
  <div class="respuesta-corta"><p>Indica tu <strong>fecha de cirugía</strong> y creamos tu cuenta atrás con hitos de preparación (casa, fuerza, logística). Las instrucciones de tu centro siempre mandan.</p></div>
  <form method="post" action="/mi-protesis/prehab" class="u-mt-16">
    <div class="campo"><label>Fecha de la cirugía</label><input name="fecha" type="date" required></div>
    <div class="campo"><label>Articulación</label><select name="articulacion"><option>rodilla</option><option>cadera</option><option>hombro</option><option>columna</option><option>tobillo</option></select></div>
    <button class="btn btn--primario">Crear mi plan</button>
  </form>
  <% } else { %>
  <div class="respuesta-corta"><p>Cirugía de <strong><%= plan.articulacion %></strong> el <strong><%= new Date(plan.fecha_cirugia).toISOString().slice(0,10) %></strong>
  <% if (plan.dias_restantes >= 0) { %> · quedan <strong><%= plan.dias_restantes %> días</strong><% } %>.</p></div>
  <% hitos.forEach(function(h){ var pasado = new Date(h.fecha) < new Date() && !h.completado_at; %>
  <div class="card u-mt-16" style="<%= pasado ? 'border-left:4px solid var(--color-alerta,#d97706)' : (h.completado_at ? 'border-left:4px solid var(--color-exito,#16a34a)' : '') %>">
    <p class="card__meta">T<%= h.offset_dias %> días · <%= new Date(h.fecha).toISOString().slice(0,10) %>
      <% if (h.completado_at) { %> · <span class="badge badge--verificado">Hecho</span><% } else if (pasado) { %> · <span class="badge badge--declarado">Pendiente (fecha pasada)</span><% } %></p>
    <h3 style="font-size:16px;margin:.2em 0"><%= h.titulo %></h3>
    <p style="margin:.3em 0"><%= h.contenido %></p>
    <form method="post" action="/mi-protesis/prehab/hitos/<%= h.id %>">
      <button class="btn btn--fantasma btn--mini"><%= h.completado_at ? 'Desmarcar' : 'Marcar hecho' %></button></form>
  </div>
  <% }) %>
  <% } %>
</div>
