{%- assign classitemnext = "invisible" -%}
{%- if page.next.url -%}
 {%- assign classitemnext = "" -%}
{%- endif -%}
{%- assign classitemprevious = "invisible" -%}
{%- if page.previous.url -%}
 {%- assign classitemprevious = "" -%}
{%- endif -%}
{%- assign titleitemprevious = page.previous.title | strip_html  | truncate: 30  -%}
{%- assign titleitemnext = page.next.title | strip_html  | truncate: 30  -%}



<nav aria-label="Navigation" class="container-lg chulapa-pagination  ">
  <ul class="col-lg-8 offset-lg-2 pagination chulapa-pagination-round px-0 ">
    <li class="page-item text-left mr-0 {{ classitemprevious -}}">
      <a class="page-link border-0 px-4" href="{{ page.previous.url | absolute_url | default: "#" }}" tabindex="-1">
	  <i class="fa fa-chevron-left" aria-hidden="true"></i><span class="sr-only">Previous</span>
	  </a>
    </li>
    <li class="page-item border-0 disabled text-left ml-0 mr-auto d-none d-md-inline {{ classitemprevious -}}">
      <p class="page-link chulapa-label">{{ titleitemprevious }}</p>
    </li>
    <li class="page-item border-0 disabled text-left ml-0 mr-auto d-none d-sm-inline d-md-none {{ classitemprevious -}}">
      <p class="page-link chulapa-label">{{ titleitemprevious | truncate: 17 }}</p>
    </li>
	  <li class="page-item disabled mx-auto invisible">
	   <p class="page-link">|</p>
	  </li>	
	  <li class="page-item border-0 disabled text-right mr-0 ml-auto d-none d-sm-inline d-md-none {{ classitemnext -}}">
	    <p class="page-link chulapa-label">{{ titleitemnext | truncate: 17 }}</p>
	  </li>
	  <li class="page-item border-0 disabled text-right mr-0 ml-auto d-none d-md-inline {{ classitemnext -}}">
	    <p class="page-link chulapa-label">{{ titleitemnext }}</p>
	  </li>
    <li class="page-item text-right ml-0 {{ classitemnext -}}">
      <a class="page-link border-0 px-4" href="{{ page.next.url | absolute_url | default: "#" }}">
	  <i class="fa fa-chevron-right" aria-hidden="true"></i><span class="sr-only">Next</span></a>
    </li>
  </ul>
</nav>