{% extends 'layouts/main.django' %}
{% block content %}
  {% if Error %}
    <div class="centered-main">
      <div class="error">{{ Error }}</div>
    </div>
  {% endif %}
  {% include 'partials/search.django' %}
  {% if Posts %}
    <div class="post-list">
      {% for image in Posts %}
        <a href="/posts/{{ image.ID }}" class="post-item" width="{{ image.Sizes.1.Width }}" height="{{ image.Sizes.1.Height }}">
          <img src="{{ CDNURL }}/thumbnail/{{ image.FileName }}" alt="{{ image.Title }}" width="{{ image.Sizes.1.Width }}" height="{{ image.Sizes.1.Height }}" />
          <div class="post-overlay">
            <div class="post-overlay-top">
              <div class="post-id">ID: {{ image.ID }}</div>
              <div class="post-score">★{{ image.FavouriteCount }}</div>
            </div>
            <div class="post-rating {{ image.Rating }}">{{ image.Rating }}</div>
            <div class="post-tags">
              {% for tag in image.Tags %}
                <span class="post-tag" style="color: {{ tag.Type.Color }};">{{ tag.Name }}</span>
              {% endfor %}
            </div>
          </div>
        </a>
      {% endfor %}
    </div>
  {% else %}
    <div class="centered-main">
      <h1>No Posts Available</h1>
      <p>
        It seems there are no posts available at the moment. Check back later or <a href="/posts/new">upload a new post</a>.
      </p>
    </div>
  {% endif %}
{% endblock %}