{% 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' %}">Projects</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">Project</div>
      <h1 class="page-hero-title" id="main-product-heading">{{ main_product.name }}</h1>
      <p class="page-hero-subtitle" {% if main_product.read_more_short_description %}data-readmore="110"{% endif %}>{{ main_product.short_description }}</p>
    </div>
  </div>
</section>

<section class="section main-product-layout" aria-labelledby="product-desc-heading">
  <div class="container">
    <div class="main-product-main">
      <div class="product-detail-intro glass-card fade-in">
        <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/com2care-logo.svg' %}" alt="{{ main_product.name }} logo" loading="lazy" class="product-logo-img" />
          {% endif %}
        </div>
        <div class="product-detail-text">
          <h2 id="product-desc-heading">About {{ main_product.name }}</h2>
          <div class="product-detail-desc rich-content" {% if main_product.read_more_description %}data-readmore="220"{% endif %}>{{ main_product.rendered_description }}</div>
        </div>
      </div>

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

{% include "partials/_page_videos.html" with videos=product_videos %}

{% if articles %}
<section class="section" aria-label="Project articles">
  <div class="container">
    {% include "products/_article_list.html" %}
  </div>
</section>
{% endif %}

{% 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" {% if sub.read_more_short_description %}data-readmore="88"{% endif %}>{{ 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 %}

<div class="container">
  {% include "partials/_people_section.html" with people=main_product.people.all eyebrow=site_branding.project_people_eyebrow title=site_branding.project_people_title heading_id="main-project-people" %}
</div>

{% endblock %}