{% extends "base.html" %}
{% import "macros/admin_pagination_footer.html" as pag %}

{% block page_title %}Favorites{% endblock %}

{% block content %}
<main data-plugin="favorites" class="favorites-page" aria-labelledby="favorites-title"
      data-products-per-row-desktop="{{ plugin_settings.products_per_row_desktop | default(value='auto') }}"
      data-products-per-row-mobile="{{ plugin_settings.products_per_row_mobile | default(value='auto') }}">
  <header class="favorites-header">
    <div><h1 id="favorites-title">Favorites</h1><p>Your saved products, ready when you need them.</p></div>
    <a class="blocks-button blocks-button-secondary" href="/plugins/catalog/all-products">Browse products</a>
  </header>
  {% if error %}<p role="alert">{{ error }}</p>{% endif %}
  <div class="favorites-grid">
    {% for item in items %}
    <article class="favorites-product sf-prod-card ap-compact-card" data-favorite-card data-product-id="{{ item.product_id }}" data-product-base-id="{{ item.product_id }}" data-variant-id="0">
      <a class="sf-prod-img fit-contain" href="{{ item.href }}" aria-label="View {{ item.title }}">
        <img src="{{ item.image }}" alt="{{ item.title }}" loading="lazy" width="240" height="180">
        {% if item.dietary_type == "veg" %}<span class="catalog-dietary-indicator catalog-dietary-indicator--veg" role="img" aria-label="Vegetarian"><span class="catalog-dietary-indicator__mark" aria-hidden="true"><span></span></span></span>{% elif item.dietary_type == "non_veg" %}<span class="catalog-dietary-indicator catalog-dietary-indicator--non_veg" role="img" aria-label="Non-vegetarian"><span class="catalog-dietary-indicator__mark" aria-hidden="true"><span></span></span></span>{% endif %}
      </a>
      <a class="sf-prod-title" href="{{ item.href }}">{{ item.title }}</a>
      <div class="favorites-variant-select favorites-variant-select--empty" aria-hidden="true"></div>
      <div class="sf-prod-price-row">
        <div class="sf-price-group"><span class="sf-prod-price">{{ settings.currency_symbol | default(value='₹') }}{{ item.mrp }}</span></div>
        <div class="sf-actions-wrapper" data-product-id="{{ item.product_id }}" data-qty="0">
          <button type="button" class="sf-add-btn" data-favorite-cart-action data-product-id="{{ item.product_id }}">ADD</button>
          <div class="sf-qty-control">
            <button type="button" class="sf-qty-btn" aria-label="Remove one" onclick="window.updateCart({{ item.product_id }}, -1)">-</button>
            <span class="sf-qty-display">0</span>
            <button type="button" class="sf-qty-btn" aria-label="Add one" onclick="window.updateCart({{ item.product_id }}, 1)">+</button>
          </div>
        </div>
      </div>
      <div class="sf-prod-delivery favorites-delivery-date sf-prod-delivery--empty" aria-hidden="true"></div>
      <p class="favorites-cart-status" role="status" aria-live="polite"></p>
    </article>
    {% endfor %}
  </div>
  {% if not error %}<p class="favorites-empty" data-favorites-empty {% if items | length > 0 %}hidden{% endif %}>No favorites on this page. Browse products to save more, or choose another page.</p>{% endif %}
  {{ pag::simple_footer(prefix="favorites", page=page, total_pages=total_pages, total=total, item_label="favorites") }}
</main>
{% endblock %}

{% block scripts %}
<script src="/static/js/blocks-admin-pagination.js"></script>
{% endblock %}