{% extends "customer/baseaccountpage.html" %}
{% load thumbnail %}
{% load i18n %}
{% load currency_filters %}
{% load staticfiles %}
{% load bootstrap4 %}
{% load catalogue_tags %}

{% block tabcontent %}

    <div class="container">

        <div class="row">
            <div class="col-12 text-center mt-5">
                <h1> Mark your preferences </h1>
            </div>
            <div class="col-lg-8 offset-lg-2">
                <p>How it works? Rate the coffees you have tried, thumbs up or thumbs downs. If it is thumbs down, we will make sure we will not send you that coffee ever again!</p>
            </div>
        </div>

        <div class="row">
            {% if products %}
                <div class="col-lg-8 offset-md-2">
                    {% for product in products %}
                        <div class="card product-card border-yellow mb-5">
                            <div class="card-body">
                                <div class="row flex-row align-items-center">
                                    <div class="col-lg-4">
                                        <div class="card-img">
                                            {% block product_image %}
                                                <div class="image_container">
                                                    {% with image=product.primary_image %}
                                                        {% thumbnail image.original "400x250" upscale=True crop="center" as thumb %}
                                                            <a href="{{ product.get_absolute_url }}">
                                                                <img data-src="{{ thumb.url }}" alt="{{ product.get_title }}"
                                                                    class="thumbnail img-fluid lazy">
                                                            </a>
                                                        {% endthumbnail %}
                                                    {% endwith %}
                                                </div>
                                            {% endblock %}
                                        </div>
                                    </div>

                                    <div class="col-lg-4">
                                        <div class="d-block small">
                                            <h3>{{ product.get_title }}</h3>
                                        </div>
                                    </div>

                                    {% define "far" as likeclass %}
                                    {% define "far" as dislikeclass %}

                                    {% if product.preferences_set.all %}
                                        {% get_object product.preferences_set.all as preference %}

                                        {% if preference == 1 %}
                                            {% define "fas" as likeclass %}
                                        {% else %}
                                            {% define "fas" as dislikeclass %}
                                        {% endif %}
                                        
                                    {% endif %}

                                    <div class="col-lg-2">
                                        <i id="like{{ product.pk }}" class="{{ likeclass|default:'far' }} fa-hand-point-left submit_preferences" data-productid="{{ product.pk }}" data-prefereces="1" style="font-size:40px;color:green"><p class="text-center" style="font-size:12px;">Like</p></i>
                                    </div>

                                    <div class="col-lg-2">
                                        <i id="dislike{{ product.pk }}" class="{{ dislikeclass|default:'far' }} fa-thumbs-down submit_preferences" data-productid="{{ product.pk }}" data-prefereces="0" style="font-size:40px;color:red"><p class="text-center" style="font-size:12px;">Dislike</p></i>
                                    </div>

                                </div>
                            </div>
                        </div>
                    {% endfor %}

                    <div class="d-block mt-3 mb-3">
                        {% include "partials/pagination.html" %}
                    </div>

                </div>
            {% else %}
                <div class="col-12 mt-5">
                    <p>{% trans "No products found." %}</p>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock tabcontent %}