{{template "arriba" .}}

    <section class="pantalla" aria-label="Vuestro cupo">
      <h2>Vuestro cupo</h2>
      <p class="pie">
        Os quedan <strong>{{.Restantes}}</strong> de {{.Reglas.CupoDias}} días dentro de los
        próximos {{.Reglas.MesesVentana}} meses. Se pueden pedir fechas hasta el {{.Hasta}}.
        {{- if .DiasUsados}} Ahora mismo ocupáis {{.DiasUsados}}.{{end}}
      </p>
      <p><a class="pedir-boton" href="/pedir/nueva">Pedir una fecha</a></p>
    </section>

    <section class="pantalla" aria-label="Vuestras fechas">
      <h2>Vuestras fechas</h2>
      {{- if .Mias}}
      <div class="tabla-envoltorio">
        <table class="pedir-tabla">
          <thead>
            <tr>
              <th scope="col">Fecha</th>
              <th scope="col">Evento</th>
              <th scope="col">Estado</th>
              <th scope="col">Caduca</th>
              <th scope="col"><span class="sr-only">Acciones</span></th>
            </tr>
          </thead>
          <tbody>
            {{- range .Mias}}
            <tr>
              <td>
                {{.Legible}}{{if gt .Dias 1}} <span class="pista">({{.Dias}} días)</span>{{end}}
                {{- if .Evento.Hora}}<br><span class="pista">a las {{.Evento.Hora}}</span>{{end}}
              </td>
              <td>
                {{.Evento.Titulo}}
                {{- if .Evento.Externo}}<br><span class="pista">amadrináis a {{.Evento.Amadrinado}}</span>{{end}}
              </td>
              <td><span class="estado estado-{{.Evento.Estado}}">{{.Etiqueta}}</span></td>
              <td>{{if .Caduca}}{{.Caduca}}{{else}}—{{end}}</td>
              <td>
                {{- if .Liberable}}
                <form method="post" action="/pedir/liberar">
                  <input type="hidden" name="csrf" value="{{$.CSRF}}">
                  <input type="hidden" name="id" value="{{.Evento.ID}}">
                  <button type="submit" class="pedir-boton-flojo">Liberar</button>
                </form>
                {{- end}}
              </td>
            </tr>
            {{- end}}
          </tbody>
        </table>
      </div>
      <p class="pie">
        Una solicitud sin confirmar se borra sola a los {{.Reglas.DiasMaximoPendiente}} días,
        o cuando falten menos de {{.Reglas.DiasMinimoConfirmar}} para la fecha. La columna
        «caduca» dice cuándo, y al caducar la fecha queda libre para el resto.
      </p>
      {{- else}}
      <p class="pie">No tenéis ninguna fecha pedida.</p>
      {{- end}}
    </section>

{{template "abajo" .}}