-
  const registration_login_label = t("registracija")
  const registration_suggestion_label = t("Še niste registriran uporabnik, registrirajte se.")



#staticBackdrop.modal.fade(
  data-bs-backdrop="true"
  data-bs-keyboard="true"
  tabindex="-1"
  aria-labelledby="staticBackdropLabel"
  aria-hidden="true"
)
  .modal-dialog.modal-dialog-centered.modal-fullscreen-sm-down.modal-lg
    .modal-content.ps-4.pe-4
      .modal-header.mt-3
        h2.logintitle.modal-title.color-primary-text.fs-2= t('Prijava')
        h2.regtitle.d-none.modal-title.color-primary-text.fs-2= t('Registracija')
        button.no-bg-and-borders(
          type="button"
          data-bs-dismiss="modal"
          aria-label="Close"
        )
          img(src="/images/x.svg" alt="Zapri")
      #logreg-mb.modal-body.pt-0.pe-5
        p.logindesc.text-header-description-gray= t('S prijavo pridobite možnost uporabe vseh funkcij terminološkega portala.')
        p.regdesc.d-none.text-header-description-gray= t('Z registracijo pridobite možnost uporabe vseh funkcij terminološkega portala.')
        .pspelogsig-5
          form#login-form(
            action="/api/v1/users/login"
            method="post"
            autocomplete="off"
          )
            .row
              .col-2.d-flex.align-items-center.justify-content-center.pe-4
                img(src="/images/user.svg" alt="")
              .col-8.input-floor.ps-0
                label.loginregisterlabel(for="login-username-or-email")= t('UPORABNIK')
                input#login-username-or-email.d-block.w-100.input-lr(
                  name="usernameOrEmail"
                )
              .col-2.input-floor.d-flex.justify-content-end.pe-0 
                img.error-icon.error-login-icon.align-self-end.d-flex(
                  src="/images/x_red.svg"
                  alt="X"
                )
            .row
              .col-2.d-flex.align-items-center.justify-content-center.pe-4
                img(src="/images/lock.svg" alt="")
              .col-8.input-floor.ps-0
                label.loginregisterlabel(for="login-password")= t('GESLO')
                input#login-password.d-block.w-100.input-lr(
                  name="password"
                  type="password"
                )
              .col-2.input-floor.d-flex.justify-content-end.pe-0 
                img.error-icon.error-login-icon.align-self-end.d-flex(
                  src="/images/x_red.svg"
                  alt="X"
                )
            .row.pt-0
              .col-2.d-flex.ps-4.align-items-center.pe-4
                span
              .col-10.ps-0
                .row.pt-0
                  .col-7.pt-2
                    //- sm-8 was chosen because of the middle display collision issue
                    input#login-remember.align-middle(
                      name="rememberMe"
                      type="checkbox"
                    )
                    label.ps-2.align-middle.rememberloginlabel.text-header-description-gray.pe-2(
                      for="login-remember-me"
                    )= t('Zapomni si prijavo')
                  .col-5.pt-2.d-flex-and-align-end.pe-0
                    a#forgotten-password.ms-auto.forgotten-password.gray1-text.no-text-decoration.align-middle(
                      href="#"
                    )= t('Pozabljeno geslo')
                .row.pt-0
                  .col 
                    p#error-description.error-text.pt-3.mb-1= t('Nepravilno uporabniško ime, elektronski naslov ali geslo.')
                .row.pt-3
                  .col
                    button.btn.btn-primary.h41.w151= t('PRIJAVA')
                .row.pt-3
                  .col
                    p#login-message-container

          form#register-form.d-none(
            action="/api/v1/users/register"
            method="post"
            autocomplete="off"
          )
            .row
              .col-2.d-flex.align-items-center.justify-content-center.pe-4
                img(src="/images/user.svg" alt="")
              .col-8.input-floor.ps-0
                label.loginregisterlabel(for="register-username")= t('UPORABNIK')
                input#register-username.w-100.input-lr(name="username")

              .col-2.input-floor.d-flex.justify-content-end.pe-0 
                img.error-icon.error-username.align-self-end.d-flex(
                  src="/images/x_red.svg"
                  alt="X"
                )
            .row.pt-1
              .col.pe-0
                p#error-username.mb-0.error-text.text-end= t('Uporabniško ime že obstaja')
            .row.pt-0
              .col-2.d-flex.align-items-center.justify-content-center.pe-4
                img(src="/images/user.svg" alt="")
              .col-8.input-floor.ps-0
                label.loginregisterlabel(for="register-name")= t('IME')
                input#register-name.w-100.input-lr(name="firstName")
              .col-2.input-floor.d-flex.justify-content-end.pe-0 
                img.error-icon.error-name.align-self-end.d-flex(
                  src="/images/x_red.svg"
                  alt="X"
                )
            .row.pt-1
              .col.pe-0
                p#error-name.mb-0.error-text.text-end= t('Prazno obvezno polje')
            .row.pt-1
              .col-2.d-flex.align-items-center.justify-content-center.pe-4
                img(src="/images/user.svg" alt="")
              .col-8.input-floor.ps-0
                label.loginregisterlabel(for="register-surname")= t('PRIIMEK')
                input#register-surname.w-100.input-lr(name="lastName")
              .col-2.input-floor.d-flex.justify-content-end.pe-0 
                img.error-icon.error-surname.align-self-end.d-flex(
                  src="/images/x_red.svg"
                  alt="X"
                )
            .row.pt-1
              .col.pe-0
                p#error-surname.mb-0.error-text.text-end= t('Prazno obvezno polje')
            .row.pt-1
              .col-2.d-flex.align-items-center.justify-content-center.pe-4
                img(src="/images/user.svg" alt="")
              .col-8.input-floor.ps-0
                label.loginregisterlabel(for="register-email")= t('ELEKTRONSKI NASLOV')
                input#register-email.w-100.input-lr(name="email")
              .col-2.input-floor.d-flex.justify-content-end.pe-0 
                img.error-icon.error-email.align-self-end.d-flex(
                  src="/images/x_red.svg"
                  alt="X"
                )
            .row.pt-1
              .col.pe-0
                p#error-email.mb-0.error-text.text-end= t('Elektronski naslov že obstaja')
            .row.pt-1
              .col-2.d-flex.align-items-center.justify-content-center.pe-4
                img(src="/images/lock.svg" alt="")
              .col-8.input-floor.ps-0
                label.loginregisterlabel(for="register-password")= t('GESLO')
                input#register-password.w-100.input-lr(
                  name="password"
                  type="password"
                )
              .col-2.input-floor.d-flex.justify-content-end.pe-0 
                img.error-icon.error-password.align-self-end.d-flex(
                  src="/images/x_red.svg"
                  alt="X"
                )
            .row.pt-1
              .col.pe-0
                p#error-password.mb-0.error-text.text-end= t('Geslo je prekratko')
            .row.pt-1
              .col-2.d-flex.align-items-center.justify-content-center.pe-4
                img(src="/images/lock.svg" alt="")
              .col-8.input-floor.ps-0
                label.loginregisterlabel(for="register-password-repeat")= t('PONOVI GESLO')
                input#register-password-repeat.w-100.input-lr(
                  name="passwordRepeat"
                  type="password"
                )
              .col-2.input-floor.d-flex.justify-content-end.pe-0 
                img.error-icon.error-password-repeat.align-self-end.d-flex(
                  src="/images/x_red.svg"
                  alt="X"
                )
            .row.pt-1
              .col.pe-0
                p#error-password-repeat.mb-0.repeat.error-text.text-end= t('Geslo se ne ujema')
            .row.mt-1.pt-0
              .col-2.d-flex.align-items-center.justify-content-center.pe-4
              .col-8.ps-0
                .mb-2
                  input#terms-of-use.me-3(type="checkbox")
                  span!= t('Strinjam se s <a target="_blank" href="/pogoji-uporabe">pogoji uporabe</a>')
                .mb-2
                  input#privacy-policy.me-3(type="checkbox")
                  span!= t('Soglašam s <a target="_blank" href="/politika-zasebnosti">politiko zasebnosti</a>')
              .col-2.d-flex.justify-content-end.pe-0
            .row
              .col-2.d-flex.ps-4.align-items-center.pe-4
              .col-10.ps-0
                button#regbtnmain.btn.btn-primary.h41.w151(disabled)= ('Registracija')
            .row
              .col-sm-2.d-flex.ps-4.align-items-center
              .col-sm-10
                p#register-message-container.error-text

        #logreg-mf.modal-footer.pb-5
          .row
            .col-sm-2
            .col-sm-10.ps-0.no-flex
              #regbtn.registration.register-login-form
                button(
                  style="border: none; background: none; text-decoration: none"
                )
                  span.form-icon-data-seperator
                    span.form-icon
                      //-<i class="bi-person-plus"></i>
                      img(src="/images/icon-user-x.svg" alt="")
                    span.form-data
                      h6= t('Registracija')
                      p= t('Še niste registriran uporabnik, registrirajte se.')
              #loginbtn.registration.register-login-form.login.d-none
                button(
                  style="border: none; background: none; text-decoration: none"
                )
                  span.form-icon-data-seperator
                    span.form-icon
                      //-<i class="bi-person-plus"></i>
                      img(src="/images/icon-user-x.svg" alt="")
                    span.form-data
                      h6= t('Prijava')
                      p= t('Nazaj na prijavo')

script(nonce=cspNonce src="/javascripts/login-and-register.js")