{{ header }}

<main id="account-authorize-reset" class="franklin-account-page franklin-authorize-status-page">
  <div class="container">
    <section class="authorize-status-shell authorize-status-warning">

      <div class="authorize-status-visual">
        <span class="authorize-status-eyebrow">
          <i class="bi bi-shield-exclamation"></i>
          Account Security
        </span>

        <div class="authorize-status-visual-icon">
          <i class="bi bi-lock-fill"></i>
        </div>

        <h1>{{ text_locked }}</h1>
        <p>{{ text_reset }}</p>

        <div class="authorize-status-points">
          <div><i class="bi bi-shield-lock-fill"></i><span>Your account is currently protected by a security lock.</span></div>
          <div><i class="bi bi-arrow-repeat"></i><span>Use the reset button to begin the secure recovery process.</span></div>
          <div><i class="bi bi-check-circle-fill"></i><span>Follow the next instructions carefully to regain access.</span></div>
        </div>
      </div>

      <section class="authorize-status-card">
        <div id="alert" class="authorize-status-alert-area"></div>

        <div class="authorize-status-card-icon warning">
          <i class="bi bi-key-fill"></i>
        </div>

        <span class="authorize-status-label">Security Reset Required</span>
        <h2>{{ text_locked }}</h2>
        <p>{{ text_reset }}</p>

        <button type="button" id="button-reset" class="btn authorize-status-reset-button">
          <i class="bi bi-arrow-counterclockwise"></i>
          <span>{{ button_reset }}</span>
        </button>

        <div class="authorize-status-help">
          <i class="bi bi-info-circle"></i>
          <span>Please wait for the reset request to complete before leaving this page.</span>
        </div>
      </section>

    </section>
  </div>
</main>

<script type="text/javascript"><!--
$('#button-reset').on('click', function(e) {
    e.preventDefault();

    var button = this;
    var originalHtml = $(button).html();

    $.ajax({
        url: 'index.php?route=account/authorize.confirm&language={{ language }}',
        dataType: 'json',

        beforeSend: function() {
            $('#alert').empty();
            $(button)
                .prop('disabled', true)
                .html('<span class="spinner-border spinner-border-sm" aria-hidden="true"></span><span> Processing...</span>');
        },

        complete: function() {
            $(button).prop('disabled', false).html(originalHtml);
        },

        success: function(json) {
            $('#alert').empty();

            if (json['redirect']) {
                window.location = json['redirect'];
                return;
            }

            if (json['error']) {
                $('#alert').html(
                    '<div class="alert alert-danger alert-dismissible fade show authorize-status-alert" role="alert">' +
                        '<i class="bi bi-exclamation-circle-fill"></i>' +
                        '<span>' + json['error'] + '</span>' +
                        '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                    '</div>'
                );
            }

            if (json['success']) {
                $('#alert').html(
                    '<div class="alert alert-success alert-dismissible fade show authorize-status-alert" role="alert">' +
                        '<i class="bi bi-check-circle-fill"></i>' +
                        '<span>' + json['success'] + '</span>' +
                        '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                    '</div>'
                );
            }
        },

        error: function(xhr, ajaxOptions, thrownError) {
            console.error(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            $('#alert').html(
                '<div class="alert alert-danger alert-dismissible fade show authorize-status-alert" role="alert">' +
                    '<i class="bi bi-exclamation-circle-fill"></i>' +
                    '<span>Unable to reset the account authorization. Please try again.</span>' +
                    '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                '</div>'
            );
        }
    });
});
//--></script>

{{ footer }}