{% extends 'base.html' %}

{% block content %}

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

  <h1 class="title">Pending Posts</h1>
  <section class="section">
  {% if posts %}
      {% for row in posts | batch(4) %}
        <div class="columns">
          {% for p in row %}
          {% set post = p.show() %}
          <div class="column">
            <div class="card">
              <div class="card-image">
                {% if p.get_image_path().endswith('mp4') %}
                  <video style="max-height: 100vh!important;" controls>
                    <source src="{{ url_for('post.uploaded_file', filename=p.image_name) }}" type="video/mp4">
                    Your browser does not support the video tag.
                  </video>
                {% else %}
                  <img alt="SuchWow #{{ post.id }} - {{ post.title }} by {{ post.submitter }}" src="{{ url_for('post.uploaded_file', filename=post.thumbnail_name) }}" />
                {% endif %}
              </div>
              <div class="card-content">
                <div class="media">
                  <div class="media-content">
                    <p class="title is-4">
                      {{ post.title }}
                    </p>
                    <p class="subtitle is-6"><a href="/?submitter={{ post.submitter }}">{{ post.submitter }}</a></p>
                  </div>
                </div>

                <div class="content">
                  {{ post.text | truncate(60) }}
                  <time datetime="2016-1-1">{{ post.timestamp.year }}-{{ post.timestamp.month }}-{{ post.timestamp.day }} {{ post.timestamp.hour }}:{{ post.timestamp.minute }} UTC</time>
                  <p>({{ post.timestamp | humanize }})</p>
                </div>
              </div>
              <footer class="card-footer">
                <a href="{{ url_for('post.approve', id=post.id) }}" class="card-footer-item" style="color:green;"><strong>Approve</strong></a>
                <a href="{{ url_for('post.delete', id=post.id) }}" class="card-footer-item" style="color:red;"><strong>Deny</strong></a>
              </footer>
            </div>
          </div>
          {% endfor %}
        </div>
      {% endfor %}
  {% else %}
    <p>No posts pending!</p>
  {% endif %}
  </section>
</div>

{% endblock %}

{% block footer %}{% endblock %}