<header class="bg-sky-600 shadow-sm sticky top-0 dark:bg-violet-700">
    <div class="border-b border-sky-700 dark:border-violet-800">
        <div class="container flex flex-wrap justify-between items-center space-x-6 mx-auto p-4 md:flex-row xl:max-w-screen-xl">
            <a href="." class="flex items-center space-x-2 p-1" title="{{ config('site_title') }}">
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="folder-tree" class="inline-block fill-current text-white w-8 h-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                    <path fill="currentColor" d="M544 32H432L400 0h-80a32 32 0 0 0-32 32v160a32 32 0 0 0 32 32h224a32 32 0 0 0 32-32V64a32 32 0 0 0-32-32zm0 288H432l-32-32h-80a32 32 0 0 0-32 32v160a32 32 0 0 0 32 32h224a32 32 0 0 0 32-32V352a32 32 0 0 0-32-32zM64 16A16 16 0 0 0 48 0H16A16 16 0 0 0 0 16v400a32 32 0 0 0 32 32h224v-64H64V160h192V96H64z"></path>
                </svg>
            </a>

            <div class="flex-1 max-w-xl">
                {% include 'components/search.twig' %}
            </div>

            <div class="flex items-center justify-center w-6">
                {% include 'components/theme-toggle.twig' %}
            </div>
        </div>
    </div>

    <div class="border-t border-sky-500 dark:border-violet-600">
        <div class="container flex flex-wrap justify-between items-center space-x-6 mx-auto px-4 py-1 md:flex-row xl:max-w-screen-xl">
            {% include 'components/breadcrumbs.twig' %}

            {% if path and files is not empty and config('zip_downloads') %}
                <a href="{{ zip_url(path) }}" title="{{ translate('download') }}" rel="nofollow"
                    class="flex justify-center items-center text-sm text-white w-6 hover:text-slate-300"
                >
                    <i class="fas fa-download fa-lg"></i>
                </a>
            {% endif %}
        </div>
    </div>
</header>
