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

{% block reader %}
  <div class="ms-feeds">
    <header class="ms-feeds__header">
      <a href="{{ baseUrl }}/channels/{{ channel.uid }}" class="back-link">
        {{ icon("previous") }} {{ channel.name }}
      </a>
    </header>

    <h2>{{ __("microsub.feeds.title") }}</h2>

    {% if error %}
    <div class="ms-notice ms-notice--error" role="alert">
      {{ error }}
    </div>
    {% endif %}

    {% if feeds.length > 0 %}
    <div class="ms-feeds__list">
      {% for feed in feeds %}
      <div class="ms-feeds__item{% if feed.status == 'error' %} ms-feeds__item--error{% endif %}">
        <div class="ms-feeds__info">
          {% if feed.photo %}
          <img src="{{ feed.photo }}"
               alt=""
               class="ms-feeds__photo"
               width="48"
               height="48"
               loading="lazy">
          {% endif %}
          <div class="ms-feeds__details">
            <span class="ms-feeds__name">
              {{ feed.title or feed.url }}
              {% if feed.feedType %}
              <span class="badge badge--offset badge--small" title="Feed format">{{ feed.feedType | upper }}</span>
              {% endif %}
              {% if feed.status == 'error' %}
              <span class="badge badge--red">Error</span>
              {% elif feed.status == 'active' %}
              <span class="badge badge--green">Active</span>
              {% endif %}
            </span>
            <a href="{{ feed.url }}" class="ms-feeds__url" target="_blank" rel="noopener">
              {{ feed.url | replace("https://", "") | replace("http://", "") }}
            </a>
            {% if feed.lastError %}
            <span class="ms-feeds__error">{{ feed.lastError }}</span>
            {% endif %}
            {% if feed.consecutiveErrors > 0 %}
            <span class="ms-feeds__error-count">{{ feed.consecutiveErrors }} consecutive errors</span>
            {% endif %}
            {% if feed.lastSuccessAt %}
            <span class="ms-feeds__meta">Last success: {{ feed.lastSuccessAt }}</span>
            {% endif %}
          </div>
        </div>
        <div class="ms-feeds__actions">
          <a href="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/edit"
             class="button button--secondary button--small"
             title="Edit feed URL">
            {{ icon("updatePost") }}
          </a>
          <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/rediscover" style="display:inline;">
            <button type="submit" class="button button--secondary button--small" title="Rediscover feed">
              {{ icon("syndicate") }}
            </button>
          </form>
          <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/{{ feed._id }}/refresh" style="display:inline;">
            <button type="submit" class="button button--secondary button--small" title="Refresh now">
              {{ icon("repost") }}
            </button>
          </form>
          <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds/remove" style="display:inline;">
            <input type="hidden" name="url" value="{{ feed.url }}">
            <button type="submit" class="button button--warning button--small" title="Unfollow">
              {{ icon("delete") }}
            </button>
          </form>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="ms-reader__empty">
      {{ icon("syndicate") }}
      <p>{{ __("microsub.feeds.empty") }}</p>
    </div>
    {% endif %}

    <div class="ms-feeds__add">
      <h3>{{ __("microsub.feeds.follow") }}</h3>
      <form method="post" action="{{ baseUrl }}/channels/{{ channel.uid }}/feeds" class="ms-feeds__form">
        {{ input({
          id: "url",
          name: "url",
          label: __("microsub.feeds.url"),
          type: "url",
          required: true,
          placeholder: __("microsub.feeds.urlPlaceholder"),
          autocomplete: "off"
        }) }}
        <div class="button-group">
          {{ button({ text: __("microsub.feeds.follow") }) }}
        </div>
      </form>
    </div>
  </div>
{% endblock %}