{% extends 'catalogue/browse.html' %}
{% load i18n %}

{% block title %}{% if category.seo_title %}{{ category.seo_title }}{% else %}{{ category.name }}{% endif %}{% endblock %}
{% block description %}{% if category.seo_description %}{{ category.seo_description }}{% endif %}{% endblock %}

{% block header_title %}
    {{category.name}}
{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block header_breadcrumbs %}
    <ol class="breadcrumb my-3 bg-light">
        <li class="breadcrumb-item">
            <a href="{% url 'wagtail_serve' '' %}">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">{{ category.name }}</li>
    </ol>
{% endblock %}

{% block content %}
    {% if category.description %}
        <div class="row">
            <div class="{% if category.image %}col-sm-9{% else %}col-sm-12{% endif %}">
                <div class="description-wrapper-wrapper">
                    <div class="description-wrapper mb-4">{{ category.description|safe }}
                        <a class='open_max_desc' style="display:none;">
                            <span class="desc_closed_text">{% trans 'Read more' %}</span>
                            <span class="desc_open_text" style="display:none;">{% trans 'Hide' %}</span>
                        </a>
                    </div>
                </div>
            </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}}
{% endblock %}