{% extends "layout.html" %}

{% load i18n %}
{% load thumbnail %}

{% block title %}
    {% trans 'Compare' %} | {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
<ul class="breadcrumb">
    <li class="breadcrumb-item">
        <a href="{{ homepage_url }}">{% trans "Home" %}</a>
    </li>
    <li class="breadcrumb-item">
        <a href="{% url 'catalogue:index' %}">{% trans "Catalogue" %}</a>
    </li>
    <li class="active breadcrumb-item">{% trans 'Compare' %}</li>
</ul>
{% endblock %}

{% block header %}
<div class="page-header">
    <button onclick="history.back()" class="btn btn-primary mb-5">{% trans 'Back to previous page' %}</button>
    <h1>{% trans 'Compare' %}</h1>
</div>
{% endblock header %}

{% block content %}
<div class="table-responsive">
    <table class="table table-bordered table-hover">
        {% block table_head %}
        <thead>
            <tr>
                <td rowspan="2"></td>
                {% for product in products %}
                <td>
                    <a href="{{ product.get_absolute_url }}">{{ product.get_title }}</a>
                </td>
                {% endfor %}
            </tr>
            <tr>
                {% for product in products %}
                <td>
                {% with image=product.primary_image %}
                    {% thumbnail image.original "150x150" upscale=False as thumb %}
                        <a href="{{ product.get_absolute_url }}">
                            <img class="thumbnail" src="{{ thumb.url }}" alt="{{ product.get_title }}"/>
                        </a>
                    {% endthumbnail %}
                {% endwith %}
                </td>
                {% endfor %}
            </tr>
        </thead>
        {% endblock %}
        {% block table_body %}
        <tbody>
            {% for attr, values in attributes.items %}
            <tr>
                <td>{{ attr }}</td>
                {% for value in values %}
                <td>{{ value|default:"-"|safe }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
        {% endblock %}
    </table>
</div>
{% endblock %}