{% extends 'base.html.twig' %}
{% block title %}Posts!{% endblock %}

{% block body %}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>
</html>
<a href="/species/add" class="btn btn-primary">Ajouter une espèce</a>
<a href="/post/add" class="btn btn-primary">Ajouter un post</a>

{% for post in posts.iterator %}
    <div class="card" style="width: 42rem; margin: 20px 0 50px 100px;">
        <div class="card-body">
            <h5 class="card-title">User</h5>
            <h6 class="card-subtitle mb-2 text-muted">{{ post.foundDate | date("d/m/Y \\à H \\h") }}</h6>
            <p class="card-subtitle mb-2 text-muted">{{ post.latitude }}, {{ post.longitude }}, {{ post.altitude }}m</p>
            <p class="card-text">{{ post.commentary }}</p>
        </div>
        <div class="card-footer">
            <a class="fa fa-heart">28</a>
            <a class="fa fa-comment">128</a>
        </div>
    </div>
{% endfor %}


{% if posts.count > maxPosts %}
    <a class="btn btn-primary" href="/?page" id="load-more" style="margin: 20px 0 50px 100px;">Load More</a>
{% endif %}
<script>
    const loadMoreBtn = document.getElementById('load-more');

    loadMoreBtn.addEventListener('click', function() {
            {{maxPosts}} += 10;
    });
</script>
{% endblock %}
