{% extends 'components/shell.html' %}

{% from 'components/card_list.html' import card_list %}
{% from 'components/cards/user.html' import user_card, user_card_header %}
{% from 'components/cards/post.html' import post_card %}
{% from 'components/ads.html' import slider_ad, header_ad, footer_ad %}

{% block scripts_extra %}
  <script src="{{ url_for('static', filename='js/favorites.js') }}" defer ></script>
{% endblock scripts_extra %}

{% block content %}
{{ slider_ad() }}
<section class="page site-section site-section--favorites" id="page">
  {{ header_ad() }}
  <header class="site-section__header">
    <h1 class="site-section__heading">Favorite {{ g.artists_or_creators if props.fave_type == 'artist' else 'Posts' }}</h1>
  </header>

  {% if source == 'session' %}
    <div>
      <table class="search-results" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Service</th>
          </tr>
        </thead>
        <tbody id="favorites-list">
          <noscript>
            <tr>
              <td class="subtitle">This feature requires Javascript.</td>
              <td></td>
            </tr>
          </noscript>
        </tbody>
      </table>
      <script src="https://unpkg.com/whatwg-fetch@3.6.18/dist/fetch.umd.js"></script>
    </div>
  {% else %}
    <div class="dropdowns">
      <label>Type</label>
      <select autocomplete="off" onchange="on_change_favorite_type(this)">
        <option value="artist" {% if props.fave_type == "artist" %}selected="selected"{% endif %}>{{ g.artists_or_creators }}</option>
        <option value="post" {% if props.fave_type == "post" %}selected="selected"{% endif %}>Posts</option>
      </select>

      {% if props.fave_type == "artist" %}
        <label>Sort by</label>
        <select autocomplete="off" onchange="on_change_filters('sort', this)">
          <option value="updated" {% if props.sort_field == "updated" %}selected="selected"{% endif %}>New post date</option>
          <option value="faved_seq" {% if props.sort_field == "faved_seq" %}selected="selected"{% endif %}>Faved date</option>
          <option value="last_imported" {% if props.sort_field == "last_imported" %}selected="selected"{% endif %}>Reimported date</option>
        </select>
      {% else %}
        <label>Sort by</label>
        <select autocomplete="off" onchange="on_change_filters('sort', this)">
          <option value="faved_seq" {% if props.sort_field == "faved_seq" %}selected="selected"{% endif %}>Faved date</option>
          <option value="published" {% if props.sort_field == "published" %}selected="selected"{% endif %}>Published</option>
        </select>
      {% endif %}

      <label>Order</label>
      <select autocomplete="off" onchange="on_change_filters('order', this)">
        <option value="desc" {% if not props.sort_asc %}selected="selected"{% endif %}>Descending</option>
        <option value="asc" {% if props.sort_asc %}selected="selected"{% endif %}>Ascending</option>
      </select>
    </div>
    {% if props.fave_type == "artist" %}
      <div class="paginator" id="paginator-top">
        {% include 'components/paginator.html' %}
      </div>

      {% call card_list('phone') %}
        {% for user in results %}
          {{ user_card(user, is_updated=true) }}
        {% else %}
          <h2 class="subtitle">Nobody here but us chickens!</h2>
          <p class="subtitle">
            There are no {{ g.artists_or_creators|lower }}.
          </p>
        {% endfor %}
      {% endcall %}

      <div class="paginator" id="paginator-bottom">
        {% include 'components/paginator.html' %}
      </div>
    {% else %}
      <div class="paginator" id="paginator-top">
        {% include 'components/paginator.html' %}
      </div>

      {% call card_list() %}
        {% for post in results %}
          {{ post_card(post) }}
        {% else %}
          <h2 class="subtitle">Nobody here but us chickens!</h2>
          <p class="subtitle">
            There are no more posts.
          </p>
        {% endfor %}
      {% endcall %}

      <div class="paginator" id="paginator-bottom">
        {% include 'components/paginator.html' %}
      </div>
    {% endif %}
  {% endif %}
  {{ footer_ad() }}
</section>
{% endblock content %}
