{% extends theme("layout.html") %}
{% block body %}
<div class="row justify-content-center">
  <div class="col-12 col-lg-8 col-xl-6">
    <div class="card shadow-sm border-0 login-card well">
      <div class="card-body p-4 p-lg-5">
        <h2 class="mt-0 mb-4">{{_('Login')}}</h2>
        <form method="POST" role="form">
          <input type="hidden" name="next" value="{{next_url}}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div class="mb-3">
            <label for="username" class="form-label">{{_('Username')}}</label>
            <input type="text" class="form-control" id="username" name="username" autocapitalize="off" placeholder="{{_('Username')}}" value="{{ username }}">
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">{{_('Password')}}</label>
            <div class="input-group">
              <input type="password" class="form-control" id="password" name="password" placeholder="{{_('Password')}}" value="{{ password }}">
              <button type="button" class="btn btn-outline-secondary toggle-password" data-target="#password" data-bs-target="#password" data-password-show="{{_('Show password')}}" data-password-hide="{{_('Hide password')}}" aria-label="{{_('Show password')}}" title="{{_('Show password')}}">
                <span class="visually-hidden password-label">{{_('Show password')}}</span>
                <i class="bi bi-eye password-toggle-icon password-icon-hidden" aria-hidden="true"></i>
                <i class="bi bi-eye-slash password-toggle-icon password-icon-visible d-none" aria-hidden="true"></i>
              </button>
            </div>
          </div>
          <div class="form-check mb-4">
            <input class="form-check-input" type="checkbox" id="remember_me" name="remember_me" checked>
            <label class="form-check-label" for="remember_me">{{_('Remember Me')}}</label>
          </div>
          <div class="d-flex flex-wrap gap-2">
            <button type="submit" name="submit" class="btn btn-primary">{{_('Login')}}</button>
            {% if config.config_login_type == 0 and mail%}
            <button type="submit" name="forgot" value="forgot" class="btn btn-outline-secondary">{{_('Forgot Password?')}}</button>
            {% endif %}
          </div>
          {% if config.config_remote_login or config.config_login_type == 2 %}
          <div class="login-secondary-actions d-flex flex-wrap align-items-center gap-3 mt-4">
            {% if config.config_remote_login %}
            <a href="{{url_for('remotelogin.remote_login')}}" id="remote_login">{{_('Log in with Magic Link')}}</a>
            {% endif %}
            {% if config.config_login_type == 2 %}
            <div class="oauth-login-links d-flex align-items-center gap-2 ms-auto">
              {% if 1 in oauth_check %}
                <a href="{{url_for('oauth.github_login')}}" class="github" aria-label="{{_('Log in with GitHub')}}">
                  <svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true">
                    <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
                  </svg>
                </a>
              {% endif %}
              {% if 2 in oauth_check %}
                <a href="{{url_for('oauth.google_login')}}" class="google" aria-label="{{_('Log in with Google')}}">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                 width="40" height="40"
                 viewBox="0 3 48 49"
                 style="fill:#000000;"><g id="surface1"><path style=" fill:#FFC107;" d="M 43.609375 20.082031 L 42 20.082031 L 42 20 L 24 20 L 24 28 L 35.304688 28 C 33.652344 32.65625 29.222656 36 24 36 C 17.371094 36 12 30.628906 12 24 C 12 17.371094 17.371094 12 24 12 C 27.058594 12 29.84375 13.152344 31.960938 15.039063 L 37.617188 9.382813 C 34.046875 6.054688 29.269531 4 24 4 C 12.953125 4 4 12.953125 4 24 C 4 35.046875 12.953125 44 24 44 C 35.046875 44 44 35.046875 44 24 C 44 22.660156 43.863281 21.351563 43.609375 20.082031 Z "></path><path style=" fill:#FF3D00;" d="M 6.304688 14.691406 L 12.878906 19.511719 C 14.65625 15.109375 18.960938 12 24 12 C 27.058594 12 29.84375 13.152344 31.960938 15.039063 L 37.617188 9.382813 C 34.046875 6.054688 29.269531 4 24 4 C 16.316406 4 9.65625 8.335938 6.304688 14.691406 Z "></path><path style=" fill:#4CAF50;" d="M 24 44 C 29.164063 44 33.859375 42.023438 37.410156 38.808594 L 31.21875 33.570313 C 29.210938 35.089844 26.714844 36 24 36 C 18.796875 36 14.382813 32.683594 12.71875 28.054688 L 6.195313 33.078125 C 9.503906 39.554688 16.226563 44 24 44 Z "></path><path style=" fill:#1976D2;" d="M 43.609375 20.082031 L 42 20.082031 L 42 20 L 24 20 L 24 28 L 35.304688 28 C 34.511719 30.238281 33.070313 32.164063 31.214844 33.570313 C 31.21875 33.570313 31.21875 33.570313 31.21875 33.570313 L 37.410156 38.808594 C 36.972656 39.203125 44 34 44 24 C 44 22.660156 43.863281 21.351563 43.609375 20.082031 Z "></path></g></svg>
                </a>
              {% endif %}
            </div>
            {% endif %}
          </div>
          {% endif %}
        </form>
      </div>
    </div>
  </div>
</div>
  {% if error %}
  <div class="row justify-content-center mt-3">
    <div class="col-12 col-lg-8 col-xl-6">
      <div class="alert alert-danger">{{error}}</div>
    </div>
  </div>
  {% endif %}
{% endblock %}