{% extends 'base.html' %}

{% block content %}
    {% load bulma_tags %}
    {% load unicorn %}
    {% load static %}

    <div class="container" unicorn:view>
        <h1 class="is-1 is-size-1-desktop is-size-3-mobile has-text-centered mb-6">Catégorie</h1>
        <div class="level" id="ttm-loader">
            <div class="level-item">
                <img src="{% static 'monkaS.png' %}" class="loader">
            </div>
        </div>
        <div id="loading-images">
            {% for category in categories %}
                <h2 class="is-2 is-size-3-desktop is-size-4-mobile is-underlined has-text-centered my-5">{{ category.name }}</h2>
                <div class="columns is-multiline is-mobile is-variable is-1-touch">
                    {% for meme in category.get_memes %}
                        <div class="column is-one-quarter-desktop is-half-touch">
                            {% unicorn 'meme_card' parent=view meme=meme key=meme.id id=meme.id %} {# parent=view #}
                        </div>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
        {% unicorn 'meme_card_modal' %}
    </div>
    {% include 'loader.html' %}


{% endblock %}

{% load unicorn %}
<div class="card">
    <a class="card-image js-modal-trigger" data-target="modal-js-example" unicorn:click="set_meme_modal({{ meme.id }})">
        <figure class="image">
            {#                <img src="{{ meme.image.url }}" class="is-hidden-touch" alt="Meme image" loading="lazy">#}
            {% if meme.image_compressed %}
                <img src="{{ meme.image_compressed.url }}" alt="Meme image" loading="lazy">
            {% else %}
                <img src="{{ meme.image.url }}" alt="Meme image" loading="lazy">
            {% endif %}
        </figure>
    </a>
    <div class="card-content">
        <div class="media">
            <div class="media-content">
                <p class="title is-size-4-desktop is-size-5-mobile">{{ meme.title }}</p>
                {% if memes_result %}
                    <p class="is-6">Catégories :</p>
                    <div class="tags">
                        {% for category in meme.categories.all %}
                            <span class="tag">{{ category.name }}</span>
                        {% endfor %}
                    </div>
                {% endif %}
                <p class="subtitle is-6">Uploadé par <b>{{ meme.user }}</b></p>
            </div>
        </div>
    </div>
    {% unicorn 'meme_card_footer' meme=meme %}
</div>

from django_unicorn.components import UnicornView

from trouve_ton_meme.models import Meme


class MemeCardView(UnicornView):
    meme = Meme.objects.none()

    def set_meme_modal(self, meme_id):
        print(self.parent)
        meme = Meme.objects.get(id=meme_id)
        self.parent.modal_meme = meme