{% assign items = paginator.posts | sort: 'date_modified' | reverse %}
{% if page.hero_blog.i_bg_image %}
{% assign main_hero_bg = '' %}
  {% capture main_hero_bg %}{% picture open_graph_2000 pages/{{ page.hero_blog.i_bg_image}} %}{% endcapture %}
  {% endif %}
<section class="industry_hero accounting_blogs_hero" style="background-image: url('{{ site.baseurl }}{{ main_hero_bg }}')">
  <div class="custom_container_fluid">
    <div class="accounting_common_container">
      <div class="row align-items-center">
        <div class="col-lg-6">
          <div class="features_hero_description">
            <h1>{{ page.hero_blog.t_headline }}</h1>
            <p>{{ page.hero_blog.t_subheadline }}</p>
            <a href="{% if page.language == 'default' %}{{ site.url }}/{% else %}{{ site.url }}/{{ page.language}}/{% endif %}{{ page.hero_blog.p_demo_btn }}">
                {{ page.hero_blog.t_demo_btn }}
            </a>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="features_hero_image_card_wrapper">
            <div class="main_image_card">
                {% if page.hero_blog.i_image %}
                  {% assign image_alt =  page.hero_blog.i_image | remove: '.webp' | remove: '.png' | replace: '-',' ' | replace: '_',' ' %}
                  {% picture width_1260 pages/{{ page.hero_blog.i_image }} alt="{{ image_alt }}"%}
                {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="revamp_trending_section">
   <div class="custom_container_fluid">
      <!-- <div class="trending_heading">
          <h2>Latest</h2>
      </div> -->
      <div class="col-lg-12">
         <div class="row m-0">
            {% for item in items %}
            <div class="col-md-4 col-sm-6 mb-4">
               <div class="revamp_card_common">
                  <div class="revamp_card_common_image">
                     {% if item.article_body.content.heading.image.i_image %}
                        {% assign post_image = item.article_body.content.heading.image.i_image %}
                        {% assign post_title = item.article_body.content.heading.t_title | strip_html %}
                        {% picture width_500 collections/{{ post_image }} alt="{{ post_title }}" class="card-img" %}
                     {% endif %}
                  </div>
                  <div class="revamp_card_common_description">
                     <span class="revamp_badge">
                        {{ item.category | strip_html | replace: '-', ' ' | capitalize | replace: 'Pos', 'POS' }}
                     </span>
                     <h6>
                        <a class="text-primary" href="{{ site.baseurl }}{{ item.url }}">
                           {{ item.article_body.content.heading.t_title | strip_html | truncatewords: 7, "..."}}
                        </a>
                     </h6>
                     <p>{{ item.article_body.content.heading.t_description | strip_html | truncatewords: 12, "..."}}</p>
                     <div class="publish_information">
                        <div class="author_and_date">
                           <p class="mb-1">
                              {% if item.article_body.json-ld_article.v_date_published %}
                                 {{ item.article_body.json-ld_article.v_date_published | date: "%B %d, %Y" }}
                              {% else %}
                                 {{ item.date | date: "%B %d, %Y" }}
                              {% endif %}
                           </p>
                            <a class="text-primary" href="{{ site.baseurl }}{{ item.url }}">
                              {{page.hero_blog.t_read_btn}}
                              <span>
                                {% if page.hero_blog.i_arrow %}
                                  {% assign image_alt =  page.hero_blog.i_arrow | remove: '.webp' | remove: '.png' | replace: '-',' ' | replace: '_',' ' %}
                                  {% picture width_1260 pages/{{ page.hero_blog.i_arrow }} alt="{{ image_alt }}"%}
                                {% endif %}
                              </span>
                            </a>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            {% endfor %}
         </div>

        {% if paginator.total_pages > 1 %}
        <div class="row">
          <div class="col-12">
              <nav aria-label="Page navigation" class="my-4">
                <ul class="pagination justify-content-center">

                    {% comment %} Previous Button {% endcomment %}
                    {% if paginator.previous_page %}
                      <li class="page-item">
                          <a class="page-link" href="{{ paginator.previous_page_path | relative_url }}">Previous</a>
                      </li>
                    {% else %}
                      <li class="page-item disabled">
                          <span class="page-link" aria-disabled="true">Previous</span>
                      </li>
                    {% endif %}

                    {% comment %} Page Numbers {% endcomment %}
                    {% for page_num in (1..paginator.total_pages) %}
                      {% if page_num == paginator.page %}
                          <li class="page-item active"><span class="page-link">{{ page_num }}</span></li>
                      {% elsif page_num == 1 %}
                          <li class="page-item"><a class="page-link" href="{{ '/blog/' | relative_url }}">1</a></li>
                      {% else %}
                          <li class="page-item">
                            <a class="page-link" href="{{ '/blog/' | append: page_num | append: '/' | relative_url }}">{{ page_num }}</a>
                          </li>
                      {% endif %}
                    {% endfor %}

                    {% comment %} Next Button {% endcomment %}
                    {% if paginator.next_page %}
                      <li class="page-item">
                          <a class="page-link" href="{{ paginator.next_page_path | relative_url }}">Next</a>
                      </li>
                    {% else %}
                      <li class="page-item disabled">
                          <span class="page-link" aria-disabled="true">Next</span>
                      </li>
                    {% endif %}

                </ul>
              </nav>
          </div>
        </div>
        {% endif %}
      </div>
   </div>
</section>

<script>
   document.addEventListener("DOMContentLoaded", function () {
     const currentURL = window.location.pathname.replace(/\/+$/, "");
     const section = document.querySelector(".revamp_trending_section");
     const matchURLs = [
       "/blog/restaurant-operations",
       "/blog/restaurant-accounting",
       "/blog/restaurant-pos-systems",
       "/blog/pos-systems",
       "/blog/digital-signage-displays",
       "/blog/restaurant-management"
     ];
     if (section) {
       matchURLs.forEach(url => {
         if (currentURL === url || currentURL.startsWith(url)) {
           section.classList.add("revamp_display_none");
         }
       });
     }
   });
</script>