{% from "chirpui/badge.html" import badge %}
{% from "chirpui/button.html" import btn %}
{% from "chirpui/card.html" import card %}
{% from "chirpui/layout.html" import cluster %}
{% from "chirpui/progress.html" import progress_bar %}

{% set current_slug = page.relative_path | replace('.md', '') %}

{% if site.data.tracks %}
{% for track_id, track in site.data.tracks | items %}
{% if current_slug in track.items %}

{% set current_index = track.items.index(current_slug) %}
{% set prev_slug = track.items[current_index - 1] if current_index > 0 else None %}
{% set next_slug = track.items[current_index + 1] if current_index < (track.items|length - 1) else None %}
{% let progress_value = ((current_index + 1) / track.items|length) * 100 %}

{% call card(title=track.title, subtitle=(current_index + 1) ~ " of " ~ (track.items | length), cls="chirp-theme-track-nav") %}
  {% slot header_actions %}{{ badge("Track", variant="primary") }}{% end %}
  {% call cluster(gap="sm", cls="chirp-theme-track-nav__actions") %}
    {% if prev_slug %}
    {% set prev_page = get_page(prev_slug) %}
    {% if prev_page %}
    {{ btn(prev_page.title, href=prev_page.href, variant="ghost", size="sm", icon="arrow-left") }}
    {% else %}
    <span class="chirpui-text-muted chirpui-font-sm">Previous unavailable</span>
    {% end %}
    {% else %}
    <span class="chirpui-text-muted chirpui-font-sm">Start of track</span>
    {% end %}

    {% if next_slug %}
    {% set next_page = get_page(next_slug) %}
    {% if next_page %}
    {{ btn(next_page.title, href=next_page.href, variant="primary", size="sm", icon="arrow-right") }}
    {% else %}
    <span class="chirpui-text-muted chirpui-font-sm">Next unavailable</span>
    {% end %}
    {% else %}
    {{ btn("Finish Track", href=('/tracks/' | absolute_url), variant="success", size="sm", icon="check") }}
    {% end %}
  {% end %}
  {{ progress_bar(progress_value, label=(current_index + 1) ~ " of " ~ (track.items | length), variant="gold", size="sm", cls="chirp-theme-track-nav__progress") }}
{% end %}

{% end %}
{% end %}
{% end %}