<div class="contenedor prosa">
  <h1>Pedir cita · <%= c.nombre %></h1>
  <% if (hecho) { %><div class="banner-alerta banner-alerta--informativa"><div><strong>Cita confirmada.</strong> El profesional la verá en su agenda.</div></div><% } %>
  <% if (!libres.length) { %><p class="u-texto-suave">No hay huecos libres publicados ahora mismo.</p><% } else { %>
  <form method="post" action="/medicos/<%= slug %>/cita">
    <div class="campo"><label>Elige un hueco</label>
      <select name="slot_id" required><% libres.forEach(function(s){ %>
        <option value="<%= s.id %>"><%= new Date(s.inicio).toLocaleString('es-ES') %> · <%= s.duracion_min %> min · <%= s.modalidad %></option>
      <% }) %></select></div>
    <div class="campo"><label>Motivo (opcional)</label><input name="motivo" maxlength="300" placeholder="p. ej. dolor de rodilla derecha, valoración"></div>
    <button class="btn btn--primario" type="submit">Confirmar cita</button>
  </form>
  <% } %>
</div>
