{{! The header includes the site's logo, wordmark, search bar and user menu. }}

<header id="site-header">

    <div id="site-header-marks">
        {{#data-logos}}
        <img id="site-header-icon" src="{{{icon}}}" />
            <a href="https://phialfantasy.wiki">
                <img id="site-header-wordmark" src="{{{wordmark.src}}}" />
            </a>
        {{/data-logos}}
    </div>

    <div id="site-header-container">

        <div id="site-header-search">
            {{#data-search-box}}
                <form action="{{{form-action}}}">
                    <input id="site-header-search-bar" {{{html-input-attributes}}}>
                    <input value="" {{{html-button-go-attributes}}}>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" id="site-header-search-icon">
                        <title>
                            Search
                        </title>
                        <path fill="currentColor" d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/>
                    </svg>
                </form>
            {{/data-search-box}}
        </div>

        <div class="site-header-user layout-mouse">
            <button class="user-clientpref-1">User</button> {{! This button's content is a fallback, replaced with the user's username via Javascript. }}
            <div id="site-header-user-links">
                <ul class="drop-link-list">
                    {{#data-portlets.data-user-menu}}
                        {{{html-items}}}      
                    {{/data-portlets.data-user-menu}}
                </ul>
            </div>
        </div>

    </div>

    <div class="site-header-user layout-touch">
        <button>User</button> {{! This button's content is a fallback, replaced with the user's username via Javascript. }}
        <div id="site-header-user-links">
            <ul class="drop-link-list">
                {{#data-portlets.data-user-menu}}
                    {{{html-items}}}      
                {{/data-portlets.data-user-menu}}
            </ul>
        </div>
    </div>

    <noscript>
        <style>
            .color-scheme-toggle {
                display: none;
            }
        </style>
    </noscript>

    {{! These buttons are for a possible on-site color scheme toggle, currently hidden with CSS. }}
    <button id="toggle-to-light" class="color-scheme-toggle">☀️</button>
    <button id="toggle-to-dark" class="color-scheme-toggle">🌙</button>

</header>

