{% assign items = paginator.posts | sort: 'date_modified' | reverse %}
{% if page.hero_blog.i_background %}
{% assign i_background = '' %}
{% capture i_background %}{% picture open_graph_1920 pages/{{ page.hero_blog.i_background}} %}{% endcapture %}
{% endif %}
{% assign seen_urls = "" %}
<section class="hub-section hub-section-sm section-bloglist m-0 p-0">
   <div class="articles_container_revamp" {% if page.hero_blog.i_background %}
   style="background-image: url('{{ i_background }}')"
   {% endif %} >
   <div class="common_container">
      <div class="articles_revamp_heading">
         <p class="display-5 articles_revamp_subheading">
            {{ page.hero_blog.t_subheadline }} {% if paginator.page != 1 %} - page {{ paginator.page }}{% endif %}
         </p>
         <h1 class="display-5 articles_revamp_heading">
            {{ page.hero_blog.t_headline }} {% if paginator.page != 1 %} - page {{ paginator.page }}{% endif %}
         </h1>
      </div>
      {% for item in items limit: 1 offset:1 %}
      <div class="articles_revamp_hero">
         <div class="col-lg-12">
            <div class="row m-0 align-items-center">
               <div class="col-lg-5 col-md-5 col-sm-5 p-0">
                  <div class="articles_revamp_hero_image">
                     {% if item.article_body.content.heading.image.i_image %}
                     {% picture thumbnail_image collections/{{ item.article_body.content.heading.image.i_image }} alt="{{ item.article_body.content.heading.t_title | strip_htm }}" class="card-img" %}
                     {% endif %}
                  </div>
               </div>
               <div class="col-lg-7 col-md-7 col-sm-7 p-0">
                  <div class="articles_revamp_hero_description">
                     <div class="aticles_revamp_category initialism text-muted small">
                        <p>{{ item.category | strip_html | replace: '-', ' ' | capitalize }}</p>
                     </div>
                     <h4 class="revamp_main_heading">
                        <a class="h5 font-weight-normal text-dark" href="{{ site.url }}{{ item.url }}" title="{{item.article_body.content.heading.t_title}}">
                        {{ item.article_body.content.heading.t_title  | strip_html }}
                        </a>
                     </h4>
                     <p class="revamp_main_subheading">
                        {% if item.article_body.content.heading.t_description %}
                        {{ item.article_body.content.heading.t_description | strip_html | truncate: 180 }}
                        {% endif %}
                     </p>
                     <a href="{{ site.url }}{{ item.url }}" class="revamp_read_more">{{site.data.languages[page.language]global.t_read_more}} <span>
                     {% if page.hero_blog.i_btn_arrow %}
                     {% capture btn_icon %}{% picture width_27 pages/{{ page.hero_blog.i_btn_arrow }} %}{% endcapture %}
                     <img src="{{ btn_icon }}" alt="{{ page.hero_blog.i_btn_arrow | remove: '.png' | remove: '.webp' | remove: '.jpg' | replace: '-',' ' | replace: '_',' ' }}">
                     {% endif %}
                     </span></a>
                  </div>
               </div>
            </div>
         </div>
      </div>
      {% capture seen_urls %}{{ seen_urls }}|{{ item.url }}{% endcapture %}
      {% endfor %}
   </div>
   </div>
</section>
<section>
   <div class="col-lg-12 revamp_trending_section">
      {% assign key = page.language | append:'_articles' %}
      {% assign news = site[key] | sort: "date" | reverse %}
      <div class="container">
         <div class="trending_items_heading">
            <p>
               {{page.hero_blog.t_trending_title}}
               <span>
               {% if page.hero_blog.i_fire_icon %}
               {% capture fire_icon %}{% picture direct-url_242 pages/{{ page.hero_blog.i_fire_icon }} %}{% endcapture %}
               <img src="{{ fire_icon }}" alt="{{ page.hero_blog.i_fire_icon | remove: '.png' | remove: '.webp' | remove: '.jpg' | replace: '-',' ' | replace: '_',' ' }}">
               {% endif %}
               </span>
            </p>
         </div>
         {% assign first_three = "" %}
         {% assign count_first_three = 0 %}
         {% for item in news %}
         {% unless seen_urls contains item.url %}
         {% capture first_three %}{{ first_three }}|{{ item.url }}{% endcapture %}
         {% capture seen_urls %}{{ seen_urls }}|{{ item.url }}{% endcapture %}
         {% assign count_first_three = count_first_three | plus: 1 %}
         {% endunless %}
         {% if count_first_three == 3 %}
         {% break %}
         {% endif %}
         {% endfor %}
         <div class="first_three_items">
            <div class="col-lg-12">
               <div class="row m-0">
                  {% assign rendered = 0 %}
                  {% for item in news %}
                  {% if rendered < 3 and first_three contains item.url %}
                  <div class="col-md-4 col-sm-4">
                     <div class="revamp_card_common">
                        <div class="revamp_card_common_image">
                           {% if item.article_body.content.heading.image.i_image %}
                           {% picture width_500 collections/{{ item.article_body.content.heading.image.i_image }} alt="{{ item.article_body.content.heading.t_title | strip_htm }}" class="card-img" %}
                           {% endif %}
                        </div>
                        <div class="revamp_card_common_description">
                           <span class="revamp_badge">{{ item.category | strip_html | replace: '-', ' ' | capitalize | replace: 'Pos', 'POS' | replace: 'Restaurant point of sale', 'restaurant point of sale' }}</span>
                           <h6>
                              <a class="text-primary" href="{{ site.baseurl }}{{ item.url }}">
                              {{ item.article_body.content.heading.t_title | strip_html }}
                              </a>
                           </h6>
                           <p class="revamp_common_card_subheading">
                              {% if item.article_body.json-ld_article.v_date_published %}
                              {{ item.article_body.json-ld_article.v_date_published | date: "%B %d, %Y" }}
                              {% elsif item.date_published %}
                              {{ item.date_published | date: "%B %d, %Y" }}
                              {% elsif item.date %}
                              {{ item.date | date: "%B %d, %Y" }}
                              {% endif %}
                           </p>
                           <a class="revamp_read_more" href="{{ site.url }}{{ item.url }}">
                           {{ site.data.languages[page.language]global.t_read_more }}
                           <span>
                           {% if page.hero_blog.i_btn_arrow %}
                           {% capture btn_icon_read %}{% picture width_27 pages/{{ page.hero_blog.i_btn_arrow }} %}{% endcapture %}
                           <img src="{{ btn_icon_read }}" alt="{{ page.hero_blog.i_btn_arrow | remove: '.png' | remove: '.webp' | remove: '.jpg' | replace: '-',' ' | replace: '_',' ' }}">
                           {% endif %}
                           </span>
                           </a>
                        </div>
                     </div>
                  </div>
                  {% assign rendered = rendered | plus: 1 %}
                  {% endif %}
                  {% if rendered == 3 %}
                  {% break %}
                  {% endif %}
                  {% endfor %}
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<section class="hub-section hub-section-sm revamp_section_bloglist d-none">
   <div class="container">
      <div class="revamp_submenu">
         <nav class="navbar navbar-horizontal navbar-expand-lg blog_menu mb-3">
            <div class="container">
               <div class="blog_menu_wrapper">
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-info"
                     aria-controls="navbar-info" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                  </button>
               </div>
               <div class="collapse navbar-collapse" id="navbar-info">
                  <ul class="navbar-nav ml-auto integration-nav">
                     {% for item in site.data.languages.[page.language].collection_categories.[page.collection].t_categories %}
                     <li class="nav-item ml-4">
                        <a class="nav-link text-white text-center p-0" href="{{ item.p_permalink_url }}">
                        {{ item.t_menu_name }}
                        </a>
                     </li>
                     {% endfor %}
                  </ul>
               </div>
            </div>
         </nav>
      </div>
      <div class="row">
         <div class="col-md-12">
            {% assign sorted_items = items | sort: "date_published" | reverse %}
            {% if sorted_items.size > 0 %}
            <div id="revamp_hub-cards" class="card-columns">
               {% for item in sorted_items %}
               <div class="card revamp_hub_card" data-tag='{{ item.category | strip_html | strip }}' tabindex="0" aria-hidden="false">
                  {% if item.article_body.content.heading.image.i_image %}
                  {% picture thumbnail_image collections/{{ item.article_body.content.heading.image.i_image }}
                  alt="{{ item.article_body.content.heading.t_title | strip_htm }}" class="card-img" %}
                  {% endif %}
                  <div class="card-body">
                     {% if item.category %}
                     <div class="revamp_badge">
                        <p>{{ item.category | strip_html | replace: '-', ' ' | capitalize | replace: 'Pos', 'POS' | replace: 'Restaurant point of sale', 'restaurant point of sale' }}</p>
                     </div>
                     {% endif %}
                     <a class="revamp_card_link"
                        href="{{ site.url }}{{ item.url }}"
                        title="{{ item.t_meta_title }}">
                     {{ item.article_body.content.heading.t_title | strip_html | truncate: 50 }}
                     </a>
                     {% if item.date_published %}
                     <div class="text_muted_revamp">
                        <p>{{ item.date_published | date: '%B %d, %Y' }}</p>
                     </div>
                     {% endif %}
                     <a href="{{ site.url }}{{ item.url }}" class="revamp_card_read_more">
                     {{ site.data.languages[page.language]global.t_read_more }}
                     <span>
                     {% if page.hero_blog.i_btn_arrow %}
                     {% capture btn_icon_read %}{% picture width_27 pages/{{ page.hero_blog.i_btn_arrow }} %}{% endcapture %}
                     <img src="{{ btn_icon_read }}" alt="{{ page.hero_blog.i_btn_arrow | remove: '.png' | remove: '.webp' | remove: '.jpg' | replace: '-',' ' | replace: '_',' ' }}">
                     {% endif %}
                     </span>
                     </a>
                  </div>
               </div>
               {% endfor %}
            </div>
            {% else %}
            <div class="articles_revamp_hero">
               <h2>{{ 'Coming Soon '}}</h2>
            </div>
            {% endif %}
         </div>
      </div>
   </div>
</section>
<script>
   document.addEventListener("DOMContentLoaded", function () {
     const currentURL = window.location.pathname.replace(/\/+$/, "");
     const section = document.querySelector("section .revamp_trending_section");
     if (!section) return;
     const matchURLs = [
       "/blog/restaurant-operations/",
       "/blog/restaurant-accounting/",
       "/blog/restaurant-pos-systems/",
       "/blog/pos-systems/",
       "/blog/digital-signage-displays/",
       "/blog/restaurant-management/"
     ];
     matchURLs.forEach(url => {
       const cleanUrl = url.replace(/\/+$/, "");
       if (currentURL === cleanUrl || currentURL.startsWith(cleanUrl)) {
         section.classList.add("revamp_display_none");
       }
     });
   });
</script>
<script>
   document.addEventListener("DOMContentLoaded", function () {
     const currentURL = window.location.pathname.replace(/\/+$/, "");
     const section = document.querySelector(".revamp_section_bloglist");
     if (!section) return;
     const matchURLs = [
       "/blog/restaurant-operations/",
       "/blog/restaurant-accounting/",
       "/blog/restaurant-pos-systems/",
       "/blog/pos-systems/",
       "/blog/digital-signage-displays/",
       "/blog/restaurant-management/"
     ];
     matchURLs.forEach(url => {
       const cleanUrl = url.replace(/\/+$/, "");
       if (currentURL === cleanUrl || currentURL.startsWith(cleanUrl)) {
         section.classList.add("revamp_top_margin");
       }
     });
   });
</script>
<script>
   document.addEventListener("DOMContentLoaded", function () {
     const currentURL = window.location.pathname.replace(/\/+$/, "");
     const navLinks = document.querySelectorAll(".integration-nav a");
     navLinks.forEach((link) => {
       let linkURL = link.getAttribute("href").replace(/\/+$/, "");
       if (currentURL === linkURL || currentURL.startsWith(linkURL)) {
         link.classList.add("active_revamp_new");
       }
     });
   });
</script>