{% extends 'layout/home.html' %}
{% block content %}
<div class="container" style="width: 100%; height: 100%">
<a class="btn btn-primary" href="new" style="width: 100%; padding: 1rem; margin: 2rem">New Game Post</a>
<div class="cards columns">
  <h1>Here is a presentation of my games.</h1>
  {% for gamepost in gameposts %}
    <div class="card border-dark mb-3" style="width: 100%; text-align: center;">
      <img class="card-img-top" src="{{gamepost.thumbnail}}" width="100%" alt="Card image cap">
      <div class="card-body">
	<h3 class="card-title" title="{{gamepost.title}}">{{gamepost.title}}</h3>
        <p class="card-text">{{gamepost.content}}</p>
	<a href="{{gamepost.pk}}" class="stretched-link btn btn-primary">See the game</a>
      </div>
      <ul class="list-group list-group-flush">
        {% for gamepostcomment in gamepostcomments %}
          <li class="list-group-item">{{gamepostcomment.author}}: {{gamepostcomment.content}}</li>
        {% endfor %}
      </ul>
      </div>
  {% endfor %}
</div>
</div>
{% endblock content %}