description = "Page Navigation"

[viewBag]
==
<div class="page-nav d-none d-md-block invisible opacity-0 transition-80 position-fixed z-10">
    {% if prev_title|length > 0 %}
    <div class="previous position-fixed pos-t-half pos-l-0">
        <a href="{{ prev_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 Page</span>
                </div>
                <p class="d-flex justify-content-start text-dark mb-0">{{ prev_title }}</p>
            </div>
        </a>
    </div>
    {% endif %}
    <!--{ if parent_title|length > 0 %}
    <div class="next position-fixed pos-t-half pos-r-0">
        <a href="{ parent_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">Parent Page</span>
                </div>
                <p class="d-flex justify-content-end text-dark mb-0">{ parent_title }}</p>
            </div>
        </a>
    </div>
    { endif %}-->
    {% if next_title|length > 0 %}
    <div class="next position-fixed pos-t-half pos-r-0">
        <a href="{{ next_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 Page</span>
                </div>
                <p class="d-flex justify-content-end text-dark mb-0">{{ next_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 %}