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

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

{% block content %}
  {{ slider_ad() }}
  <section class="site-section site-section--posts">
    <header class="site-section__header">
      <h1 class="site-section__heading">Posts</h1>
    </header>
    <div class="paginator" id="paginator-top">
      {% 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="{{ base.q }}"
          minlength="2"
          class="search-input"
          placeholder="search for posts..."
        >
        <input type="submit" style="display: none">
      </form>
    </div>

    {{ header_ad() }}

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

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


