description = "Post Page Navigation"
==
{% set pageObject = this.controller.getPageObject() %}
{% set nextPostRecord = pageObject.nextPost(blogPost.post) %}
{% set previousPostRecord = pageObject.previousPost(blogPost.post) %}
<div class="page-nav d-none d-md-block invisible opacity-0 transition-80 position-fixed z-10">
    {% if previousPostRecord %}
    <div class="previous position-fixed pos-t-half pos-l-0">
        <a href="{{previousPostRecord.url}}" rel="prev" class="post-nav-link d-flex justify-content-center align-items-center w-10r h-24r p-0 btn btn-square btn-default">
            <i class="fa fa-chevron-left"></i> 
            <div class="post-nav-details d-flex flex-column justify-content-center position-absolute pos-t-0 pos-l-10 p-4 border-1 w-auto h-24r text-body bg-white z-10n">
                <div class="d-flex justify-content-between">
                    <span class="display-14 mr-4">Previous Post</span>
                    <span class="display-14">
                        <time datetime="{{ previousPostRecord.published_at|date('M d, Y') }}">{{ previousPostRecord.published_at|date('M d, Y') }}</time>
                        <meta itemprop="datePublished" content="{{ previousPostRecord.published_at|date('M d, Y') }}"/>
                    </span>
                </div>
                <p class="d-flex justify-content-start text-dark mb-0">{{ previousPostRecord.title }}</p>
            </div>
        </a>
    </div>
    {% endif %}
    {% if nextPostRecord %}
    <div class="next position-fixed pos-t-half pos-r-0">
        <a href="{{nextPostRecord.url}}" rel="next" class="post-nav-link d-flex justify-content-center align-items-center w-10r h-24r p-0 btn btn-square btn-default">
            <i class="fa fa-chevron-right"></i>
            <div class="post-nav-details d-flex flex-column justify-content-center position-absolute pos-t-0 pos-r-10 p-4 border-1 w-auto h-24r text-body bg-white z-10n">
                <div class="d-flex justify-content-between">
                    <span class="display-14 mr-4">Next Post</span>
                    <span class="display-14">
                        <time datetime="{{ nextPostRecord.published_at|date('M d, Y') }}">{{ nextPostRecord.published_at|date('M d, Y') }}</time>
                        <meta itemprop="datePublished" content="{{ nextPostRecord.published_at|date('M d, Y') }}"/>
                    </span>
                </div>
                <p class="d-flex justify-content-end text-dark mb-0">{{ nextPostRecord.title }}</p>
            </div>
        </a>
    </div>
    {% endif %}
</div>

{% put scripts %}
<script>
//Scroll to top
var pagenav = $('.page-nav');

$(window).scroll(function() {
  if ($(window).scrollTop() > 300) {
    pagenav.addClass('visible opacity-100');
    pagenav.removeClass('invisible');
  } else {
    pagenav.removeClass('visible opacity-100');
    pagenav.addClass('invisible');
  }
});
</script>
{% endput %}