{% extends "#{theme.getParameter('KT_THEME_LAYOUT_DIR')}/_auth.html.twig" %}

{% block page_title %}MILQUI{% endblock %}

{% block content %}

<form class="form w-100" novalidate="novalidate" id="kt_sign_up_form" data-kt-redirect-url="homepage" action="#" method="post">

  {% include 'pages/auth/partials/_headerForm.html.twig' %}

  <div class="form-floating mb-4 fv-row ">
    <input type="email" class="form-control form-control-sm fs-6" name="username" id="inputUsername" placeholder=""
      autocomplete="off" />
    <label for="inputUsername" class="fs-7 required">Escribe tu cuenta de correo</label>
  </div>
  <div class="form-floating fv-row ">
    <input type="password" class="form-control form-control-sm fs-6" name="password" id="inputPassword" placeholder=""
      autocomplete="off" />
    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
    <label for="inputPassword" class="fs-7 required">Escribe tu contraseña</label>
    <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2"
      data-kt-password-meter-control="visibility">
      <i class="ki-duotone ki-eye-slash fs-2"></i>
      <i class="ki-duotone ki-eye fs-2 d-none"></i>
    </span>
  </div>
  <div class="d-flex align-items-center my-2 fv-row " data-kt-password-meter-control="highlight">
    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
  </div>
  <div class="text-muted fs-8 mb-2">Utiliza ocho caracteres o más, mezclando letras, números y símbolos</div>
  <div class="form-floating mb-4 fv-row ">
    <input type="password" class="form-control form-control-sm fs-6" name="xconfirmpassword" id="xconfirmpassword"
      placeholder="" autocomplete="off" />
    <label for="xconfirmpassword" class="fs-7 required">Repite la contraseña</label>
  </div>
  
  <div class="form-floating mb-4 fv-row ">
    <input type="text" class="form-control form-control-sm fs-6" name="xtelef" id="xtelef"
      placeholder="Telefono" autocomplete="off" />
    <label for="xtelef" class="fs-7 required">Teléfono</label>
  </div>
  
  <div class="form-group row mb-8 mt-4">
    <div class="d-flex w-50">
      <div class="form-floating me-4 fv-row ">
        <input type="number" class="form-control form-control-sm fs-6" name="xbornyear" id="xbornyear" placeholder=""
          autocomplete="off" pattern="[0-9]{4}" min="2006" />
        <label for="xbornyear" class="fs-7 required">Año de nacimiento</label>
      </div>
    </div>
    <div class="d-flex w-50">
      <div class="form-floating fv-row ">
        <input type="text" class="form-control form-control-sm fs-6" name="xteamcode" id="xteamcode" placeholder=""
          autocomplete="off" />
        <label for="xteamcode" class="fs-7">Código de equipo</label>
      </div>
    </div>
  </div>
  <div class="form-group row mb-8 fv-row ">
    <label class="form-label fs-7">
      <a href="#" class="link-primary fw-bold text-primary required">Términos y condiciones de uso:</a>
      <span class="form-check form-check-sm form-check-inline ms-4">
        <input class="form-check-input " type="checkbox" name="xagreetc" id="xagreetc" value="1" />
        <label for="xagreetc">He leído y estoy de acuerdo</label>
      </span>
    </label>
  </div>
  <div class="d-grid mb-6 fv-row ">
    <button type="button" id="kt_sign_up_submit" class="btn btn-primary btn-sm mb-4">
      <span class="indicator-label fw-bolder">REGISTRAR TU CUENTA</span>
      <span class="indicator-progress">Verificando...
        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
    </button>
    <a href="#registro_menores" class="btn btn-light-primary btn-sm">Registro de menores de edad</a>
  </div>
  <div class="text-gray-500 text-center fw-semibold fs-7 fv-row ">¿Ya tienes cuenta de usuario?
    <a href="login" class="link-success fw-semibold">Ingresa</a>
  </div>
</form>


{#
<!--begin::Modal - Registro de menor de edad-->
<div class="modal fade" id="registro_menores" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered mw-950px">
    <div class="modal-content">
      <form class="form" action="#" id="kt_modal_new_address_form">
        <div class="modal-header" id="kt_modal_new_address_header">
          <h2>Formulario de registro para menores de edad</h2>
          <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
            <i class="ki-duotone ki-cross fs-1">
              <span class="path1"></span>
              <span class="path2"></span>
            </i>
          </div>
        </div>
        <div class="modal-body py-10 px-lg-17">
          <div class="scroll-y me-n7 pe-7" id="kt_modal_new_address_scroll" data-kt-scroll="true"
            data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto"
            data-kt-scroll-dependencies="#kt_modal_new_address_header"
            data-kt-scroll-wrappers="#kt_modal_new_address_scroll" data-kt-scroll-offset="300px">
            <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed mb-9 p-6">
              <i class="ki-duotone ki-information fs-4tx text-warning me-4">
                <span class="path1"></span>
                <span class="path2"></span>
                <span class="path3"></span>
              </i>
              <div class="d-flex flex-stack flex-grow-1">
                <div class="fw-semibold">
                  <div class="fs-6 text-gray-700">En el caso de menores de edad, <strong>se requiere el
                      registro inicial del Padre o Tutor</strong>.<br /><br />
                    Una vez concluido el proceso, éste será quien gestionará la información del menor de edad en la
                    plataforma, incluyendo su afiliación a algún equipo,
                    deporte o evento.
                  </div>
                </div>
              </div>
            </div>
            <div class="row mb-5">
              <div class="col-md-4 ">
                <label class="required fs-5 fw-semibold mb-2 text-gray-500 fs-7">Nombre del <span
                    class="fw-bold text-primary">PADRE o TUTOR</span></label>
                <input type="text" class="form-control form-control-sm" placeholder="" name="xpeoplename"
                  id="xpeoplename" />
              </div>
              <div class="col-md-4 ">
                <label class="required fs-5 fw-semibold mb-2 text-gray-500 fs-7">Apellido paterno</label>
                <input type="text" class="form-control form-control-sm" placeholder="" name="xfirtsname"
                  id="xfirtsname" />
              </div>
              <div class="col-md-4 ">
                <label class="required fs-5 fw-semibold mb-2 text-gray-500 fs-7">Apellido materno</label>
                <input type="text" class="form-control form-control-sm" placeholder="" name="xlastname"
                  id="xlastname" />
              </div>
            </div>
            <div class="row mb-5">
              <div class="col-md-4 ">
                <input type="email" placeholder="Correo electrónico" name="xparentemail" id="xparentemail"
                  autocomplete="off" class="form-control form-control-sm bg-transparent mb-4" />
              </div>
              <div class=" col-md-4" data-kt-password-meter="true">
                <div class="mb-1">
                  <div class="position-relative mb-2">
                    <input class="form-control form-control-sm bg-transparent" type="password" placeholder="Contraseña"
                      name="xparentpassword" id="xparentpassword" autocomplete="off" />
                    <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2"
                      data-kt-password-meter-control="visibility">
                      <i class="ki-duotone ki-eye-slash fs-2"></i>
                      <i class="ki-duotone ki-eye fs-2 d-none"></i>
                    </span>
                  </div>
                  <div class="d-flex align-items-center mb-2" data-kt-password-meter-control="highlight">
                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"></div>
                    <div class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"></div>
                  </div>
                </div>
              </div>
              <div class=" col-md-4 mb-4">
                <input placeholder="Repita la contraseña" name="xconfirmparentpassword" id="xconfirmparentpassword"
                  type="password" autocomplete="off" class="form-control form-control-sm bg-transparent" />
                <label class="fs-8 text-gray-500">8 o más letras, números o símbolos mezclados
              </div>
              </label>
            </div>
            <div class="row mb-5">
              <div class="col-md-12 ">
                <label class="form-check form-check-sm form-check-inline pt-md-2">
                  <input class="form-check-input" type="checkbox" name="xparentagreetc" id="xparentagreetc" value="1" />
                  He leído y estoy de acuerdo en los <a href="#" class="ms-1 link-primary">Términos
                    y condiciones de uso.</a>
                </label>
              </div>
            </div>
          </div>
          <div class="modal-footer flex-center">
            <div class="d-grid mb-6 me-15">
              <button type="submit" id="kt_sign_up_submit2" class="btn btn-primary btn-sm mb-4">
                <span class="indicator-label fw-bolder">REGISTRAR CUENTA</span>
                <span class="indicator-progress">Procesando...
                  <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
              </button>
            </div>
            <div class="d-grid mb-6">
              <div class="text-gray-500 text-center fw-semibold fs-6">¿Ya tienes cuenta de usuario?
                <a href="login" class="link-primary fw-semibold">Ingresa</a>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
#}

{% endblock %}