{% extends 'base.html' %}

{% block content %}

<div class="container" style="text-align:center;">

  <!-- <h3>Leaderboards</h3>
  <a href="{{ url_for('post.top') }}"><button class="btn btn-warning">Top Posts</button></a>
  <a href="{{ url_for('leaderboard.leaderboard') }}"><button class="btn btn-warning">Top Posters</button></a>
  <hr> -->

  <h1 class="title">Latest Posts</h1>

  <section class="section">
  {% if posts %}
      {% for row in posts | batch(4) %}
        <div class="columns">
          {% for post in row %}
          <div class="column">
            <div class="card">
              <div class="card-image">
                <figure class="image is-192x192">
                  <a href="{{ url_for('post.read', id=post.id) }}">
                    <img src="{{ url_for('post.uploaded_file', filename=post.get_thumbnail_name()) }}" alt="Placeholder image">
                  </a>
                </figure>
              </div>
              <div class="card-content">
                <div class="media">
                  <div class="media-content">
                    <p class="title is-4">
                      <a href="{{ url_for('post.read', id=post.id) }}">{{ post.title }}</a>
                    </p>
                    <p class="subtitle is-6"><a href="/?submitter={{ post.submitter }}">{{ post.submitter }}</a></p>
                  </div>
                </div>

                <div class="content">
                  {{ post.text | truncate(60) }}
                  <!-- <br> -->
                  <p><strong>{{ post.get_received_wow() }} WOW received</strong></p>
                  <time datetime="2016-1-1">{{ post.timestamp.year }}-{{ post.timestamp.month }}-{{ post.timestamp.day }} {{ post.timestamp.hour }}:{{ post.timestamp.minute }} UTC</time>
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      {% endfor %}
  {% else %}
    <p>No posts yet!</p>
  {% endif %}
  </section>

{% if total_pages %}
<nav class="pagination is-centered pb-4" role="navigation" aria-label="pagination">
  <ul class="pagination-list">
    {% for p in range(1, total_pages + 1) %}
      <a href="{% if request.args.submitter %}/?submitter={{ request.args.submitter }}&{% else %}/?{% endif %}page={{ p }}" class="pagination-link {% if p == page %}current-page-btn{% endif %}">{{ p }}</a>
    {% endfor %}
  </ul>
</nav>
{% endif %}



</div>

{% endblock %}