<div id="top-bar"
             class="top-0 fixed z-50 w-full flex flex-row justify-start shadow-sm h-12 bg-white dark:bg-stone-900 text-stone-800 dark:text-stone-200 antialiased border-b dark:border-stone-800"
        >

            <a class="inline-flex px-4 items-center hover:bg-amber-600 hover:bg-opacity-10 dark:hover:bg-stone-800" href="/">
                <div class="">
                    <img src="/icons/logo-only-36.svg">
                </div>
                <span class="ml-1 text-xl font-bold font-serif hidden sm:inline">
                    Docspell
                </span>
            </a>

            <div class="flex items-center">
                <div class="text-xs py-1 px-1 rounded-full border opacity-50">
                    {{ config.extra.version }}
                </div>
            </div>

            <div class="flex-grow place-items-end">


            </div>
            <div id="search"></div>
            <a href="/docs" class="inline-flex px-4 items-center hover:bg-amber-600 hover:bg-opacity-10  dark:hover:bg-stone-800"
               title="Documentation"
            >
                <i class="fa fa-book">
                </i>
            </a>
            <a href="/blog" class="inline-flex px-4 items-center hover:bg-amber-600 hover:bg-opacity-10  dark:hover:bg-stone-800"
               title="Blog"
            >
                <i class="fa fa-blog">
                </i>
            </a>
            <a target="_blank" href="https://github.com/eikek/docspell"
               class="inline-flex px-4 items-center hover:bg-amber-600 hover:bg-opacity-10  dark:hover:bg-stone-800"
               title="Github"
            >
                <i class="fab fa-github-alt">
                </i>
            </a>

            <div class="lights-container relative inline-flex px-4 items-center hover:bg-amber-600 hover:bg-opacity-10  dark:hover:bg-stone-800 ">
                <a href="#"
                   class="lights-switch h-full w-full inline-flex items-center"
                   title="Lights on/off" >
                    <i class="fa fa-adjust">
                    </i>
                </a>
                <div class="lights-menu text-sm flex flex-col shadow bg-white dark:bg-stone-800 border dark:border-stone-800 absolute top-12 right-2 divide-y dark:divide-stone-700 hidden">
                    <a class="lights-to-dark flex flex-row items-center py-2 px-4 hover:bg-amber-600 hover:bg-opacity-10  dark:hover:bg-stone-700 cursor-pointer">
                        <i class="fa fa-moon mr-2"></i>
                        <span>Dark</span>
                    </a>
                    <a class="lights-to-light flex flex-row items-center py-2 px-4 hover:bg-amber-600 hover:bg-opacity-10  dark:hover:bg-stone-700 cursor-pointer">
                        <i class="fa fa-sun font-thin mr-2"></i>
                        <span>Light</span>
                    </a>
                    <a class="lights-to-system flex flex-row items-center py-2 px-4 hover:bg-amber-600 hover:bg-opacity-10  dark:hover:bg-stone-700 cursor-pointer">
                        <i class="fa fa-laptop mr-2"></i>
                        <span>System</span>
                    </a>

                </div>
            </div>

        </div>