{% extends 'base.html' %}

{% block content %}
<div class="container" style="width: 1100px;">
      <h1 style="color: white; font-size: 8ch;">Aleks' Blog</h1>

    <form>
      {% if is_admin %}
        <a href="newpost"><button type="button" class="btn btn-secondary">New Post</button></a>
      {% endif %}
      <input type="button" value="Back" onclick="history.back()" class="btn btn-info">
    </form>

      {% for post in posts reversed %} 
      <div class="card" style="background-color: rgb(46, 46, 46);">
        <div class="card-body">
          <a href="/post/{{post.id}}"><h1 class="card-title" style="color: rgb(20, 157, 221);">{{ post.title }}</h1></a>
          <p class="card-text" style="color: white;">{{ post.body|truncatewords:20 }}</p>
          {% if is_admin %}
          <a href="/post/{{post.id}}/edit" class="btn btn-outline-light">Edit</a>
          <a href="/post/{{post.id}}/delete"><button type="button" class="btn btn-outline-danger">Delete</button></a>
          {% endif %}
        </div>
      </div>
      <br/>
      {% endfor %}
</div>


{% endblock %}