{% extends "public/base.html" %}
{% load static %}
{% block title %}Products — {{ site.site_name }}{% endblock %}
{% block meta_description %}Web solutions, digital assets, hosting plans and more — buy direct or register your interest.{% endblock %}

{% block extra_head %}
<style>
#load-more-btn {
    display: none;
    margin: 2rem auto 0;
    background: transparent; color: #033152;
    border: 2px solid #033152; border-radius: 999px;
    padding: .7rem 2.5rem; font-weight: 700; font-size: .95rem;
    cursor: pointer; transition: all .2s;
}
#load-more-btn:hover { background: #033152; color: #fff; }
</style>
{% endblock %}

{% block content %}
<div class="section-first-inner">

  <div class="section compact-bottom">
    <div class="hero-container">
      <div class="banner-inner" style="justify-content:flex-start;align-items:flex-end;flex-wrap:wrap">
        <div class="banner-inner-content" style="text-align:left">
          <h1>Products</h1>
        </div>
      </div>
    </div>
  </div>

  <div class="section">
    <div class="hero-container">
      <div class="d-flex flex-column gspace-2">

        {% if categories %}
        <div class="d-flex flex-wrap gap-2">
          <a href="{% url 'shop' %}" class="btn btn-sm {% if not cat_filter %}btn-accent{% else %}btn-accent-outline{% endif %}">All</a>
          {% for cat in categories %}
          <a href="?cat={{ cat.slug }}" class="btn btn-sm {% if cat_filter == cat.slug %}btn-accent{% else %}btn-accent-outline{% endif %}">{{ cat.name }}</a>
          {% endfor %}
        </div>
        {% endif %}

        {% if products %}
        <div class="row row-cols-lg-4 row-cols-md-2 row-cols-1 grid-spacer-2" id="shop-grid">
          {% for product in products %}
          <div class="col" style="{% if forloop.counter > 16 %}display:none{% endif %}" data-index="{{ forloop.counter }}">
            <div class="card card-pricing">

              <div class="sub-heading text-center justify-content-center">
                {% if product.product_type == 'subscription' %}
                <i class="{{ product.category.icon_class|default:'fa-solid fa-box' }}"></i>
                {% else %}
                <i class="{{ product.icon_class|default:'fa-solid fa-box' }}"></i>
                {% endif %}
                <h6 class="font-family-1 accent-color text-center">{{ product.category.name|default:product.get_product_type_display }}</h6>
              </div>

              <div class="card price-container">
                <div class="price-wrapper">
                  <span class="price">{{ product.name }}</span>
                  {% if product.badge %}<span style="display:inline-block;background:{{ product.badge_bg }};color:{{ product.badge_color }};border:1px solid {{ product.badge_color }}33;border-radius:99px;padding:.2rem .6rem;font-size:.65rem;font-weight:700;margin-top:.35rem">{{ product.badge }}</span>{% endif %}
                </div>
              </div>

              {% if product.is_auction %}
              <a href="{% url 'shop_product_detail' product.slug %}" class="btn btn-accent">Make an Enquiry</a>
              {% elif product.product_type == 'subscription' %}
              <a href="{% url 'shop_product_detail' product.slug %}" class="btn btn-accent">Subscribe</a>
              {% else %}
              <a href="{% url 'shop_product_detail' product.slug %}" class="btn btn-accent">Buy Now</a>
              {% endif %}

            </div>
          </div>
          {% endfor %}
        </div>

        <div style="text-align:center">
          <button id="load-more-btn" data-shown="16">Load More</button>
        </div>

        {% else %}
        <div class="text-center py-5">
          <p class="secondary-accent">No products available yet. Check back soon.</p>
        </div>
        {% endif %}

      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
  var btn    = document.getElementById('load-more-btn');
  var cards  = Array.from(document.querySelectorAll('#shop-grid .col'));
  var total  = cards.length;
  var shown  = 16;

  function update() {
    if (total > shown) {
      btn.style.display = 'inline-block';
      btn.dataset.shown = shown;
    } else {
      btn.style.display = 'none';
    }
  }

  update();

  btn.addEventListener('click', function () {
    var next = shown + 16;
    cards.forEach(function (card, i) {
      if (i >= shown && i < next) card.style.display = 'flex';
    });
    shown = next;
    update();
  });
}());
</script>
{% endblock %}