{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Reset Password - {{white_label_company_name}} Dashboard</title>
    <link rel="apple-touch-icon" sizes="180x180" href="{% if white_label_company.icon %}{{white_label_company.icon.url}} {% else %}{% static 'favicons/apple-touch-icon.png' %}{% endif %}">
    <link rel="icon" type="image/png" sizes="32x32" href="{% if white_label_company.icon %}{{white_label_company.icon.url}} {% else %}{% static 'favicons/favicon-32x32.png' %}{% endif %}">
    <link rel="icon" type="image/png" sizes="16x16" href="{% if white_label_company.icon %}{{white_label_company.icon.url}} {% else %}{% static 'favicons/favicon-16x16.png' %}{% endif %}">
    <link rel="stylesheet" href="{% static 'build/css/style.min.css' %}" />
    <style>
      ul.errorlist {
      color: #d9534f;
      background-color: #f0d8d8;
      border-color: #d6e9c6;padding: 15px;
      margin-bottom: 20px;
      border: 1px solid transparent;
      border-radius: 4px;

    }
    ul{
      list-style-type: none;
    }
    </style>
  </head>
  <body>
    <div id="main">
      <main class="oh-auth">
          <div class="oh-auth-card">
            <h1 class="oh-onboarding-card__title oh-onboarding-card__title--h2 text-center my-3">{% trans "Reset Password" %}</h1>
            <p class="text-muted text-center">{% trans "Enter your new password to reset" %}</p>
            <form method='post' class="oh-form-group" onsubmit="event.stopPropagation()">
              {% csrf_token %}
              <div class="oh-input-group">
                <label class="oh-label" for="password">{% trans "New Password" %}</label>
                <div class="oh-password-input-container">
                  {{form.new_password1}}
                  <a
                  href="#"
                  class="oh-btn oh-btn--transparent oh-password-input--toggle"
                  >
                  <ion-icon
                  class="oh-passowrd-input__show-icon"
                  title="Show Password"
                  name="eye-outline"
                  ></ion-icon>
                  <ion-icon
                  class="oh-passowrd-input__hide-icon d-none"
                  title="Hide Password"
                  name="eye-off-outline"
                  ></ion-icon>
                </a>
              </div>
              {{form.new_password1.errors}}
              </div>

              <div class="oh-input-group">
                <label class="oh-label" for="confirmPassword">{% trans "Confirm New Password" %}</label>
                <div class="oh-password-input-container">
                  {{form.new_password2}}
                  <a
                  href="#"
                  class="oh-btn oh-btn--transparent oh-password-input--toggle"
                  >
                  <ion-icon
                  class="oh-passowrd-input__show-icon"
                  title="Show Password"
                  name="eye-outline"
                  ></ion-icon>
                  <ion-icon
                  class="oh-passowrd-input__hide-icon d-none"
                  title="Hide Password"
                  name="eye-off-outline"
                  ></ion-icon>
                </a>
              </div>
              {{form.new_password2.errors}}
              </div>

              <button
              href="#"
              class="oh-btn oh-onboarding-card__button mt-4 oh-btn--secondary oh-btn--shadow w-100 mb-4"
              role="button"
            >
             {% trans "Reset my password" %}
            </button>
            </form>
          </div>
      </main>
    </div>
    <script src="{% static 'build/js/web.frontend.min.js' %}"></script>    <script
      type="module"
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
    ></script>
    <script></script>
  </body>
</html>
