{{ header }}

<main id="account-login" class="franklin-account-page franklin-login-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>

    {% if success %}
      <div class="alert alert-success alert-dismissible fade show login-alert" role="alert">
        <i class="bi bi-check-circle-fill"></i>
        <span>{{ success }}</span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endif %}

    {% if error_warning %}
      <div class="alert alert-danger alert-dismissible fade show login-alert" role="alert">
        <i class="bi bi-exclamation-circle-fill"></i>
        <span>{{ error_warning }}</span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endif %}

    {{ content_top }}

    <section class="franklin-login-shell">

      <div class="franklin-register-panel">
        <span class="login-eyebrow">
          <i class="bi bi-leaf-fill"></i>
          Welcome to Franklin
        </span>

        <div class="register-panel-icon">
          <i class="bi bi-person-plus"></i>
        </div>

        <h1>{{ text_new_customer }}</h1>

        <h2>{{ text_register }}</h2>

        <p>{{ text_register_account }}</p>

        <div class="register-benefits">
          <div>
            <i class="bi bi-bag-check-fill"></i>
            <span>
              <strong>Faster Checkout</strong>
              <small>Save your details for a quicker shopping experience.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-truck"></i>
            <span>
              <strong>Order Tracking</strong>
              <small>Review and track your Franklin purchases.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-heart-fill"></i>
            <span>
              <strong>Save Favourites</strong>
              <small>Keep your preferred herbal products in your wishlist.</small>
            </span>
          </div>
        </div>

        <a href="{{ register }}" class="btn register-account-button">
          <i class="bi bi-person-plus-fill"></i>
          {{ button_continue }}
        </a>
      </div>

      <section class="franklin-login-card">
        <div class="login-card-icon">
          <i class="bi bi-person-lock"></i>
        </div>

        <div class="login-card-heading">
          <span>Customer Login</span>
          <h2>{{ text_returning_customer }}</h2>
          <p>{{ text_i_am_returning_customer }}</p>
        </div>

        <form id="form-login"
              action="{{ login }}"
              method="post"
              data-oc-toggle="ajax"
              class="franklin-login-form">

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

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

          <div class="login-form-group">
            <div class="login-label-row">
              <label for="input-password">{{ entry_password }}</label>
              <a href="{{ forgotten }}" class="login-forgotten-link">
                {{ text_forgotten }}
              </a>
            </div>

            <div class="login-input-wrap">
              <i class="bi bi-lock"></i>

              <input type="password"
                     name="password"
                     value="{{ password }}"
                     placeholder="{{ entry_password }}"
                     id="input-password"
                     class="form-control"
                     autocomplete="current-password"/>

              <button type="button"
                      id="button-password-toggle"
                      class="login-password-toggle"
                      aria-label="Show password">
                <i class="bi bi-eye"></i>
              </button>
            </div>
          </div>

          {% if redirect %}
            <input type="hidden" name="redirect" value="{{ redirect }}"/>
          {% endif %}

          <button type="submit" class="btn btn-primary login-submit-button">
            <i class="bi bi-box-arrow-in-right"></i>
            {{ button_login }}
          </button>

        </form>

        <div class="login-security-note">
          <i class="bi bi-shield-check"></i>
          <span>Your account information is transmitted securely.</span>
        </div>

        <div class="login-mobile-register">
          <span>{{ text_new_customer }}</span>
          <a href="{{ register }}">{{ text_register }}</a>
        </div>
      </section>

    </section>

    {{ content_bottom }}

  </div>
</main>

<script type="text/javascript"><!--
$('#button-password-toggle').on('click', function() {
    var input = $('#input-password');
    var icon = $(this).find('i');

    if (input.attr('type') === 'password') {
        input.attr('type', 'text');
        icon.removeClass('bi-eye').addClass('bi-eye-slash');
        $(this).attr('aria-label', 'Hide password');
    } else {
        input.attr('type', 'password');
        icon.removeClass('bi-eye-slash').addClass('bi-eye');
        $(this).attr('aria-label', 'Show password');
    }
});
//--></script>

{{ footer }}