{% extends 'layout/base.html' %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/changelog.css') }}" />
{% endblock %}

{% block content %}
<div class="row">
  <!-- Sidebar with version navigation -->
  <div class="col-lg-3 col-md-4 d-none d-md-block">
    <div class="changelog-nav sticky-top" style="top: 24px;">
      <h6 class="text-body-secondary text-uppercase mb-3">Versions</h6>
      <nav class="nav flex-column">
        {% for version_data in changelog_versions %}
        <a class="nav-link changelog-nav-link" href="#{{ version_data.version }}">
          {{ version_data.version }}
          <span class="text-body-secondary small d-block">{{ version_data.date }}</span>
        </a>
        {% endfor %}
      </nav>
    </div>
  </div>

  <!-- Main content -->
  <div class="col-lg-9 col-md-8">
    <div class="d-flex align-items-center justify-content-between mb-4">
      <div>
        <h1 class="h3 mb-1">Changelog</h1>
        <div class="text-body-secondary">Release history and updates</div>
      </div>
    </div>

    {% if changelog_versions %}
      {% for version_data in changelog_versions %}
      <div class="card changelog-version-card mb-4" id="{{ version_data.version }}">
        <div class="card-header bg-primary text-white">
          <div class="d-flex align-items-center justify-content-between">
            <div>
              <h2 class="h4 mb-0">{{ version_data.version }}</h2>
            </div>
            <div class="text-end">
              <span class="badge bg-light text-dark">{{ version_data.date }}</span>
            </div>
          </div>
        </div>
        <div class="card-body">
          {% if version_data.summary %}
          <div class="changelog-summary mb-4">
            <p class="lead">{{ version_data.summary }}</p>
          </div>
          {% endif %}

          {% for section in version_data.sections %}
          <div class="changelog-section mb-4">
            <h3 class="h5 mb-3">
              {% if section.type %}
              <span class="badge changelog-badge-{{ section.type }}">{{ section.title }}</span>
              {% else %}
              {{ section.title }}
              {% endif %}
            </h3>

            {% if section.subsections %}
              {% for subsection in section.subsections %}
              <div class="changelog-subsection mb-3">
                {% if subsection.subtitle %}
                <h4 class="h6 text-body-secondary mb-2">{{ subsection.subtitle }}</h4>
                {% endif %}
                {% if subsection.changes %}
                <ul class="changelog-list">
                  {% for change in subsection.changes %}
                  <li>{{ change }}</li>
                  {% endfor %}
                </ul>
                {% endif %}
              </div>
              {% endfor %}
            {% elif section.changes %}
              <ul class="changelog-list">
                {% for change in section.changes %}
                <li>{{ change }}</li>
                {% endfor %}
              </ul>
            {% endif %}
          </div>
          {% endfor %}
        </div>
      </div>
      {% endfor %}
    {% else %}
      <div class="alert alert-info" role="alert">
        No changelog entries available.
      </div>
    {% endif %}
  </div>
</div>
{% endblock %}