{% extends "layouts/reader.njk" %}

{% block reader %}
  <div class="ms-timeline-view">
    <header class="ms-timeline-view__header">
      <h1>{{ __("microsub.views.timeline") }}</h1>
      <div class="ms-timeline-view__actions">
        {% if channels.length > 0 %}
        <details class="ms-timeline-view__filter">
          <summary class="button button--secondary button--small">
            {{ __("microsub.reader.filterChannels") }}
          </summary>
          <form action="{{ baseUrl }}/timeline" method="GET" class="ms-timeline-view__filter-form">
            {% for ch in channels %}
            {% if ch.uid !== "notifications" %}
            <label class="ms-timeline-view__filter-label">
              <input type="checkbox" name="exclude" value="{{ ch._id }}"
                {% if excludeIds and ch._id.toString() in excludeIds %}checked{% endif %}>
              <span class="ms-timeline-view__filter-color" style="background: {{ ch.color }}"></span>
              {{ ch.name }}
            </label>
            {% endif %}
            {% endfor %}
            <button type="submit" class="button button--primary button--small">{{ __("microsub.reader.apply") }}</button>
          </form>
        </details>
        {% endif %}
      </div>
    </header>

    {% if items.length > 0 %}
    <div class="ms-timeline" id="timeline">
      {% for item in items %}
      <div class="ms-timeline-view__item">
        {% if item._channelName %}
        <span class="ms-timeline-view__channel-badge" style="background: {{ item._channelColor or '#888' }}">
          {{ item._channelName }}
        </span>
        {% endif %}
        {% include "partials/item-card.njk" %}
      </div>
      {% endfor %}
    </div>

    {% if paging and paging.after %}
    <div class="ms-timeline__loader" id="timeline-loader"
         data-api-url="{{ baseUrl }}/timeline/html{% if excludeIds and excludeIds.length > 0 %}?{% for id in excludeIds %}exclude={{ id }}{% if not loop.last %}&{% endif %}{% endfor %}{% endif %}"
         data-cursor="{{ paging.after }}">
      <div class="ms-timeline__spinner" style="display:none" aria-label="Loading more items">
        <span class="spinner"></span>
      </div>
      <a href="?after={{ paging.after }}" class="button button--secondary ms-timeline__load-more">
        {{ __("microsub.reader.older") }}
      </a>
      <p class="ms-timeline__end" style="display:none">
        {{ __("microsub.reader.allRead") }}
      </p>
    </div>
    {% endif %}

    {% else %}
    <div class="ms-reader__empty">
      <p>{{ __("microsub.reader.empty") }}</p>
    </div>
    {% endif %}
  </div>

  <script type="module" src="/assets/@rmdes-indiekit-endpoint-microsub/reader.js"></script>
{% endblock %}