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

{% block blogroll %}
  <div class="blogroll-filters">
    <form method="get" action="{{ baseUrl }}/blogs" style="display: flex; gap: var(--space-s); flex-wrap: wrap; align-items: center;">
      <select name="category" class="select" onchange="this.form.submit()">
        <option value="">{{ __("blogroll.blogs.allCategories") }}</option>
        {% for cat in categories %}
        <option value="{{ cat }}" {% if filterCategory == cat %}selected{% endif %}>{{ cat }}</option>
        {% endfor %}
      </select>
      <select name="status" class="select" onchange="this.form.submit()">
        <option value="">{{ __("blogroll.blogs.allStatuses") }}</option>
        <option value="active" {% if filterStatus == 'active' %}selected{% endif %}>{{ __("blogroll.blogs.statusActive") }}</option>
        <option value="error" {% if filterStatus == 'error' %}selected{% endif %}>{{ __("blogroll.blogs.statusError") }}</option>
        <option value="pending" {% if filterStatus == 'pending' %}selected{% endif %}>{{ __("blogroll.blogs.statusPending") }}</option>
      </select>
      {% if filterCategory or filterStatus %}
      {{ button({ href: baseUrl + "/blogs", text: __("blogroll.blogs.clearFilters"), classes: "button--small button--secondary" }) }}
      {% endif %}
    </form>
  </div>

  <div class="blogroll-actions">
    {{ button({ href: baseUrl + "/blogs/new", text: __("blogroll.blogs.add") }) }}
  </div>

  {% if blogs.length > 0 %}
  <ul class="blogroll-list">
    {% for blog in blogs %}
    <li class="blogroll-list__item {% if blog.pinned %}blogroll-list__item--pinned{% endif %} {% if blog.hidden %}blogroll-list__item--hidden{% endif %}">
      <div class="blogroll-item__info">
        <h2 class="blogroll-item__title">
          {% if blog.siteUrl %}
          <a href="{{ blog.siteUrl }}" target="_blank" rel="noopener">{{ blog.title }}</a>
          {% else %}
          {{ blog.title }}
          {% endif %}
        </h2>
        <p class="blogroll-item__meta">
          {{ badge({ color: "green" if blog.status == "active" else ("red" if blog.status == "error" else "yellow"), text: blog.status }) }}
          {% if blog.category %}
          <span>{{ blog.category }}</span>
          {% endif %}
          <span>· {{ blog.itemCount or 0 }} items</span>
          {% if blog.pinned %}
          <span>· {{ __("blogroll.blogs.pinned") }}</span>
          {% endif %}
          {% if blog.hidden %}
          <span>· {{ __("blogroll.blogs.hidden") }}</span>
          {% endif %}
        </p>
        <p class="blogroll-item__url">{{ blog.feedUrl }}</p>
        {% if blog.lastError %}
        <p class="blogroll-item__error">{{ blog.lastError }}</p>
        {% endif %}
      </div>
      <div class="blogroll-item__actions">
        <form method="post" action="{{ baseUrl }}/blogs/{{ blog._id }}/refresh" style="display: inline;">
          <button type="submit" class="button button--small button--secondary">
            {{ icon("syndicate") }} {{ __("blogroll.refresh") }}
          </button>
        </form>
        {{ button({ href: baseUrl + "/blogs/" + blog._id, text: __("blogroll.edit"), classes: "button--small button--secondary" }) }}
        <form method="post" action="{{ baseUrl }}/blogs/{{ blog._id }}/delete" style="display: inline;" onsubmit="return confirm('{{ __("blogroll.blogs.deleteConfirm") }}');">
          <button type="submit" class="button button--small button--warning">
            {{ icon("delete") }}
          </button>
        </form>
      </div>
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <div class="blogroll-empty">
    {{ prose({ text: __("blogroll.blogs.empty") }) }}
    {{ button({ href: baseUrl + "/blogs/new", text: __("blogroll.blogs.add") }) }}
  </div>
  {% endif %}
{% endblock %}