{% extends "base.html" %}
{% load static %}


{% block title %}{{ main_product.name }}{% endblock %}
{% block meta_description %}{{ main_product.short_description }}{% endblock %}

{% block content %}

<section class="page-hero" aria-labelledby="main-product-heading">
  <div class="page-hero-blobs" aria-hidden="true">
    <div class="blob blob--1"></div>
    <div class="blob blob--2"></div>
    <div class="blob blob--3"></div>
  </div>
  <div class="container">
    <nav class="breadcrumb" aria-label="Breadcrumb">
      <ol class="breadcrumb-list" role="list">
        <li><a href="{% url 'pages:home' %}">Home</a></li>
        <li aria-hidden="true" class="breadcrumb-sep">›</li>
        <li><a href="{% url 'products:overview' %}">Products</a></li>
        <li aria-hidden="true" class="breadcrumb-sep">›</li>
        <li aria-current="page">{{ main_product.name }}</li>
      </ol>
    </nav>
    <div class="page-hero-content">
      <div class="section-badge">Product</div>
      <h1 class="page-hero-title" id="main-product-heading">{{ main_product.name }}</h1>
      <p class="page-hero-subtitle">{{ main_product.short_description }}</p>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="product-desc-heading">
  <div class="container">
    <div class="product-detail-intro glass-card fade-in">
      <h2 class="sr-only" id="product-desc-heading">About {{ main_product.name }}</h2>
      <div class="product-detail-image">
        {% if main_product.image %}
        <img src="{{ main_product.image.url }}" alt="{{ main_product.name }}" loading="lazy" />
        {% else %}
        <img src="{% static 'images/logo.png' %}" alt="{{ main_product.name }} logo" loading="lazy" class="product-logo-img" />
        {% endif %}
      </div>
      <div class="product-detail-text">
        <div class="product-detail-desc rich-content" data-readmore="220">{{ main_product.rendered_description }}</div>
      </div>
    </div>
  </div>
</section>

{% with subs=main_product.sub_products.all %}
{% if subs %}
<section class="section" aria-labelledby="subproducts-heading">
  <div class="container">
    <div class="section-header">
      <div class="section-badge">Modules</div>
      <h2 class="section-title" id="subproducts-heading">{{ main_product.name }} Modules</h2>
      <p class="section-desc">
        Explore the different modules and capabilities within {{ main_product.name }}.
      </p>
    </div>
    <div class="subproducts-grid">
      {% for sub in subs %}
      {% if sub.is_active %}
      <a href="{{ sub.get_absolute_url }}" class="subproduct-card glass-card fade-in">
        {% if sub.image %}
        <div class="subproduct-card-image">
          <img src="{{ sub.image.url }}" alt="{{ sub.name }}" loading="lazy" />
        </div>
        {% endif %}
        <div class="subproduct-card-body">
          <h3 class="subproduct-card-title">{{ sub.name }}</h3>
          <p class="subproduct-card-desc" data-readmore="88">{{ sub.short_description }}</p>
          <span class="subproduct-card-link">
            Learn More
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
              <path d="M3 7H11M11 7L8 4M11 7L8 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </span>
        </div>
      </a>
      {% endif %}
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}
{% endwith %}

{% endblock %}