<!DOCTYPE html>
<html lang="<%= config.language %>">

<%
var subtitle = page.subtitle || page.title
var banner_img = page.banner_img || theme.index.banner_img
var banner_img_height = page.banner_img_height || theme.index.banner_img_height
%>

<%- partial('_partial/head') %>

<body>
  <header style="height: <%- banner_img_height %>vh;">
    <%- partial('_partial/nav') %>
    <div class="view intro-2"
         style="background: url('<%- banner_img %>')no-repeat center center;
           background-size: cover;
           background-attachment: <%- theme.banner_scroll == true ? 'scroll' : 'fixed' %>;">
      <div class="full-bg-img">
        <div class="mask rgba-black-light flex-center">
          <div class="container text-center white-text fadeInUp">
            <span class="h2" id="subtitle">
              <% if(theme.fun_features.typing.enable == false) { %>
                <%- subtitle %>
              <% } %>
            </span>

            <% if(is_post()) { %>
              <br>
              <p><%- full_date(page.date, theme.post.date_format) %></p>
            <% } %>
          </div>

          <% if (theme.scroll_down_arrow.enable && theme.scroll_down_arrow.banner_height_limit <= banner_img_height) { %>
            <div class="scroll-down-bar">
              <i class="fa fa-angle-down scroll-down-arrow"></i>
            </div>
          <% } %>
        </div>
      </div>
    </div>
  </header>

  <main>
    <% if(is_post() || page.layout == '404') { %>
      <%- body %>
    <% } else { %>
      <div class="container nopadding-md">
        <div class="py-5 m-depth" id="board">
          <% if(page.layout == 'about') { %>
            <div class="about-avatar">
              <img src="<%- url_for(theme.about.avatar) %>"
                   class="img-fluid m-depth rounded-circle"
                   alt="avatar">
            </div>
          <% } %>
          <div class="container">
            <div class="row">
              <div class="col-12 col-md-10 m-auto">
                <%- body %>
              </div>
            </div>
          </div>
        </div>
      </div>
    <% } %>
  </main>

  <% if (theme.scroll_top_arrow.enable) { %>
    <a class="m-depth" id="scroll-top-button" href="#" role="button">
      <i class="fa fa-chevron-up scroll-top-arrow" aria-hidden="true"></i>
    </a>
  <% } %>

  <% if(theme.search.enable) { %>
    <%- partial('_partial/search') %>
  <% } %>

  <%- partial('_partial/footer', { data: { 'subtitle': subtitle } }) %>
</body>
</html>
