{{ header }}

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

    <div id="wishlist-alert"></div>

    {{ content_top }}

    <section class="wishlist-hero">
      <div class="wishlist-hero-content">
        <span class="wishlist-eyebrow">
          <i class="bi bi-heart-fill"></i>
          Saved Favourites
        </span>

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

        <p>
          Keep your preferred Franklin products together, review availability and add them to your cart when ready.
        </p>
      </div>

      <div class="wishlist-hero-icon" aria-hidden="true">
        <i class="bi bi-heart"></i>
      </div>
    </section>

    <div class="wishlist-layout">

      <aside class="wishlist-info-card">
        <span class="wishlist-info-icon">
          <i class="bi bi-bookmark-heart"></i>
        </span>

        <h2>Your Saved Products</h2>

        <p>
          Use your wishlist to keep track of products you may wish to purchase later.
        </p>

        <div class="wishlist-info-list">
          <div>
            <i class="bi bi-bag-plus"></i>
            <span>
              <strong>Add to Cart</strong>
              <small>Move an available product directly into your shopping cart.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-box-seam"></i>
            <span>
              <strong>Check Availability</strong>
              <small>Review each product’s current stock information.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-trash3"></i>
            <span>
              <strong>Manage Favourites</strong>
              <small>Remove products that are no longer required.</small>
            </span>
          </div>
        </div>

        <a href="{{ continue }}" class="btn wishlist-back-button">
          <i class="bi bi-arrow-left"></i>
          {{ button_continue }}
        </a>
      </aside>

      <section class="wishlist-products-card">

        <div class="wishlist-products-heading">
          <span class="wishlist-products-heading-icon">
            <i class="bi bi-grid"></i>
          </span>

          <div>
            <h2>Wishlist Products</h2>
            <p>Review saved products and choose your next action.</p>
          </div>
        </div>

        <div id="wishlist"
             class="wishlist-content"
             data-list-url="{{ wishlist_list }}">
          {{ list }}
        </div>

        <div class="wishlist-footer-action">
          <a href="{{ continue }}" class="btn btn-primary">
            <i class="bi bi-arrow-left"></i>
            {{ button_continue }}
          </a>
        </div>

      </section>

    </div>

    {{ content_bottom }}

  </div>
</main>

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

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

    $.ajax({
        url: $(element).attr('href'),
        dataType: 'json',

        beforeSend: function() {
            $('#wishlist-alert').empty();

            $(element)
                .addClass('is-loading')
                .attr('aria-disabled', 'true')
                .html(
                    '<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>' +
                    '<span> Removing...</span>'
                );
        },

        complete: function() {
            $(element)
                .removeClass('is-loading')
                .removeAttr('aria-disabled')
                .html(originalHtml);
        },

        success: function(json) {
            if (json['error']) {
                $('#wishlist-alert').html(
                    '<div class="alert alert-danger alert-dismissible fade show wishlist-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']) {
                $('#wishlist-alert').html(
                    '<div class="alert alert-success alert-dismissible fade show wishlist-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>'
                );

                $('#wishlist').load(
                    $('#wishlist').attr('data-list-url')
                );

                // Update the header wishlist count immediately.
                if (typeof json['total'] !== 'undefined') {
                    var matches = String(json['total']).match(/\d+/);
                    var wishlistCount = matches ? parseInt(matches[0], 10) : 0;

                    $('#wishlist-count')
                        .text(wishlistCount)
                        .toggleClass('d-none', wishlistCount < 1);
                }
            }
        },

        error: function(xhr, ajaxOptions, thrownError) {
            console.error(
                thrownError + "\r\n" +
                xhr.statusText + "\r\n" +
                xhr.responseText
            );

            $('#wishlist-alert').html(
                '<div class="alert alert-danger alert-dismissible fade show wishlist-alert" role="alert">' +
                    '<i class="bi bi-exclamation-circle-fill"></i>' +
                    '<span>Unable to remove this product. Please try again.</span>' +
                    '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                '</div>'
            );
        }
    });
});
//--></script>

{{ footer }}