{% extends "base" %}

{% block extracss %}
<style>
  div.table {
      display: grid;
      grid-template-columns: auto 1fr repeat(3, auto);
  }

  div.table * {
      margin: 0;
      padding: 5px;
  }

  .colored {
      background-color: #dddddd;
      padding-color: #dddddd;
  }

  div.table a {
      color: #444444;
  }

  .center {
      text-align: center;
  }
</style>
{% endblock extracss %}

{% block content %}
<h1>Panel de administración</h1>

<h3>
  <a style="color: #444444" href="/admin/add_post">Agregar artículo</a>
  <div class="table">
    <h3>id</h3>
    <h3 class="center">Título</h3>
    <h3>Visitas</h3>
    <h3>Visible</h3>
    <h3></h3>

    {% for post in posts %}
      {% if loop.index is odd %}
        <p class="colored">{{ post.id }}</p>
        <p class="colored"><a href="/post/{{ post.title | slugify }}-{{ post.id }}">{{ post.title }}</a></p>
        <p class="colored center">{{ post.views }}</p>
        <p class="colored center">{{ post.published }}</p>
        <p class="colored"><a href="/admin/edit_post/{{ post.id }}">Editar</a></p>
      {% else %}
        <p>{{ post.id }}</p>
        <p><a href="/post/{{ post.title | slugify }}-{{ post.id }}">{{ post.title }}</a></p>
        <p class="center">{{ post.views }}</p>
        <p class="center">{{ post.published }}</p>
        <p><a href="/admin/edit_post/{{ post.id }}">Editar</a></p>
      {% endif %}
    {% endfor %}
  </div>
{% endblock content %}