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

{% block title %}About{% endblock %}
{% block meta_description %}Learn about Radiuma — Visualized & Standardized Environment for Radiomics Analysis, developed at UBC and BC Cancer Research Institute.{% endblock %}

{% block content %}

{% for section in about_sections %}

{% if section.section_type == "hero" %}
<section class="page-hero" aria-labelledby="page-hero-heading">
  <div class="page-hero-blobs" aria-hidden="true">
    <div class="blob blob--1"></div>
    <div class="blob blob--2"></div>
    <img src="{% static 'images/blob-blue-2.svg' %}" class="blob-img blob-img--page-hero" alt="" />
    <img src="{% static 'images/abstract-shapes-2.svg' %}" class="blob-img blob-img--page-corner" alt="" />
  </div>
  <div class="container">
    <div class="page-hero-content">
      {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
      {% if section.title %}<h1 class="page-hero-title" id="page-hero-heading">{{ section.title }}</h1>{% endif %}
      {% if section.subtitle %}<p class="page-hero-subtitle">{{ section.subtitle }}</p>{% endif %}
      {% if section.content %}<div class="rich-content page-hero-body" data-readmore="160">{{ section.rendered_content }}</div>{% endif %}
    </div>
  </div>
</section>

{% elif section.section_type == "intro" %}
<section class="section" aria-labelledby="about-intro-{{ section.pk }}-heading">
  <div class="container">
    <div class="about-intro glass-card fade-in">
      <div class="about-intro-text">
        {% if section.title %}<h2 id="about-intro-{{ section.pk }}-heading">{{ section.title }}</h2>{% endif %}
        {% if section.content %}
        <div class="rich-content" data-readmore="200">{{ section.rendered_content }}</div>
        {% endif %}
      </div>
    </div>
  </div>
</section>

{% elif section.section_type == "grid" %}
<section class="section" aria-labelledby="grid-{{ section.pk }}-heading">
  <div class="container">
    {% if section.badge or section.title %}
    <div class="section-header">
      {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
      {% if section.title %}<h2 class="section-title" id="grid-{{ section.pk }}-heading">{{ section.title }}</h2>{% endif %}
    </div>
    {% endif %}
    {% if section.content %}<div class="rich-content" data-readmore="200">{{ section.rendered_content }}</div>{% endif %}
    {% with items=section.items.all %}
    {% if items %}
    <div class="standards-grid">
      {% for item in items %}
      <div class="standard-card glass-card fade-in">
        {% if item.badge %}<div class="standard-badge">{{ item.badge }}</div>{% endif %}
        {% if item.title %}<h3 class="standard-title">{{ item.title }}</h3>{% endif %}
        {% if item.content %}<p class="standard-desc" data-readmore="88">{{ item.content }}</p>{% endif %}
      </div>
      {% endfor %}
    </div>
    {% endif %}
    {% endwith %}
  </div>
</section>

{% elif section.section_type == "history" %}
<section class="section" aria-labelledby="history-{{ section.pk }}-heading">
  <div class="container">
    <div class="history-block glass-card fade-in">
      <div class="history-content">
        {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
        {% if section.title %}<h2 id="history-{{ section.pk }}-heading">{{ section.title }}</h2>{% endif %}
        {% if section.content %}<div class="rich-content" data-readmore="200">{{ section.rendered_content }}</div>{% endif %}
        {% with links=section.items.all %}
        {% if links %}
        <div class="history-links">
          {% for link in links %}
          {% if link.url %}
          <a href="{{ link.url }}" class="btn-ghost" target="_blank" rel="noopener noreferrer">{{ link.title }}</a>
          {% endif %}
          {% endfor %}
        </div>
        {% endif %}
        {% endwith %}
      </div>
      <div class="history-visual" aria-hidden="true">
        <div class="history-blob history-blob--1"></div>
        <div class="history-blob history-blob--2"></div>
        {% if section.subtitle %}<div class="history-year">{{ section.subtitle }}</div>{% endif %}
      </div>
    </div>
  </div>
</section>

{% elif section.section_type == "custom" %}
<section class="section" aria-labelledby="custom-{{ section.pk }}-heading">
  <div class="container">
    {% if section.badge or section.title %}
    <div class="section-header">
      {% if section.badge %}<div class="section-badge">{{ section.badge }}</div>{% endif %}
      {% if section.title %}<h2 class="section-title" id="custom-{{ section.pk }}-heading">{{ section.title }}</h2>{% endif %}
    </div>
    {% endif %}
    {% if section.content %}
    <div class="glass-card fade-in about-custom-card">
      <div class="rich-content" data-readmore="200">{{ section.rendered_content }}</div>
    </div>
    {% endif %}
    {% with items=section.items.all %}
    {% if items %}
    <div class="standards-grid" style="margin-top: 1.5rem;">
      {% for item in items %}
      <div class="standard-card glass-card fade-in">
        {% if item.badge %}<div class="standard-badge">{{ item.badge }}</div>{% endif %}
        {% if item.title %}<h3 class="standard-title">{{ item.title }}</h3>{% endif %}
        {% if item.content %}<p class="standard-desc" data-readmore="88">{{ item.content }}</p>{% endif %}
        {% if item.url %}<a href="{{ item.url }}" class="btn-ghost btn--sm" style="margin-top: 0.75rem;" target="_blank" rel="noopener noreferrer">{{ item.title }}</a>{% endif %}
      </div>
      {% endfor %}
    </div>
    {% endif %}
    {% endwith %}
  </div>
</section>

{% endif %}
{% empty %}
<section class="section">
  <div class="container">
    <p style="color: var(--text-secondary); text-align: center; padding: 4rem 0;">
      No content configured yet. Add sections in the admin panel.
    </p>
  </div>
</section>
{% endfor %}

{% endblock %}