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

{% load i18n %}

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

{% block description %}
    {{ category.get_meta_description }}
{% endblock %}

{% block header%}
    <div class="page-header">
        {% if user.is_staff %}
            <a class="float-right d-none d-md-block" href="{% url 'dashboard:catalogue-category-update' pk=category.id %}">
              <small><i class="fas fa-pencil-alt"></i> {% trans "Edit this category" %}</small></a>
        {% endif %}
        <h1>{% block headertext %}{{ category.name }}{% endblock %}</h1>
    </div>
{% endblock %}

{% block breadcrumbs %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ homepage_url }}">{% trans "Home" %}</a></li>
            {% for category in category.get_ancestors %}
                <li class="breadcrumb-item"><a href="{{ category.get_absolute_url }}">{{ category.name }}</a></li>
            {% endfor %}
            <li class="breadcrumb-item active" aria-current="page">{{ category.name }}</li>
        </ol>
    </nav>
{% endblock breadcrumbs %}

{% block content %}
    {% if category.description %}
        <div class="row">
            <div class="col-sm-9"><p>{{ category.description|safe }}</p></div>
            {% if category.image %}
                <div class="col-sm-3"><img src="{{ category.image.url }}" alt="{{ category.name }}" class="img-fluid" /></div>
            {% endif %}
        </div>
    {% endif %}

    {{ block.super }}

    {% if category.long_description %}
        <div class="row">
            <div class="col-sm-9"><p>{{ category.long_description|safe }}</p></div>
        </div>
    {% endif %}
{% endblock %}
