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

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

{% block content %}
  {{ slider_ad() }}
  <section 
    class="site-section site-section--artists page" id="page"
  >
    <div class="no-posts" id="loading">
      <span class="subtitle">
        Loading creators... please wait!
      </span>
    </div>
    <form
      autocomplete="off"
      id="search-form"
      class="search-form{{ '-hidden' if base.get('commit') }}"
      novalidate="novalidate"
      accept-charset="UTF-8"
    >
      <div>
        <label for="q">Name</label>
        <input
          type="text"
          name="q"
          id="q"
          autocomplete="off"
        >
        <small class="subtitle" style="margin-left: 5px;">Leave blank to list all</small>
      </div>
      <div>
        <label for="service">Service</label>
        <select id="service" name="service">
          <option value="">All</option>
          {% for paysite in g.paysite_list %}
            <option value="{{ paysite }}" {{ 'selected' if base.get('service') == paysite }}>
              {{ g.paysites[paysite].title }}
            </option>
          {% else %}
          {% endfor %}
        </select>
      </div>
      <div>
        <label for="sort_by">Sort by</label>
        <select id="sort_by" name="sort_by">
          <option value="favorited" {{ 'selected' if base.get('sort_by') == 'favorited' }}>Popularity</option>
          <option value="indexed" {{ 'selected' if base.get('sort_by') == 'indexed' }}>Date Indexed</option>
          <option value="updated" {{ 'selected' if base.get('sort_by') == 'updated' }}>Date Updated</option>
          <option value="name" {{ 'selected' if base.get('sort_by') == 'name' }}>Alphabetical Order</option>
          <option value="service" {{ 'selected' if base.get('sort_by') == 'service' }}>Service</option>
        </select>
        <select id="order" name="order">
          <option value="desc" {{ 'selected' if base.get('order') == 'desc' }}>Descending</option>
          <option value="asc" {{ 'selected' if base.get('order') == 'asc' }}>Ascending</option>
        </select>
      </div>
    </form>
    {% if props.display %}
      <div style="text-align: center;">
        <h3 id="display-status" class="subtitle">
          Displaying {{ props.display }}
        </h3>
      </div>
    {% endif %}
    <div class="paginator" id="paginator-top">
      {% include 'components/paginator.html' %}
    </div>
    {{ header_ad() }}
    {% call card_list('phone') %}
      {% for user in results %}
        {{ user_card(
            user,
            is_updated=base.get('sort_by') == 'updated',
            is_indexed=base.get('sort_by') == 'indexed',
            is_count=base.get('sort_by') == 'favorited',
            single_of='favorite',
            plural_of='favorites'
        ) }}
      {% else %}
        <p class="subtitle card-list__item--no-results">
          No {{ g.artists_or_creators|lower }} found for your query.
        </p>
      {% endfor %}
    {% endcall %}
    <div class="paginator" id="paginator-bottom">
      {% include 'components/paginator.html' %}
    </div>
    {{ footer_ad() }}
  </section>
{% endblock %}

{% block components %}
  {{ image_link("") }}
  {{ fancy_image("") }}
  {{ user_card_skeleton() }}
{% endblock components %}
