{% extends "base.html" %}
{% import "macros/user_cell.html" as user_cell %}
{% import "macros/empty_state.html" as empty %}
{% block title %}{% if page_title %}{{ page_title }}{% elif plugin_settings.page_title %}{{ plugin_settings.page_title }}{% else %}Achievements{% endif %}{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="/plugins/achievements/assets/css/achievements-timeline.css">
{% endblock %}
{% block content %}
<div class="container" data-plugin="achievements">
  <div class="achievements-timeline">
    <div class="achievements-timeline__header">
      <h1 class="achievements-timeline__title">{% if timeline_title %}{{ timeline_title }}{% elif plugin_settings.timeline_title %}{{ plugin_settings.timeline_title }}{% elif page_title %}{{ page_title }}{% elif plugin_settings.page_title %}{{ plugin_settings.page_title }}{% else %}Achievements{% endif %}</h1>
      {% if years %}
      <nav class="achievements-timeline__years" aria-label="Filter by year">
        <a class="achievements-timeline__year-link{% if not selected_year %} is-active{% endif %}"
           href="/plugins/achievements/index">All</a>
        {% for y in years %}
        <a class="achievements-timeline__year-link{% if selected_year == y.year %} is-active{% endif %}"
           href="/plugins/achievements/index?year={{ y.year }}">{{ y.year }}</a>
        {% endfor %}
      </nav>
      {% endif %}
    </div>

    {% if groups %}
      {% for group in groups %}
      <section class="achievements-timeline__group">
        <span class="achievements-timeline__group-year" aria-hidden="true"></span>
        <h2 class="achievements-timeline__group-label">{{ group.year }}</h2>
        {% for entry in group.entries %}
        <a class="achievements-card" href="/plugins/achievements/detail?slug={{ entry.slug }}">
          {% if entry.cover_image %}
          <img class="achievements-card__cover" src="{{ entry.cover_image }}" alt="">
          {% endif %}
          <div class="achievements-card__date">
            {{ entry.occurred_on | date_in_tz(timezone=settings.timezone, format='%d %b %Y') }}
          </div>
          <h3 class="achievements-card__title">{{ entry.title }}</h3>
          {% if entry.summary %}
          <p class="achievements-card__summary">{{ entry.summary }}</p>
          {% endif %}
        </a>
        {% endfor %}
      </section>
      {% endfor %}
    {% else %}
      {{ empty::empty_state(icon="fas fa-trophy", title="No achievements yet", description="No achievements published yet.") }}
    {% endif %}
  </div>
</div>
{% endblock %}