<section class="hero is-large auto-dark">
    <div class="hero-head">
        <header class="navbar" aria-label="main navigation">
            <div class="container">
                <div class="navbar-brand header-title">
                    <a class="navbar-item is-uppercase has-text-weight-semibold" href="<%= url_for('/') %>">                        
                        <%= config.title %>
                    </a>
                    <a role="button" class="navbar-burger" data-target="header-menu" aria-label="menu" aria-expanded="false">
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                    </a>
                </div>
                <div class="navbar-menu" id="header-menu">
                    <div class="navbar-end">
                        <% for (let item of theme.menubar) { %>
                            <a class="navbar-item is-uppercase" href="<%= item[0] %>">
                                <%= item[1] %>
                            </a>
                        <% } %>
                    </div>
                </div>
            </div>
        </header>
    </div>

    <div class="hero-body">
        <div class="container has-text-centered">
            <p class="title">
                <span class="is-size-2 is-family-monospace is-uppercase">
                    <% if (theme.logo.enable) { %>
                        <img id="logo" data-src-lightmode="<%= theme.logo.lightmode %>" 
                             data-src-darkmode="<%= theme.logo.darkmode %>" style="max-width: 200px;" />
                    <% } else { %>
                        <%= config.title %>
                    <% } %>
                </span>
            </p>
            <p class="subtitle is-size-6">
                <%- config.description %>
                <div>
                    <% for (let index in theme.navbar) { %>
                        <% 
                            const mapping = theme.navbar[index];
                            const link = mapping[0];
                            const favicon = mapping[1];
                            const description = mapping[2];
                            let outter = link.startsWith("https://") ? true : false;
                        %>
                        <% if (outter) { %>
                            <a href="<%= link %>" target="_blank" rel="noopener noreferrer">
                        <% } else { %>  
                            <a href="<%= link %>">
                        <% } %>
                            <span class="icon-text">
                                <span class="icon">
                                    <i class="<%= favicon %>"></i>
                                </span>
                                <span><%= description %></span>
                            </span>
                        </a>
                    <% } %>
                </div>
            </p>
        </div>
    </div>
</section>