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

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

{% block title %}
  <title>Popular Posts | {{ g.site_name }}</title>
{% endblock %}

{% block content %}
    {{ slider_ad() }}
  <section class="site-section site-section--popular-posts">
    <header class="site-section__header">
      <h1 class="site-section__heading">Popular Posts for <span title="{{ info.min_date }} to {{ info.max_date }}">{{ info.range_desc }}</span></h1>
    </header>

    <div class="paginator" id="paginator-dates">
      <div id="daily">
        <span>
          {% if info.navigation_dates['day'][0] < props.earliest_date_for_popular %}
            <span>next »</span>
          {% else %}
            <a href="/posts/popular?date={{ info.navigation_dates['day'][0]|simple_date }}&period=day">« prev</a>
          {% endif %}
        </span>
        <span>
          {%- if info.scale == "day" -%}
            <strong>Day</strong>
          {%- else -%}
            <a href="/posts/popular?date={{ info.navigation_dates['day'][2]|simple_date }}&period=day">Day</a>
          {%- endif -%}
        </span>
        <span>
          {% if info.navigation_dates['day'][1] > props.today %}
            <span>next »</span>
          {% else %}
            <a href="/posts/popular?date={{ info.navigation_dates['day'][1]|simple_date }}&period=day">next »</a>
          {% endif %}
        </span>
      </div>
      <div id="weekly">
        <span>
          {% if info.navigation_dates['week'][0] < props.earliest_date_for_popular %}
            <span>next »</span>
          {% else %}
            <a href="/posts/popular?date={{ info.navigation_dates['week'][0]|simple_date }}&period=week">« prev</a>
          {% endif %}
        </span>
        <span>
          {%- if info.scale == "week" -%}
            <strong>Week</strong>
          {%- else -%}
            <a href="/posts/popular?date={{ info.navigation_dates['week'][2]|simple_date }}&period=week">Week</a>
          {%- endif -%}
        </span>
        <span>
          {% if info.navigation_dates['week'][1] > props.today %}
            <span>next »</span>
          {% else %}
            <a href="/posts/popular?date={{ info.navigation_dates['week'][1]|simple_date }}&period=week">next »</a>
          {% endif %}
        </span>
      </div>
      <div id="monthly">
        <span>
          {% if info.navigation_dates['month'][0] < props.earliest_date_for_popular %}
            <span>next »</span>
          {% else %}
            <a href="/posts/popular?date={{ info.navigation_dates['month'][0]|simple_date }}&period=month">« prev</a>
          {% endif %}
        </span>
        <span>
          {%- if info.scale == "month" -%}
            <strong>Month</strong>
          {%- else -%}
            <a href="/posts/popular?date={{ info.navigation_dates['month'][2]|simple_date }}&period=month">Month</a>
          {%- endif -%}
        </span>
        <span>
        <span>
          {% if info.navigation_dates['month'][1] > props.today %}
            <span>next »</span>
          {% else %}
            <a href="/posts/popular?date={{ info.navigation_dates['month'][1]|simple_date }}&period=month">next »</a>
          {% endif %}
        </span>
        </span>
      </div>
      <div class="paginator" id="paginator-top">
          {% include 'components/paginator.html' %}
        {{ header_ad() }}

        {% call card_list() %}
        {% for post in results %}
          {{ post_fav_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>
      </div>
    </div>
  </section>


{% endblock %}