<div class="section-title mt-8 mb-4 {{type == 'home' ? 'mx-4' : 'mx-0'}} lg:mx-0 pb-2 border-b flex justify-between items-center">
    <div class="text-primary uppercase font-semibold">{{title}}</div>
    {% if controls %}
    <div class="controls hidden md:flex md:items-center">
        <button id="slideback_{{slider_id}}" class="slide_nav text-primary" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 15.75 3 12m0 0 3.75-3.75M3 12h18" />
            </svg>
        </button>
        <button id="slidenext_{{slider_id}}" class="slide_nav text-primary" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
            </svg>
        </button>
    </div>
    {% endif %}
</div>
