---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/cover

### PAGE CONFIG ###
# Hero Section
hero:
  headline: "{{ site.brand.name }}"
  headline_accent: "updates"
  subheadline: "Release notes and version history for {{ site.brand.name }}"

# Updates Section
updates:
  empty_message: "No updates available yet"
  view_details: "View details"
  latest_badge: "Latest"
---

<!-- Hero Section -->
<section class="updates-hero py-5">
  <div class="container">
    <div class="row justify-content-center text-center mb-4">
      <div class="col-lg-10" data-lazy="@class animation-slide-up">
        <h1 class="h1 mb-3">
          {{ page.resolved.hero.headline }}
          <span class="text-gradient-rainbow">{{ page.resolved.hero.headline_accent }}</span>
        </h1>
        {% iftruthy page.resolved.hero.subheadline %}
          <p class="fs-5 text-muted mb-0">
            {{ page.resolved.hero.subheadline }}
          </p>
        {% endiftruthy %}
      </div>
    </div>
  </div>
</section>

<!-- Updates List Section -->
<section class="py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        {% if site.updates %}
          {% assign updates = site.updates | sort: 'update.date' | reverse %}
        {% else %}
          {% assign updates = nil %}
        {% endif %}

        {% if updates and updates.size > 0 %}
          <div id="updates-list">
            {% for item in updates %}
              {% if item.draft and jekyll.environment == 'production' %}
                {% continue %}
              {% endif %}
              <div class="card border-0 bg-body-tertiary mb-3 update-card" data-lazy="@class animation-slide-up">
                <div class="card-body p-4">
                  <div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
                    <div class="d-flex align-items-center gap-3">
                      <div class="avatar avatar-md bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                        {% uj_icon "rocket", "text-primary fs-5" %}
                      </div>
                      <div>
                        <h3 class="h5 fw-semibold mb-0">
                          <a href="{{ item.url }}" class="text-body text-decoration-none stretched-link">
                            Version {{ item.update.version }}
                          </a>
                        </h3>
                        {% iftruthy item.update.title %}
                          <p class="text-muted mb-0 small">{{ item.update.title }}</p>
                        {% endiftruthy %}
                      </div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                      {% if forloop.first %}
                        <span class="badge bg-success-subtle text-success">{{ page.resolved.updates.latest_badge }}</span>
                      {% endif %}
                      <span class="text-muted small">{{ item.update.date | date: "%b %d, %Y" }}</span>
                    </div>
                  </div>

                  {% iftruthy item.update.summary %}
                    <p class="text-muted mb-3">{{ item.update.summary }}</p>
                  {% endiftruthy %}

                  {% iftruthy item.update.highlights %}
                    <div class="d-flex flex-wrap gap-2">
                      {% for highlight in item.update.highlights %}
                        <span class="badge bg-body-secondary text-body-secondary">
                          {% uj_icon highlight.icon, "me-1" %}
                          {{ highlight.text }}
                        </span>
                      {% endfor %}
                    </div>
                  {% endiftruthy %}
                </div>
              </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="card border-0 bg-body-tertiary" data-lazy="@class animation-slide-up">
            <div class="card-body p-4 text-center text-muted">
              {% uj_icon "box-open", "fs-1 mb-3 opacity-50" %}
              <p class="mb-0">{{ page.resolved.updates.empty_message }}</p>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</section>

<!-- Back to Status Link -->
<section class="py-5 pt-0">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <div class="text-center" data-lazy="@class animation-slide-up">
          <a href="/status" class="text-decoration-none">
            {% uj_icon "arrow-left", "me-1" %}
            Back to system status
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

{{ content | uj_content_format }}