<header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="<%- url_for() %>" id="logo">
                <%- (theme.customize.logo && theme.customize.logo.enabled ? '<i class="logo"></i>':'') %>
                <span class="site-title"><%= config.title %></span>
            </a>
            <nav id="main-nav">
                <% for (var i in theme.menu) { %>
                    <a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
                <% } %>
            </nav>
            <% if(theme.customize.profile && theme.customize.profile.enabled) { %>
                <% var profile = theme.customize.profile; %>
                <nav id="sub-nav">
                    <div class="profile" id="profile-nav">
                        <a id="profile-anchor" href="javascript:;">
                            <img class="avatar" src="<%= ( profile.gravatar ? gravatar(profile.gravatar) : url_for(profile.avatar)) %>" />
                            <i class="fa fa-caret-down"></i>
                        </a>
                    </div>
                </nav>
            <% } %>
            <%- partial('search/index') %>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tr>
                <% for (var i in theme.menu) { %>
                    <td><a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a></td>
                <% } %>
                <td>
                    <%- partial('search/index-mobile') %>
                </td>
            </tr>
        </table>
    </div>
</header>
