{{template "arriba" .}}

{{- if .Clave}}
    <section class="pantalla" aria-label="Clave temporal">
      <h2>Clave temporal de «{{.DeQuien}}»</h2>
      <p class="clave-nueva">{{.Clave}}</p>
      <p class="pie">
        Apuntadla y entregadla en mano. No se vuelve a mostrar: de la contraseña solo se
        guarda su huella, no la contraseña. Quien entre con ella tendrá que cambiarla antes
        de poder hacer nada.
      </p>
    </section>
{{- end}}

    <section class="pantalla" aria-label="Cuentas">
      <h2>Cuentas</h2>
      <div class="tabla-envoltorio">
        <table class="pedir-tabla">
          <thead>
            <tr>
              <th scope="col">Usuario</th>
              <th scope="col">Colectivo</th>
              <th scope="col">Rol</th>
              <th scope="col">Estado</th>
              <th scope="col">Acciones</th>
            </tr>
          </thead>
          <tbody>
            {{- range .Cuentas}}
            <tr>
              <th scope="row">{{.Usuario}}</th>
              <td>{{.Nombre}}</td>
              <td>{{.Rol}}</td>
              <td>
                {{- if .Activa}}activa{{else}}desactivada{{end}}
                {{- if .Temporal}} <span class="pista">clave temporal sin cambiar</span>{{end}}
              </td>
              <td>
                <form class="en-linea" method="post" action="/pedir/cuentas">
                  <input type="hidden" name="csrf" value="{{$.CSRF}}">
                  <input type="hidden" name="usuario" value="{{.Usuario}}">
                  <button type="submit" name="accion" value="reset" class="pedir-boton-flojo">Resetear clave</button>
                  {{- if .Activa}}
                  <button type="submit" name="accion" value="desactivar" class="pedir-boton-flojo">Desactivar</button>
                  {{- else}}
                  <button type="submit" name="accion" value="activar" class="pedir-boton-flojo">Activar</button>
                  {{- end}}
                </form>
              </td>
            </tr>
            {{- end}}
          </tbody>
        </table>
      </div>
    </section>

    <section class="pantalla" aria-label="Dar de alta un colectivo">
      <h2>Dar de alta un colectivo de la casa</h2>
      <form class="pedir-form" method="post" action="/pedir/cuentas" autocomplete="off">
        <input type="hidden" name="csrf" value="{{.CSRF}}">
        <input type="hidden" name="accion" value="crear">
        <p>
          <label for="nuevo-usuario">Usuario</label>
          <input id="nuevo-usuario" name="usuario" type="text" required maxlength="32"
                 autocapitalize="none" spellcheck="false">
          <span class="pista">Minúsculas, números, guion y guion bajo.</span>
        </p>
        <p>
          <label for="nuevo-nombre">Nombre del colectivo</label>
          <input id="nuevo-nombre" name="nombre" type="text" required maxlength="60">
        </p>
        <p>
          <label for="nuevo-rol">Rol</label>
          <select id="nuevo-rol" name="rol">
            <option value="interno">interno: pide fechas y amadrina</option>
            <option value="enre">enre: además confirma y rechaza</option>
          </select>
        </p>
        <p><button type="submit">Crear la cuenta</button></p>
      </form>
      <p class="pie">
        Los colectivos de fuera no tienen cuenta: sus eventos los pide un colectivo de la casa
        que los amadrina. Cuantas menos contraseñas haya guardadas, menos hay que perder.
      </p>
    </section>

{{template "abajo" .}}