{% extends 'base.html.twig' %}

{% block title %}{{ 'posts'|trans }}{% endblock %}

{% block body %}
{% if app.user %}
    <div class="d-grid gap-2 d-md-flex justify-content-md-end mb-2">
        <a href="{{ path('app_post_new') }}" class="btn btn-primary">{{ 'create_new_post'|trans }}</a>
    </div>
{% endif %}
<div class="grid-4">
{% for post in posts.iterator %}
    <div class="card">
        {% if post.image %}
            <img src="{{ app.request.baseUrl }}{{ vich_uploader_asset(post, 'imageFile') }}" class="card-img-top" alt="">
        {% endif %}
        <div class="card-body">
            <h5 class="card-title"><a href="{{ path('app_post_show', {id: post.id}) }}">{{ post.species ? post.species.vernacularName : 'post_undefined'|trans }}</a></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 ?? 0 }}, {{ post.longitude ?? 0 }}, {{ post.altitude ?? 0 }}m</p>
            <p class="card-text">{{ post.commentary }}</p>
        </div>
        <div class="card-footer">
            <span class="likes-count">{{ post.likes.count() }}</span>
            {% if app.user %}
                <button class="like-toggle btn no-style {% if post.likes.contains(app.user) %}liked{% else %}not-liked{% endif %}"
                        data-post-id="{{ post.id }}"
                        data-like-url="{{ path('app_posts_like', {id: post.id}) }}"
                        data-unlike-url="{{ path('app_posts_unlike', {id: post.id}) }}">
                    {% if post.likes.contains(app.user) %}❤️{% else %}♡{% endif %}
                </button>
            {% else %}
                <span class="like-toggle no-style not-liked">♡</span>
            {% endif %}
            {{ post.comments.count() }} 💬
        </div>
    </div>
{% endfor %}
</div>
{% include '_pagination.html.twig' %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/like_toggle.js') }}"></script>
{% endblock %}