{% load i18n ocyan_thumbnail %}

{% if category.description.strip or category.image %}
<div class="category-description row">
    <div class="{% if category.image %}col-sm-9{% else %}col-sm-12{% endif %}">
        <div class="description-wrapper-wrapper preload">
            <div class="description-wrapper {% if readmore and category.description|safe|length > 600 %}collapse{% endif %}" id="description-wrapper">
                {{ category.description|safe }}
            </div>
            {% if readmore and category.description|safe|length > 600 %}
            <button class="btn-description collapse collapsed" data-bs-toggle="collapse" data-bs-target="#description-wrapper" aria-label="Read more"><span class="bs-more">{% trans "Read more" %}</span><span class="bs-less">{% trans "Read less" %}</span></button>
            {% endif %}
        </div>
    </div>
    {% if category.image %}
    <div class="col-sm-3">
        {% responsive_image category.image.file alt=category.name %}
    </div>
    {% endif %}
</div>
{% endif %}