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

### PAGE CONFIG ###
# Update Section
update:
  version: null
  title: null
  date: null
  summary: null
  highlights: []
  type: "release"  # release, hotfix, security, maintenance

# Navigation
navigation:
  back_text: "All updates"
  back_url: "/updates"
---

<!-- Hero Section -->
<section class="update-hero py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-10" data-lazy="@class animation-slide-up">
        <!-- Back Link -->
        <div class="mb-4">
          <a href="{{ page.resolved.navigation.back_url }}" class="text-decoration-none text-muted">
            {% uj_icon "arrow-left", "me-1" %}
            {{ page.resolved.navigation.back_text }}
          </a>
        </div>

        <!-- Update Header -->
        <div class="card border-0 bg-body-tertiary update-header-card">
          <div class="card-body p-4">
            <div class="d-flex align-items-start gap-3 flex-wrap">
              <div class="avatar avatar-lg bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center flex-shrink-0">
                {% if page.resolved.update.type == "security" %}
                  {% uj_icon "shield-check", "text-danger fs-4" %}
                {% elsif page.resolved.update.type == "hotfix" %}
                  {% uj_icon "bug", "text-warning fs-4" %}
                {% elsif page.resolved.update.type == "maintenance" %}
                  {% uj_icon "wrench", "text-info fs-4" %}
                {% else %}
                  {% uj_icon "rocket", "text-primary fs-4" %}
                {% endif %}
              </div>
              <div class="flex-grow-1">
                <div class="d-flex align-items-center gap-2 mb-1 flex-wrap">
                  <h1 class="h2 fw-bold mb-0">Version {{ page.resolved.update.version }}</h1>
                  {% if page.resolved.update.type == "security" %}
                    <span class="badge bg-danger-subtle text-danger">Security</span>
                  {% elsif page.resolved.update.type == "hotfix" %}
                    <span class="badge bg-warning-subtle text-warning">Hotfix</span>
                  {% elsif page.resolved.update.type == "maintenance" %}
                    <span class="badge bg-info-subtle text-info">Maintenance</span>
                  {% else %}
                    <span class="badge bg-primary-subtle text-primary">Release</span>
                  {% endif %}
                </div>
                {% iftruthy page.resolved.update.title %}
                  <p class="fs-5 text-muted mb-2">{{ page.resolved.update.title }}</p>
                {% endiftruthy %}
                <div class="text-muted small">
                  {% uj_icon "calendar", "me-1" %}
                  {{ page.resolved.update.date | date: "%B %d, %Y" }}
                </div>
              </div>
            </div>

            {% iftruthy page.resolved.update.highlights %}
              <div class="mt-4 pt-3 border-top">
                <div class="d-flex flex-wrap gap-2">
                  {% for highlight in page.resolved.update.highlights %}
                    <span class="badge bg-body-secondary text-body-secondary">
                      {% uj_icon highlight.icon, "me-1" %}
                      {{ highlight.text }}
                    </span>
                  {% endfor %}
                </div>
              </div>
            {% endiftruthy %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Update Content Section -->
<section class="py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <div class="update-content" data-lazy="@class animation-slide-up">
          {{ content | uj_content_format }}
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Navigation Section -->
<section class="py-5 pt-0">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3" data-lazy="@class animation-slide-up">
          <a href="{{ page.resolved.navigation.back_url }}" class="text-decoration-none">
            {% uj_icon "arrow-left", "me-1" %}
            {{ page.resolved.navigation.back_text }}
          </a>
          <a href="/status" class="text-decoration-none">
            View system status
            {% uj_icon "arrow-right", "ms-1" %}
          </a>
        </div>
      </div>
    </div>
  </div>
</section>