{{ header }}

<main id="account-forgotten" class="franklin-account-page franklin-password-page">
  <div class="container">

    <nav class="franklin-breadcrumb account-breadcrumb" aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item {% if loop.last %}active{% endif %}">
            {% if loop.last %}
              {{ breadcrumb.text }}
            {% else %}
              <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
            {% endif %}
          </li>
        {% endfor %}
      </ol>
    </nav>

    {{ content_top }}

    <section class="password-recovery-shell">

      <div class="password-recovery-visual">
        <span class="password-recovery-eyebrow">
          <i class="bi bi-shield-lock-fill"></i>
          Secure Account Recovery
        </span>

        <div class="password-recovery-visual-icon">
          <i class="bi bi-envelope-lock"></i>
        </div>

        <h1>{{ heading_title }}</h1>

        <p>{{ text_email }}</p>

        <div class="password-recovery-steps">
          <div>
            <span>1</span>
            <div>
              <strong>Enter your email</strong>
              <small>Use the email address registered with your Franklin account.</small>
            </div>
          </div>

          <div>
            <span>2</span>
            <div>
              <strong>Check your inbox</strong>
              <small>We will send password recovery instructions to your email.</small>
            </div>
          </div>

          <div>
            <span>3</span>
            <div>
              <strong>Create a new password</strong>
              <small>Follow the secure link and choose a strong new password.</small>
            </div>
          </div>
        </div>

        <div class="password-recovery-note">
          <i class="bi bi-info-circle"></i>
          <span>For your security, recovery instructions are sent only to the registered email address.</span>
        </div>
      </div>

      <section class="password-recovery-card">
        <div class="password-recovery-card-icon">
          <i class="bi bi-envelope-arrow-up"></i>
        </div>

        <div class="password-recovery-card-heading">
          <h2>{{ text_your_email }}</h2>
          <p>Enter your registered email address to continue.</p>
        </div>

        <form id="form-forgotten"
              action="{{ confirm }}"
              method="post"
              data-oc-toggle="ajax"
              class="password-recovery-form">

          <div class="password-form-group required">
            <label for="input-email">{{ entry_email }}</label>

            <div class="password-input-wrap">
              <i class="bi bi-envelope"></i>
              <input type="email"
                     name="email"
                     value=""
                     placeholder="{{ entry_email }}"
                     id="input-email"
                     class="form-control"
                     autocomplete="email"/>
            </div>

            <div id="error-email" class="invalid-feedback"></div>
          </div>

          <div class="password-form-actions">
            <a href="{{ back }}" class="btn password-secondary-button">
              <i class="bi bi-arrow-left"></i>
              {{ button_back }}
            </a>

            <button type="submit" class="btn btn-primary password-primary-button">
              <i class="bi bi-send-check"></i>
              {{ button_continue }}
            </button>
          </div>

        </form>

        <div class="password-recovery-help">
          <i class="bi bi-shield-check"></i>
          <span>Your email address is used only to verify and recover your account.</span>
        </div>
      </section>

    </section>

    {{ content_bottom }}

  </div>
</main>

{{ footer }}