{% extends "base.html" %}

{% block title %}{{ section.title }} | {{ config.extra.site_title }}{% endblock title %}
{% block meta_description %}
<meta name="description" content="{{ section.description | default(value=config.description) }}" />
{% endblock meta_description %}

{% block content %}
{% set curriculum = load_data(path="data/math-dse-curriculum.json", format="json") %}
<section class="book-page">
  <div class="container">
    <nav class="book-breadcrumb" aria-label="Breadcrumb">
      <a href="{{ get_url(path='/') | safe }}">Home</a>
      <span class="book-breadcrumb__sep" aria-hidden="true">/</span>
      <span aria-current="page">{{ curriculum.title }}</span>
    </nav>

    <header class="book-header">
      <p class="section-kicker">Mathematics</p>
      <h1 class="section-title">{{ curriculum.title }}</h1>
      <p class="book-subtitle">{{ curriculum.subtitle }}</p>
      <p class="book-intro">{{ curriculum.intro }}</p>
    </header>

    <div class="book-strands">
      {% for strand in curriculum.strands %}
      <section class="book-strand" aria-labelledby="strand-{{ strand.id }}">
        <h2 id="strand-{{ strand.id }}" class="book-strand__title">{{ strand.title }}</h2>
        <ul class="book-chapter-list">
          {% for chapter in strand.chapters %}
          <li class="book-chapter-item{% if chapter.status != 'live' %} book-chapter-item--planned{% endif %}">
            {% if chapter.status == 'live' %}
            <a class="book-chapter-link" href="{{ get_url(path='math/' ~ chapter.slug ~ '/') | safe }}">
              <span class="book-chapter-link__title">{{ chapter.title }}</span>
              <span class="book-chapter-badge book-chapter-badge--live">Available</span>
            </a>
            {% else %}
            <span class="book-chapter-link book-chapter-link--disabled">
              <span class="book-chapter-link__title">{{ chapter.title }}</span>
              <span class="book-chapter-badge book-chapter-badge--planned">Coming soon</span>
            </span>
            {% endif %}
          </li>
          {% endfor %}
        </ul>
      </section>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock content %}