<div class="main-content flex-fill grid-bg">
    <div class="big-header-banner">
        <div id="header" class="page-header sticky">
            <div class="navbar navbar-expand-md">
                <div class="container-fluid p-0">

                    <a href="" class="navbar-brand d-md-none" title="{{ .Site.Title }}">
                        <img src="{{ absURL $.Site.Params.images.logoCollapseLight }}" class="logo-light"
                            alt="{{ .Site.Title }}">
                        <img src="{{ absURL $.Site.Params.images.logoCollapseDark }}" class="logo-dark d-none"
                            alt="{{ .Site.Title }}">
                    </a>

                    <div class="collapse navbar-collapse order-2 order-md-1">
                        <div class="header-mini-btn">
                            <label>
                                <input id="mini-button" type="checkbox">
                                <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                                    <path class="line--1" d="M0 40h62c18 0 18-20-17 5L31 55"></path>
                                    <path class="line--2" d="M0 50h80"></path>
                                    <path class="line--3" d="M0 60h62c18 0 18 20-17-5L31 45"></path>
                                </svg>
                            </label>

                        </div>

                        <ul class="navbar-nav site-menu" style="margin-right: 16px;">
                        {{ range .Site.Data.headers }}
			<li {{ if .list }}class="menu-item-has-children"{{ end }}>
				<a href="{{ .link }}">
                                    <i class="{{ .icon }} fa-lg mr-2"></i>
                                    <span>{{ .item }}</span>
                                </a>
				<ul class="sub-menu">
				{{ range .list }}
				    <li><a href="{{ .url }}">{{ .name }}</a></li>
				{{ end }}
				</ul>
			    </li>
			{{ end }}
			</ul>

                        {{ if not (eq $.Site.Params.qweather.key "") }}
                        <div class="rounded-circle weather">
                            <div id="he-plugin-simple" style="display: contents;"></div>
                            <script>WIDGET = {
                                    CONFIG: {
                                        "modules": "01234",
                                        "background": 5,
                                        "tmpColor": "E4C600",
                                        "tmpSize": 14,
                                        "cityColor": "E4C600",
                                        "citySize": 14,
                                        "aqiColor": "#E4C600",
                                        "aqiSize": 14,
                                        "weatherIconSize": 24,
                                        "alertIconSize": 18,
                                        "padding": "10px 10px 10px 10px",
                                        "shadow": "1",
                                        "language": "auto",
                                        "borderRadius": 5,
                                        "fixed": "false",
                                        "vertical": "middle",
                                        "horizontal": "left",
                                        "key": "{{ $.Site.Params.qweather.key }}"
                                    }
                                }
                            </script>
                            <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
                        </div>
                        {{ end }}
                    </div>

                    <ul class="nav navbar-menu text-xs order-1 order-md-2">
                        <!-- 一言 -->
                        {{ with .Site.Params.yiyan }}
                        <li class="nav-item mr-3 mr-lg-0 d-none d-lg-block">
                            <script>
                                fetch('https://v1.hitokoto.cn')
                                    .then(response => response.json())
                                    .then(data => {
                                    const hitokoto = document.getElementById('hitokoto_text')
                                    hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
                                    hitokoto.innerText = data.hitokoto
                                    })
                                    .catch(console.error)
                            </script>                           
                            <div id="hitokoto"><a href="#" target="_blank" id="hitokoto_text">疏影横斜水清浅，暗香浮动月黄昏。</a></div>
                        </li>
                        {{ end }}
                        <!-- 一言 end -->
                        <!--li class="nav-search ml-3 ml-md-4">
                            <a href="javascript:" data-toggle="modal" data-target="#search-modal"><i
                                    class="iconfont icon-search icon-2x"></i></a>
                        </li-->
                        <li class="nav-item d-md-none mobile-menu ml-3 ml-md-4">
                            <a href="javascript:" id="sidebar-switch" data-toggle="modal"
                                data-target="#sidebar"><i class="iconfont icon-classification icon-2x"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="placeholder" style="height:74px"></div>
    </div>
