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

{% block reader %}
  <div class="ms-search">
    <a href="{{ baseUrl }}/channels" class="back-link">
      {{ icon("previous") }} {{ __("microsub.channels.title") }}
    </a>

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

    <form method="post" action="{{ baseUrl }}/search" class="ms-search__form">
      {{ input({
        id: "query",
        name: "query",
        label: __("microsub.search.placeholder"),
        type: "url",
        required: true,
        placeholder: "https://example.com",
        autocomplete: "off",
        value: query,
        attributes: { autofocus: true }
      }) }}
      <div class="button-group">
        {{ button({ text: __("microsub.search.submit") }) }}
      </div>
    </form>

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

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

    {% if results and results.length > 0 %}
    <div class="ms-search__results">
      <h3>{{ __("microsub.search.title") }}</h3>
      <div class="ms-search__list">
        {% for result in results %}
        <div class="ms-search__item{% if not result.valid %} ms-search__item--invalid{% endif %}{% if result.isCommentsFeed %} ms-search__item--comments{% endif %}">
          <div class="ms-search__feed">
            <span class="ms-search__name">
              {{ result.title or "Feed" }}
              <span class="ms-search__type badge badge--small{% if result.valid %} badge--green{% else %} badge--yellow{% endif %}">
                {{ result.typeLabel }}
              </span>
              {% if result.isCommentsFeed %}
              <span class="ms-search__type badge badge--small badge--yellow">Comments</span>
              {% endif %}
            </span>
            <span class="ms-search__url">{{ result.url | replace("https://", "") | replace("http://", "") }}</span>
            {% if not result.valid %}
            <span class="ms-search__error">{{ result.error }}</span>
            {% endif %}
          </div>
          {% if result.valid %}
          <form method="post" action="{{ baseUrl }}/subscribe" class="ms-search__subscribe">
            <input type="hidden" name="url" value="{{ result.url }}">
            <label for="channel-{{ loop.index }}" class="-!-visually-hidden">{{ __("microsub.channels.title") }}</label>
            <select name="channel" id="channel-{{ loop.index }}" class="select select--small">
              {% for channel in channels %}
              <option value="{{ channel.uid }}">{{ channel.name }}</option>
              {% endfor %}
            </select>
            {{ button({
              text: __("microsub.feeds.follow"),
              classes: "button--small"
            }) }}
          </form>
          {% else %}
          <span class="badge badge--small badge--red">Invalid</span>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
    {% elif searched %}
    <div class="ms-reader__empty">
      <p>{{ __("microsub.search.noResults") }}</p>
    </div>
    {% endif %}
  </div>
{% endblock %}