{% extends "layout.html" %}
{% include "blogMacros.html" %}

{% block bodyClass %}{{ super() }} apos-blog-page{% endblock %}

{# 'here()' returns the URL of the page, with the year and month added if we are #}
{# viewing by month, plus any query string based on active filters. You can pass #}
{# 'changes' to override filters. Passing null for a filter removes it. #}

{%- macro here(changes) -%}
  {{ page.url | build([ 'year', 'month' ], { year: activeYear, month: activeMonth, search: query.search }, changes) }}
{%- endmacro -%}

{# Output the current content of the page, with buttons to edit it #}

{% block mainContent %}

  <div class="blog-filter clearfix">

    {# View by Month or View Recent #}
    {% if defaultView %}
      <div class="filter-element view-by-month-button"><h4><a href="{{ here({ year: thisYear, month: thisMonth }) }}">{{ __('View Articles by Month') }}</a></h4></div>
    {% else %}
      <div class="filter-element view-recent-button"><h4><a href="{{ here({ year: '', month: '' }) }}">{{ __('View Recent Articles') }}</a></h4></div>
    {% endif %}

    {# Title of current view (shows month forward and backward controls in month view) #}
    {% if defaultView %}
      <div class="filter-element active-view"><h4>{{ __('Recent Articles') }}</h4></div>
    {% else %}
      <div class="filter-element current-month">
        <h4 class="month browse-by-month active">
          <a class="month-previous" href="{{ here({ year: prevYear, month: prevMonth }) }}">&laquo;</a>
          <span class="month current">{{ (activeYear + '-' + activeMonth + '-01') | date('MMMM YYYY') }}</span>
          <a class="month-next" href="{{ here({ year: nextYear, month: nextMonth }) }}">&raquo;</a>
        </h4>
      </div>
    {% endif %}

  </div>

  <div class="column">

    {% if page.children.length %}
      <div class="column-element">

        {% block subnav %}
          <div class="subnavigation">
            <h4>{{ __('Subpages') }}</h4>
            <ol class="children">
            {% for relative in page.children %}
              <li><a href="{{ relative.url }}">{{ relative.title | e }}</a></li>
            {% endfor %}
            </ol>
          </div>
        {% endblock %}

      </div>
    {% endif %}

    {% set filteredFeed = here({ 'feed': 'rss' }) %}
    {% set fullFeed = page.url | build({ 'feed': 'rss' }) %}

    <div class="column-element filter-links">

      {# RSS auto discovery #}
      {% block extraHead %}
        <link rel="alternate" type="application/rss+xml" title="{{ page.title | e }}" href="{{ filteredFeed or fullFeed }}" />
      {% endblock %}

      {% if filteredFeed != fullFeed %}
        <h4><a href="{{ filteredFeed }}"><img src="/modules/snippets/images/feed-icon-16x16.png" /> {{ __('Filtered RSS Feed') }}</a></h4>
      {% endif %}
      <h4><a href="{{ fullFeed }}"><img src="/modules/snippets/images/feed-icon-16x16.png" /> {{ __('Full RSS Feed') }}</a></h4>
    </div>

    <div class="column-element apos-area-sidebar">
      {{ aposArea(
        page,
        'sidebar',
        {
          controls: ['style', 'bold', 'italic', 'createLink' ],
          styles: [ { value:'div', label: 'Normal' }, { value: 'h4', label: 'Heading' } ]
        }
      ) }}
    </div>

  </div>

  <div class="column-2">
    {# Search filter markup borrowed from Stuart, TODO: ask him about #}
    {# suitable styles from a related project #}
    <form class="apos-search-form filter-search{% if query.search %} searched{% endif %}" method="GET" action="">
      <div class="search-title">{{ __('Search For') }}:</div>
      <div class="search-inputs">
        <input name="search" value="{{ query.search | e }}" class="search-field" />
        <input type="submit" class="search-submit" value="{{ __('search') }}" />
        {% if query.search %}
          <a class="search-clear" href="{{ here({ search: '' }) }}">X</a>
        {% endif %}
      </div>
    </form>
    <div class="apos-blog-posts">
      {{ renderBlogPostPreviews(pieces, page.url) }}
    </div>
    {{ renderPager(pager, here({})) }}
  </div>


  {# Just uncomment this script block to enable infinite scroll instead! #}

  {#
  <script type="text/javascript">
    $(function() {
      $('.apos-refreshable .apos-blog-posts').bottomless({
        url: {{ page.url | json }}
      });
      // We don't need the pager if we can infinite scroll
      // However we hide it with JavaScript so that
      // Google still finds it otherwise we have serious SEO issues!
      $('.apos-refreshable .apos-pager').hide();
    });
  </script>
  #}

{% endblock %}