<div class="contenedor">
  <%- include('../partials/breadcrumbs', { items: migas }) %>
  <h1>Mi Prótesis</h1>
  <div class="respuesta-corta"><p>Hola<%= usuario.nombre ? ', ' + usuario.nombre : '' %>. Aquí vive <strong>la identidad de tus implantes</strong>: carnet, certificado para viajar y alertas de seguridad vinculadas a tu modelo y lote.</p></div>

  <% if (notifs.length) { %>
  <section class="seccion" style="padding:12px 0">
    <h2 style="font-size:20px">Avisos</h2>
    <% notifs.forEach(function(n){ %>
    <div class="banner-alerta <%= n.tipo==='alerta_seguridad' ? 'banner-alerta--urgente' : 'banner-alerta--informativa' %>">
      <div><strong><%= n.titulo %></strong> <%= n.cuerpo || '' %>
      <% if (n.url) { %> <a href="<%= n.url %>">Ver detalle</a><% } %></div></div>
    <% }) %>
  </section>
  <% } %>

  <section class="seccion" style="padding:12px 0">
    <h2 style="font-size:20px">Mis implantes</h2>
    <% if (!implantes.length) { %><p class="u-texto-suave">Aún no has registrado ningún implante.</p><% } %>
    <div class="grid-cards u-mt-16">
      <% implantes.forEach(function(i){ %>
      <article class="card">
        <h3 style="font-size:16px"><%= i.producto_nombre || i.producto_texto || ('Implante de ' + i.articulacion) %></h3>
        <p class="card__meta"><%= i.articulacion %><%= i.lado && i.lado!=='na' ? ' · ' + i.lado : '' %>
          <%= i.fecha_intervencion ? ' · ' + new Date(i.fecha_intervencion).toISOString().slice(0,10) : '' %>
          <%= i.lote ? ' · lote ' + i.lote : '' %></p>
        <% if (i.origen==='episodio') { %><span class="badge badge--verificado">Verificado por episodio</span>
        <% } else { %><span class="badge badge--declarado">Autodeclarado</span><% } %>
        <p class="u-mt-8">
          <a class="btn btn--fantasma btn--mini" href="/mi-protesis/carnet/<%= i.id %>">Carnet</a>
          <a class="btn btn--fantasma btn--mini" href="/mi-protesis/certificado/<%= i.id %>">Certificado viaje (PDF)</a>
          <% if (i.producto_slug) { %><a class="btn btn--fantasma btn--mini" href="/protesis/<%= i.producto_slug %>">Ficha</a><% } %>
        </p>
        <form method="post" action="/mi-protesis/implantes/<%= i.id %>/borrar" onsubmit="return confirm('¿Borrar este implante de tu cuenta?')">
          <button class="btn btn--mini" style="background:none;border:none;color:var(--color-error);cursor:pointer;padding:0">Eliminar</button>
        </form>
      </article>
      <% }) %>
    </div>
  </section>

  <section class="seccion seccion--alterna"><div class="contenedor" style="padding:0">
    <h2 style="font-size:20px">Registrar un implante</h2>
    <form method="post" action="/mi-protesis/implantes" class="u-mt-16">
      <div class="campo"><label for="i-art">Articulación *</label>
        <select id="i-art" name="articulacion" required><option value="">Elige…</option>
        <% ['rodilla','cadera','hombro','columna','tobillo'].forEach(function(a){ %><option value="<%= a %>"><%= a %></option><% }) %></select></div>
      <div class="campo"><label for="i-prod">Modelo (si lo conoces)</label>
        <input id="i-prod" name="producto_texto" placeholder="p. ej. NexGen"><p class="campo__ayuda">Escríbelo como aparezca en tu informe; nuestro equipo lo vinculará a la ficha si existe. También puedes indicar el slug exacto:</p>
        <input name="producto_slug" placeholder="slug exacto (opcional), p. ej. nexgen"></div>
      <div class="campo"><label for="i-lado">Lado</label>
        <select id="i-lado" name="lado"><option value="na">—</option><option>izquierda</option><option>derecha</option><option>bilateral</option></select></div>
      <div class="campo"><label for="i-fecha">Fecha de intervención</label><input id="i-fecha" name="fecha" type="date"></div>
      <div class="campo"><label for="i-lote">Lote (de tu tarjeta de implante)</label><input id="i-lote" name="lote"></div>
      <div class="campo"><label for="i-udi">UDI (si lo tienes)</label><input id="i-udi" name="udi"></div>
      <button class="btn btn--primario" type="submit">Guardar implante</button>
      <p class="campo__ayuda u-mt-8">Estos datos activan tus alertas de seguridad. Son tuyos: puedes borrarlos cuando quieras.</p>
    </form>
  </div></section>
</div>

<div class="contenedor u-mt-32"><details><summary class="u-texto-suave" style="cursor:pointer">Borrar mi cuenta y mis datos</summary>
<form method="post" action="/cuenta/borrar" class="u-mt-8">
  <p class="u-texto-suave">Se borran tus implantes y avisos y se anonimiza la cuenta. Los agregados estadísticos ya publicados no son reversibles (no contienen datos identificables). Escribe BORRAR para confirmar:</p>
  <input name="confirmo" placeholder="BORRAR" style="max-width:200px"> <button class="btn btn--mini" style="background:var(--color-error);color:#fff;border:none;border-radius:8px;padding:8px 14px;cursor:pointer">Borrar definitivamente</button>
</form></details></div>