{% liquid
  if article == blank
    continue
  endif
%}
<div class="hdt-article-navigation hdt-row-grid md:hdt-grid-cols-2 hdt-grid-cols-2 hdt-w-full hdt-section-spacing" style="--section-pt: {{ block.settings.padding_top }}px; --section-pb: {{ block.settings.padding_bottom }}px; --section-prate:{{ block.settings.padding_rate }};" {{ block.shopify_attributes }}>
  <article class="hdt-article-item hdt-article-previous hdt-justify-start hdt-flex hdt-relative"  timeline hdt-reveal="slide-in">
    {%- if blog.previous_article -%}
      <a href="{{ blog.previous_article.url }}" class="hdt-button-navigation hdt-inline-flex hdt-align-center hdt-justify-center hdt-s-text"><svg xmlns="http://www.w3.org/2000/svg" width="7" height="11" viewBox="0 0 7 11" fill="none">
        <path d="M5.5 11L0 5.5L5.5 0L6.47625 0.97625L1.9525 5.5L6.47625 10.0238L5.5 11Z" fill="currentColor"/>
      </svg></a>
      <div class="hdt-article-inner hdt-oh hdt-text-start hdt-flex hdt-flex-col">
        <a href="{{ blog.previous_article.url }}" class="hdt-article-nav_btn hdt-article-navigation__previous hdt-text-xs hdt-font-bold hdt-s-text">{{ 'blogs.article.previous' | t }}</a>
        <div class="hdt-main-article-info hdt-line-clamp ">
          <h6 class="hdt-article-title hdt-font-normal hdt-h6"><a href="{{ blog.previous_article.url }}">{{ blog.previous_article.title }}</a></h6>
        </div>
      </div>
    {%- endif -%}
  </article>
  <article class="hdt-article-item hdt-article-next hdt-justify-end hdt-flex hdt-raletive" timeline hdt-reveal="slide-in">
    {%- if blog.next_article -%}
      <div class="hdt-article-inner hdt-oh hdt-text-end hdt-flex hdt-flex-col">
        <a href="{{ blog.next_article.url }}" class="hdt-article-nav_btn hdt-article-navigation__next hdt-text-xs hdt-font-bold hdt-s-text">{{ 'blogs.article.next' | t }}</a>
        <div class="hdt-main-article-info hdt-line-clamp ">
          <h6 class="hdt-article-title hdt-font-normal hdt-h6"><a href="{{ blog.next_article.url }}">{{ blog.next_article.title }}</a></h6>
        </div>
      </div>
      <a href="{{ blog.next_article.url }}" class="hdt-button-navigation hdt-inline-flex hdt-align-center hdt-justify-center hdt-s-text hdt-s-text"><svg xmlns="http://www.w3.org/2000/svg" width="7" height="11" viewBox="0 0 7 11" fill="none">
        <path d="M1.5 11L7 5.5L1.5 0L0.52375 0.97625L5.0475 5.5L0.52375 10.0238L1.5 11Z" fill="currentColor"/>
      </svg></a>
    {%- endif -%}
  </article>
</div>
{% schema %}
  {
    "name": "Navigation",
    "tag":null,
    "settings": [
      {
        "type": "article",
        "id": "article",
        "label": "Article"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "t:sections.all.padding.padding_top",
        "default": 0
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "t:sections.all.padding.padding_bottom",
        "default": 30
      },
      {
        "type": "range",
        "id": "padding_rate",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "%",
        "label": "t:sections.all.padding.padding_rate",
        "default": 75
      }
    ],
    "presets":[
      {
        "name":"Navigation",
      }
    ]
  }
{% endschema %}
