{% extends 'index.twig' %}

{% block content %}

  <section class="row">
    <div class="col-12">
      <h2 class="mb-4 border-bottom">{{ 'msgRegistration' | translate }}</h2>
      <p class="pb-3 mb-3">
        {{ 'msgAlreadyHaveAccount' | translate }} <a href="./login">{{ 'msgSignInHere' | translate }}</a>
      </p>

      <div class="spinner-border text-primary d-none" id="loader" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
      <div id="pmf-register-response"></div>
    </div>
  </section>


  <section class="row">

    <div class="col-6 border-end">
      <div class="w-100 align-self-end pt-1 pt-md-4 pb-4" style="max-width: 580px;">

        <p class="pb-3 mb-3">
          {{ 'msgRegistrationCredentials' | translate }} {{ 'msgRegistrationNote' | translate }}
        </p>

        <form id="pmf-register-form" method="post" action="#" class="needs-validation" novalidate>
          <input type="hidden" name="lang" id="lang" value="{{ lang }}">

          <div class="row">
            <div class="col-sm-6">
              <div class="position-relative mb-4">
                <label for="realname" class="form-label">{{ 'msgRealname' | translate }}</label>
                <input type="text" id="realname" name="realname" class="form-control form-control-lg" required>
                <div class="invalid-feedback position-absolute start-0 top-100">
                  {{ 'msgErrorEnterFullName' | translate }}
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="position-relative mb-4">
                <label for="name" class="form-label">{{ 'msgUsername' | translate }}</label>
                <input type="text" id="name" name="name" class="form-control form-control-lg" required>
                <div class="invalid-feedback position-absolute start-0 top-100">
                  {{ 'msgErrorEnterLoginName' | translate }}
                </div>
              </div>
            </div>
            <div class="col-12 mb-4">
              <div class="position-relative mb-4">
                <label class="form-label" for="email">{{ 'msgEmail' | translate }}</label>
                <input type="email" name="email" id="email" required class="form-control form-control-lg">
                <div class="invalid-feedback position-absolute start-0 top-100">
                  {{ 'msgErrorEnterValidMail' | translate }}
                </div>
              </div>
            </div>
            <div class="col-12 mb-4">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="isVisible" name="isVisible">
                <label class="form-check-label" for="isVisible"> {{ 'msgUserDataVisible' | translate }} </label>
              </div>
            </div>
          </div>

          {{ captchaFieldset | raw }}

          <button type="submit" class="btn btn-primary shadow-primary btn-lg w-100" id="pmf-submit-register"
                  data-pmf-form="save-registration">
            {{ 'submitRegister' | translate }}
          </button>
        </form>
      </div>
    </div>

    {% if isWebAuthnEnabled %}
      <div class="col-6">
        <div class="w-100 align-self-end pt-1 pt-md-4 pb-4" style="max-width: 580px;">

          <p class="pb-3 mb-3">
            {{ 'msgRegistrationWithPasskeys' | translate }}
          </p>

          <p id="pmf-webauthn-error" class="alert alert-danger d-none"></p>

          <p id="pmf-webauthn-success" class="alert alert-success d-none"></p>

          <form action="{{ loginUrl }}" method="post" accept-charset="utf-8" role="form" id="pmf-webauthn-form">
            <input type="hidden" name="lang" id="lang" value="{{ lang }}">
            <input type="hidden" id="pmf-csrf-token-webauthn" value="{{ csrfTokenWebauthn }}">

            <div class="col-12 mb-4">
              <label class="form-label" for="webauthn">{{ 'msgEmail' | translate }}</label>
              <input type="email" name="webauthn" id="webauthn" required class="form-control form-control-lg">
              <div class="invalid-feedback">
                {{ 'msgErrorEnterValidMail' | translate }}
              </div>
            </div>

            <button type="submit" class="btn btn-primary shadow-primary btn-lg w-100">
              {{ 'msgContinue' | translate }}
            </button>
          </form>

        </div>
      </div>
    {% endif %}
  </section>


{% endblock %}