<section class="bg-white py-10 mb-[70px] " data-component-type="Content" data-component-slug="sports-template-players">
  <div class="max-w-6xl mx-auto  lg:max-w-[90%] max-w-[95%]">

    <!-- Title + Buttons -->
    <div class="flex items-center justify-between mb-[30px] lg:max-w-[100%] max-w-full">
      <h2 class="text-[25px] sm:text-2xl font-bold" data-node="players_title" data-node-type="text" data-node-label="Players Section Title" data-node-default="PLAYERS">
        {{players_title}}</h2>

      <div class="flex gap-2">
        <button id="slideLeft" class="h-10 w-10 bg-black text-white rounded hover:bg-red-700 flex items-center justify-center">
          <img data-node="players_prev_icon" data-node-type="file" data-node-label="Players Slider Previous Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338053/seltrix/templates/sports-template/Players/Icon.png" src="{{players_prev_icon}}" class="w-full p-4">
        </button>
        <button id="slideRight" class="h-10 w-10 bg-black text-white rounded hover:bg-red-700 flex items-center justify-center">
          <img data-node="players_next_icon" data-node-type="file" data-node-label="Players Slider Next Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338054/seltrix/templates/sports-template/Players/icon2.png" src="{{players_next_icon}}" class="w-full p-4">
        </button>
      </div>
    </div>

    <!-- SLIDER -->
    <div id="slider" class="flex gap-6 overflow-x-auto snap-x snap-mandatory no-scrollbar lg:max-w-[100%] ">

      <!-- CARD 1 -->
      <div class="min-w-[25%] snap-start">
        <div class="w-full xl:h-[500px] lg:h-[400px] md:h-[200px] h-[100px] bg-black rounded overflow-hidden">
          <img data-node="player1_image" data-node-type="file" data-node-label="Player 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338058/seltrix/templates/sports-template/Players/robert.png" src="{{player1_image}}" class="w-full h-full object-cover">
        </div>
        <p data-node="player1_name" data-node-type="text" data-node-label="Player 1 Name" data-node-default="ROBERT HORRY" class="mt-3 py-2 text-[8px] md:text-[17px] text-center font-bold text-white bg-black rounded">
          {{player1_name}}</p>
      </div>

      <!-- CARD 2 -->
      <div class="min-w-[25%]  snap-start">
        <div class="w-full xl:h-[500px] lg:h-[400px] md:h-[200px] h-[100px] bg-black rounded overflow-hidden">
          <img data-node="player2_image" data-node-type="file" data-node-label="Player 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338056/seltrix/templates/sports-template/Players/jhon.png" src="{{player2_image}}" class="w-full h-full object-cover">
        </div>
        <p class="mt-3 text-[8px] md:text-[17px] py-2 text-center font-bold text-white bg-black rounded" data-node="player2_name" data-node-type="text" data-node-label="Player 2 Name" data-node-default="JOHN HAVLICEK"> {{player2_name}}</p>
      </div>

      <!-- CARD 3 -->
      <div class="min-w-[25%]  snap-start">
        <div class="w-full xl:h-[500px] lg:h-[400px] md:h-[200px] h-[100px] bg-black rounded overflow-hidden">
          <img data-node="player3_image" data-node-type="file" data-node-label="Player 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338060/seltrix/templates/sports-template/Players/sam.png" src="{{player3_image}}" class="w-full h-full object-cover">
        </div>
        <p class="mt-3 text-[8px] md:text-[17px] py-2 text-center font-bold text-white bg-black rounded" data-node="player3_name" data-node-type="text" data-node-label="Player 3 Name" data-node-default="SAM JONES">{{player3_name}}</p>
      </div>

      <!-- CARD 4 -->
      <div class="min-w-[25%] snap-start">
        <div class="w-full xl:h-[500px] lg:h-[400px] md:h-[200px] h-[100px] bg-black rounded overflow-hidden">
          <img data-node="player4_image" data-node-type="file" data-node-label="Player 4 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338050/seltrix/templates/sports-template/Players/david.png" src="{{player4_image}}" class="w-full h-full object-cover">
        </div>

        <p data-node="player4_name" data-node-type="text" data-node-label="Player 4 Name" data-node-default="DAVID MILLIAN" class="mt-3 py-2 text-[8px] md:text-[17px] text-center font-bold text-white bg-black rounded">
          {{player4_name}}
        </p>
      </div>

      <!-- CARD 5 -->
      <div class="min-w-[25%] snap-start">
        <div class="w-full xl:h-[500px] lg:h-[400px] md:h-[200px] h-[100px] bg-black rounded overflow-hidden">
          <img data-node="player5_image" data-node-type="file" data-node-label="Player 5 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338049/seltrix/templates/sports-template/Players/alex.png" src="{{player5_image}}" class="w-full h-full object-cover">
        </div>

        <p data-node="player5_name" data-node-type="text" data-node-label="Player 5 Name" data-node-default="ALEX KOBE" class="mt-3 py-2 text-[8px] md:text-[17px] text-center font-bold text-white bg-black rounded">
          {{player5_name}}
        </p>
      </div>

      <!-- CARD 6 -->
      <div class="min-w-[25%] snap-start">
        <div class="w-full xl:h-[500px] lg:h-[400px] md:h-[200px] h-[100px] bg-black rounded overflow-hidden">
          <img data-node="player6_image" data-node-type="file" data-node-label="Player 6 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338057/seltrix/templates/sports-template/Players/mike.png" src="{{player6_image}}" class="w-full h-full object-cover">
        </div>

        <p data-node="player6_name" data-node-type="text" data-node-label="Player 6 Name" data-node-default="MIKE RUSSELL" class="mt-3 py-2 text-[8px] md:text-[17px] text-center  font-bold text-white bg-black rounded">
          {{player6_name}}
        </p>
      </div>



    </div>

  </div>
</section>