{% import "partials/svgs.html.nunj" as svgs %}
  <div id=content class=container>
    <div class="section">
      <div class="row">
        {% for page in content %}
          <div class="col s12 m6 l4"><!-- s12 m6 l4-->

            <div class="block article" style="">
              <a href="{{ config.baseurl }}/{{ page.file }}">
                <div style="height:120px;
                  {% if page.metadata.image %}background-image: url('{{ config.baseurl }}{{ page.metadata.image | relURL(page.file) }}'){% endif %}
                  " class="leadimage light-blue darken-2"></div>
              </a>
              <div class="head-title">
                <a href="{{ config.baseurl }}/{{ page.file }}"><h5 class="center">{{ page.metadata.title }}</h5></a>
              </div>
              <div style="padding: 0px 10px;" class="head-perex">
                {% if page.metadata.perex %}
                  {{page.metadata.perex}}
                {% else %}
                  {% if page.metadata.perex_e %}
                    {{page.metadata.perex_e | truncate}}
                  {% else %}
                    {{ page.content | striptags | truncate }}
                  {% endif %}
                {% endif %}
              </div>
              <div class="clear"></div>
              <div style="padding: 10px;" class="head-info">
                <span style="color: #a2a2a2; text-align: left;display: inline-block;width: 75%;">{{ page.metadata.date.creation | date("D. M. YYYY") }} napsal {{ page.metadata.author.name }}</span><!--
                --><a style="text-align: right;display: inline-block;width: 25%;" href="{{ config.baseurl }}/{{ page.file }}">Číst&nbsp;dál</a>
              </div>
            </div>

          </div>
        {% endfor %}
      </div>

      {% include "partials/paginator.html.nunj" %}
    </div>

    <div class="hide-on-small-only">
      {% if metadata.prevurl %}
        <div style="left:0px;" class="sidelink sidelink-l">
          <a href="{{config.baseurl}}/{{metadata.prevurl}}"><div>{{ svgs.backward(false) }}</div></a>
        </div>
      {% endif %}
      {% if metadata.nexturl %}
        <div style="right:0px" class="sidelink sidelink-r">
          <a href="{{config.baseurl}}/{{metadata.nexturl}}"><div>{{ svgs.forward(false) }}</div></a>
        </div>
      {% endif %}
    </div>

    <script>
    (function($) {
      var onresize = function(){
        // equalize article sizes
        $(".head-perex").height("auto");
        var maxHeight = 0;
        $(".head-perex").each(function(){
           if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
        });
        $(".head-perex").height(maxHeight);

        $(".head-title").height("auto");
        maxHeight = 0;
        $(".head-title").each(function(){
           if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
        });
        $(".head-title").height(maxHeight);

        $(".head-info").height("auto");
        maxHeight = 0;
        $(".head-info").each(function(){
           if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
        });
        $(".head-info").height(maxHeight);

        // Sidelink icons of same size
        $(".sidelink-icon").css("top",$(window).height()/2);
      };
      $(window).resize(onresize);
      $(document).load(onresize);
      $(document).ready(onresize);
      $(document).keypress(function(e) {
        if($("#search-overlay").hasClass("shown")) return;
        if(e.key == "ArrowRight") window.location = "{{config.baseurl}}/{{metadata.nexturl}}";
        if(e.key == "ArrowLeft") window.location = "{{config.baseurl}}/{{metadata.prevurl}}";
      });
    })(jQuery);
    </script>
</div> <!-- #content -->