{% extends "catalogue/browse.html" %}

{% load i18n menu_tags %}

{% block body_class %}category{% endblock %}

{% block title %}
    {{ category.name }} | {{ block.super }}
{% endblock %}

{% block description %}
    {{ category.description|default:""|striptags }}
{% endblock %}

{% block header %}
    {% if not category.image %}
        <div class="page-header action text-center mb-4 mt-4">
            {% if user.is_staff %}
                <a class="pull-right hidden-xs" href="{% url 'dashboard:catalogue-category-update' pk=category.id %}">
                    <small><i class="icon-edit"></i> {% trans "Edit this category" %}</small>
                </a>
            {% endif %}
            <h1>{% block headertext %}{{ category.name }}{% endblock %}</h1>
        </div>
    {% endif %}
{% endblock %}

{% comment %}
{% block breadcrumbs %}
    <ul class="breadcrumb">
        <li>
            <a href="{{ homepage_url }}">{% trans "Home" %}</a>
        </li>
        {% for category in category.get_ancestors %}
            <li>
                <a href="{{ category.get_absolute_url }}">{{ category.name }}</a>
            </li>
        {% endfor %}
        <li class="active">{{ category.name }}</li>
    </ul>
{% endblock breadcrumbs %}
{% endcomment %}
{% block content %}
    {% block category_header_image %}
        {% if category.image %}
            <div style="background-image: url({{ category.image.url }})"
                 class="category-header d-flex justify-content-end mb-2 mb-sm-5">
                {% if category.description %}
                    <div class="container d-none d-sm-block">
                        <div class="row">
                            <div class="col-lg-5 col-md-6 offset-md-3 offset-lg-7 align-self-center header-content">
                                {{ category.description|safe }}
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
            <div class="container d-block d-sm-none">
                <div class="row">
                    <div class="col-12 text-center">
                        {{ category.description|safe }}
                    </div>
                </div>
            </div>
        {% endif %}
    {% endblock %}
    {{ block.super }}
{% endblock %}
{% block onbodyload %}
    {{ block.super }}
    var productIDs = [];
    $.each($('.product-card'), function (index, productCard) {
        productIDs.push($(productCard).data('product-id'));
    });
    fbq('track', 'ViewContent', {
        //value: 2,
        //currency: 'SGD',
        content_ids: productIDs,
        content_type: 'product',
  });
{% endblock %}