{% 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 mb-0">
    <div class="articles_container_revamp"    {% if page.hero_blog.i_background %}
      style="background-image: url('{{ i_background }}')"
    {% endif %} >
        <div class="is-container">
            <div class="articles_revamp_heading">
            {% if page.hero_blog.t_subheadline and page.hero_blog.t_headline %}
                <h1 class="hero_title">
                    {{ page.hero_blog.t_subheadline }} {% if paginator.page != 1 %} - page {{ paginator.page }}{% endif %}
                </h1>
                <h2 class="hero_subtitle">
                    {{ page.hero_blog.t_headline }} {% if paginator.page != 1 %} - page {{ paginator.page }}{% endif %}
                </h2>
            {% elsif page.hero_blog.t_subheadline %}
                <h1 class="hero_subtitle">
                    {{ page.hero_blog.t_subheadline }} {% if paginator.page != 1 %} - page {{ paginator.page }}{% endif %}
                </h1>
            {% elsif page.hero_blog.t_headline %}
                <h1 class="hero_subtitle">
                    {{ page.hero_blog.t_headline }} {% if paginator.page != 1 %} - page {{ paginator.page }}{% endif %}
                </h1>

            {% endif %}

        </div>
           
            {% for item in items limit: 1 offset:2 %}
                <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 | replace: 'Pos', 'POS' | replace: 'Restaurant point of sale', 'restaurant point of sale' }}</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 }}
                                        {% 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 class="revamp_single_item_after">
            {% assign fourth = nil %}
            {% for item in news %}
              {% unless seen_urls contains item.url %}
                {% assign fourth = item %}
                {% break %}
              {% endunless %}
            {% endfor %}

            {% if fourth %}
            <div class="revamp_trending_main">
                <div class="col-lg-12">
                    <div class="row m-0">
                        <div class="col-lg-7 col-md-7 col-sm-7">
                            <div class="revamp_single_item_body">
                                <span class="revamp_badge">{{ fourth.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 }}{{ fourth.url }}">
                                        {{ fourth.article_body.content.heading.t_title | strip_html }}
                                    </a>
                                </h6>
                                    {% if fourth.date_published %}
                                    <div class="mt-2 mb-3 text-muted small">
                                    <i class="clock-time-icon mr-2"></i>
                                    {{ fourth.date_published | date: '%B %d, %Y' }}
                                    </div>
                                    {% elsif fourth.article_body.json-ld_article.v_date_published %}
                                    <div class="mt-2 mb-3 text-muted small">
                                    <i class="clock-time-icon mr-2"></i>
                                    {{ fourth.article_body.json-ld_article.v_date_published }}
                                    </div>
                                    {% endif %}
                                <a class="revamp_read_more" href="{{ site.url }}{{ fourth.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 class="col-lg-5 col-md-5 col-sm-5">
                            <div class="revamp_trending_right">
                                <div class="text-center">
                                    {% if fourth.article_body.content.heading.image.i_image %}
                                        {% picture width_500 collections/{{ fourth.article_body.content.heading.image.i_image }} alt="{{ fourth.article_body.content.heading.t_title | strip_htm }}" class="card-img" %}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
</section>

<section class="hub-section hub-section-sm revamp_section_bloglist">
  <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/category/restaurant-operations/",
    "/blog/category/restaurant-accounting/",
    "/blog/category/restaurant-pos-systems/",
    "/blog/category/pos-systems/",
    "/blog/category/digital-signage-displays/",
    "/blog/category/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/category/restaurant-operations/",
    "/blog/category/restaurant-accounting/",
    "/blog/category/restaurant-pos-systems/",
    "/blog/category/pos-systems/",
    "/blog/category/digital-signage-displays/",
    "/blog/category/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(/\/+$/, "");
    // Exact match OR starts-with match
    if (currentURL === linkURL || currentURL.startsWith(linkURL)) {
      link.classList.add("active_revamp_new");
    }
  });
});
</script>