<%
if (!page.banner_img) {
  page.banner_img = theme.post.banner_img
}
page.banner_img_height = theme.post.banner_img_height
page.banner_mask_alpha = theme.post.banner_mask_alpha
%>

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-md">
      <div class="container nopadding-md" id="board-ctn">
        <div class="py-5" style="border: 0px;outline: 1px solid rgb(204,204,204);" id="board">
          <div class="post-content mx-auto" id="post">
            <% if(theme.post.updated && theme.post.updated.enable) { %>
              <p class="note note-info">
                <% if (theme.post.updated.relative) { %>
                  <%- theme.post.updated.content %><%- relative_date(page.updated, theme.post.meta.date.format) %>
                <% } else { %>
                  <%- theme.post.updated.content %><%- date(page.updated, theme.post.meta.date.format) %>
                <% } %>
              </p>
            <% } %>
            <article class="markdown-body">
              <%- page.content %>
            </article>
            <hr>
            <div>
              <div class="post-metas mb-3">
                <% if (page.categories && page.categories.length > 0) { %>
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    <% page.categories.each(function(cate) { %>
                      <a class="hover-with-bg" href="<%= url_for(cate.path) %>"><%- cate.name %></a>
                    <% }) %>
                  </div>
                <% } %>
                <% if (page.tags && page.tags.length > 0 ) { %>
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    <% page.tags.each(function(tag) { %>
                      <a class="hover-with-bg" href="<%= url_for(tag.path) %>"><%- tag.name %></a>
                    <% }) %>
                  </div>
                <% } %>
              </div>
              <% if(theme.post.copyright.enable && theme.post.copyright.content && page.copyright !== false) { %>
                <p class="note note-warning"><%- theme.post.copyright.content %></p>
              <% } %>
              <% if(theme.post.prev_next.enable && !page.hide) { %>
                <div class="post-prevnext row">
                  <div class="post-prev col-6">
                    <% const prev = prev_page(page) %>
                    <% if (prev) { %>
                      <a href="<%= url_for(prev.path) %>">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile"><%- prev.title %></span>
                        <span class="visible-mobile"><%= __('post.pre') %></span>
                      </a>
                    <% } %>
                  </div>
                  <div class="post-next col-6">
                    <% const next = next_page(page) %>
                    <% if (next) { %>
                      <a href="<%= url_for(next.path) %>">
                        <span class="hidden-mobile"><%- next.title %></span>
                        <span class="visible-mobile"><%= __('post.next') %></span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    <% } %>
                  </div>
                </div>
              <% } %>
            </div>

              <!-- Comments -->
              <div class="comments" id="comments">
                  <script src="https://utteranc.es/client.js"
                    repo="wwhai/gitalk"
                    issue-term="url"
                    label="[Utterances]"
                    theme="preferred-color-scheme"
                    crossorigin="anonymous"
                    async>
                  </script>
              </div>

          </div>
        </div>
      </div>
    </div>
    <% if(theme.post.toc.enable && page.toc != false){ %>
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <%- partial('_partial/toc') %>
      </div>
    <% } %>
  </div>
</div>

<!-- Custom -->
<% if(theme.post.custom.enable && theme.post.custom.content && page.custom !== false) { %>
  <div class="col-lg-7 mx-auto nopadding-md">
    <div class="container custom post-content mx-auto">
      <%- page.custom || theme.post.custom.content %>
    </div>
  </div>
<% } %>
