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

{% from 'components/ads.html' import slider_ad, header_ad, footer_ad %}
{% from 'components/headers.html' import user_header %}
{% from "components/loading_icon.html" import loading_icon %}
{% from 'components/card_list.html' import card_list %}
{% from 'components/cards/post.html' import post_card %}

{% set paysite = g.paysites[props.service] %}
{% set page_title = 'Posts of ' ~ props.name ~ ' from ' ~ paysite.title ~ ' | ' ~ g.site_name %}

{% block title %}
  <title>{{ page_title }}</title>
{% endblock title %}

{% block meta %}
  <meta name="id" content="{{ props.id }}">
  <meta name="service" content="{{ props.service }}">
  <meta name="artist_name" content="{{ props.artist.name }}">
  <link rel="canonical" href="{{ g.canonical_url }}">
{% endblock meta %}

{% block opengraph %}
  <meta property="og:title" content="{{ page_title }}">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="{{ g.site_name }}">
  <meta property="og:image" content="{{  g.icons_prepend | default(g.origin) }}/icons/{{ props.service }}/{{ props.id }}">
  <meta property="og:url" content="{{ g.canonical_url }}">
{% endblock opengraph %}

{% block content %}
{{ slider_ad() }}
<section class="site-section site-section--user">
  {{ user_header(request, props) }}
  <div class="paginator" id="paginator-top">
    {% include 'components/tabs.html' %}
    {% if results or request.args.get('q') %}
      {% include 'components/paginator.html' %}
      <form
        action="{{ request.path }}"
        method="GET"
        enctype="application/x-www-form-urlencoded"
      >
        <input
          type="text"
          name="q"
          id="q"
          autocomplete="off"
          value="{{ request.args.get('q') if request.args.get('q') }}"
          minlength="2"
          placeholder="search for posts..."
          class="search-input"
        >
        <input type="submit" style="display: none;">
      </form>
    {% endif %}
  </div>
  {% if results or request.args.get('q') %}
    {{ header_ad() }}

    {% call card_list() %}
      {% for post in results %}
        {{ post_card(post) }}
      {% endfor %}
    {% endcall %}

    {{ footer_ad() }}

    <div class="paginator" id="paginator-bottom">
      {% include 'components/paginator.html' %}
    </div>
  {% endif %}
  {% if not results %}
    <div class="no-results">
      <h2 class="site-section__subheading">Nobody here but us chickens!</h2>
      <p class="subtitle">
        There are no posts for your query.
      </p>
    </div>
  {% endif %}

</section>
{% endblock content %}

{% block components %}
  <button class="user-header__favourite" type="button">
    <span class="user-header__fav-icon">☆</span>
    <span class="user-header__fav-text">Favorite</span>
  </button>
  {{ loading_icon() }}
{% endblock components %}
