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

{% block title %}Products{% endblock %}
{% block meta_description %}Explore Tecvico's suite of medical imaging and radiomics software products.{% endblock %}

{% block content %}

<section class="page-hero" aria-labelledby="products-overview-heading">
  <div class="page-hero-blobs" aria-hidden="true">
    <div class="blob blob--1"></div>
    <div class="blob blob--2"></div>
  </div>
  <div class="container">
    <div class="page-hero-content">
      <div class="section-badge">Software Suite</div>
      <h1 class="page-hero-title" id="products-overview-heading">Our Products</h1>
      <p class="page-hero-subtitle">Advanced tools for medical imaging research and radiomics analysis.</p>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="products-list-heading">
  <div class="container">
    <h2 class="sr-only" id="products-list-heading">Product List</h2>
    {% if main_products %}
    <div class="products-overview-grid">
      {% for product in main_products %}
      <div class="product-overview-card glass-card fade-in">
        {% if product.image %}
        <div class="product-overview-image">
          <img src="{{ product.image.url }}" alt="{{ product.name }}" loading="lazy" />
        </div>
        {% endif %}
        <div class="product-overview-body">
          <h2 class="product-overview-title">{{ product.name }}</h2>
          <p class="product-overview-short">{{ product.short_description }}</p>
          <p class="product-overview-desc">{{ product.description }}</p>
          <a href="{{ product.get_absolute_url }}" class="btn-primary">Explore {{ product.name }}</a>
        </div>
        {% with subs=product.sub_products.all %}
        {% if subs %}
        <div class="product-overview-subs">
          <h3 class="product-overview-subs-title">Modules</h3>
          <ul class="product-overview-subs-list" role="list">
            {% for sub in subs %}
            {% if sub.is_active %}
            <li>
              <a href="{{ sub.get_absolute_url }}" class="sub-link-chip">
                {{ sub.name }}
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                  <path d="M2.5 6H9.5M9.5 6L7 3.5M9.5 6L7 8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </a>
            </li>
            {% endif %}
            {% endfor %}
          </ul>
        </div>
        {% endif %}
        {% endwith %}
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="empty-state-block glass-card">
      <p>No products available at this time. Check back soon.</p>
    </div>
    {% endif %}
  </div>
</section>

{% endblock %}