{% extends 'base.twig' %}

{% block navbar %}{% endblock %}

{% block content %}
<div class="row mb-4" style="margin-top: 60px">
  <div class="col-12 col-md-7 col-lg-6 col-xl-5 ms-auto me-auto">
    <div class="card">
      <div class="card-header d-flex align-items-center">
        <i class="bi bi-person-fill me-2"></i> {{ lang.login.reset_password }}
        <div class="ms-auto form-check form-switch my-auto d-flex align-items-center">
          <label class="form-check-label"><i class="bi bi-moon-fill"></i></label>
          <input class="form-check-input ms-2" type="checkbox" id="dark-mode-toggle">
        </div>
      </div>
      <div class="card-body">
        <div class="text-center mailcow-logo mb-4">
          <img class="main-logo" src="{{ logo|default('/img/cow_mailcow.svg') }}" alt="mailcow">
          <img class="main-logo-dark" src="{{ logo_dark|default('/img/cow_mailcow.svg') }}" alt="mailcow-logo-dark">
        </div>
        <legend>{{ ui_texts.main_name|raw }}</legend><hr />

        {% if is_reset_token_valid %}
        <form method="post" autofill="off">
          <input type="hidden" name="token" value="{{ reset_token }}" />
          <input type="password" autocorrect="off" autocapitalize="none" class="form-control mb-2" name="new_password" placeholder="{{ lang.login.new_password }}" />
          <input type="password" autocorrect="off" autocapitalize="none" class="form-control mb-2" name="new_password2" placeholder="{{ lang.login.new_password_confirm }}" />

          <small id="mismatch_alert" class="text-danger d-none">{{ lang.login.password_mismatch }}</small>
          <div class="d-flex justify-content-end mt-4" style="position: relative">
            <button type="submit" class="btn btn-xs-lg d-block d-sm-inline btn-success" name="pw_reset">{{ lang.login.reset_password }}</button>
          </div>
        </form>
        {% elseif reset_token is null %}
        <form method="post" autofill="off">
          <input type="text" autocorrect="off" autocapitalize="none" class="form-control mb-2" name="username" placeholder="{{ lang.login.username }}" />

          <div class="d-flex justify-content-end mt-4" style="position: relative">
            <button type="submit" class="btn btn-xs-lg d-block d-sm-inline btn-success" name="pw_reset_request">{{ lang.login.request_reset_password }}</button>
          </div>
        </form>
        {% else %}
        <p class="text-center">{{ lang.login.invalid_pass_reset_token|raw }}</p>
        <a href="/">{{ lang.login.back_to_mailcow }}</a>
        {% endif %}


      </div>
    </div>
  </div>
</div>

<script type='text/javascript'>
  var csrf_token = '{{ csrf_token }}';
  var mailcow_cc_username = '{{ mailcow_cc_username }}';
</script>
{% endblock %}