<div class="container">
  <div class="container" style="height: 700px; width: 100%; display: flex; justify-content: center; align-items: flex-start;">
    <div class="card-stack">
      <div class="card-list">
        {% for card in content %}
        {% set width = 12 * (loop.index + 2) %}
        {% if card.imgSrc is not empty%}
          <div class="card single_card" style="padding: {{ cardPadding }}; background-image: url('{{card.imgSrc}}'); background-size: cover;" >
        {% else %}
          <div class="card single_card" style="padding: {{ cardPadding }}; background-color: {{ card.bgColor }};" >
        {% endif %}
          <div class="cardInfo" style="width: 100%; height: 100%; text-align: {{ card.cardAlignment }};">
            {{ card.cardContent | raw }}  
          </div>
        </div>
      {% endfor %}
      </div>
      </div> 
    {% if len > 1 %}
    {% set arrayLength = myArray | length %}
    <div class="buttonsNew" style="margin-top: 630px;">
      <button class="prev-button" >
        <i class="fas fa-caret-left"></i>
      </button>
      <button class="next-button">
        <i class="fas fa-caret-right"></i>
      </button>
    </div>
    {% endif %}
  </div>
</div>


<style>
  :root {
    --default-diff: {{ gap }}px;
    --default-width: 100%;
    --default-min: 10%;
  }
  {% for card in content %}
    {% if loop.index == 0 %}
        .container .card-stack .card-list .card:nth-child({{ loop.index }}) {
            top: 0;
        }
    {% else %}
        .container .card-stack .card-list .card:nth-child({{ loop.index }}) {
            top: calc(var(--default-diff) * {{ loop.index}});
        }
    {% endif %}
  {% endfor %}

  .container {
    background-color: #fff;
  }
  .container .card-stack .card-list .card {
    width: 330px;
  }
  .container .card-stack {
    position: absolute;
  }
  .container .card-stack .carousel .buttons:hover {
    color: #C01313;
    background: #fff;
  }
  .container .card-stack .card-list {
    width: 330px;

  }
  .container .card-stack .card-list .card {
    transition: all 100ms ease-in-out;
    border-radius: 2px;
    position: absolute;
    list-style: none;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.2) !important;
    height: 550px;
    
    text-align: center;
    background-size: cover;
    border: 1px solid lightgray;
    border-radius: 8px;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .cardInfo {
    display: flex;
    justify-content: center; 
    align-items: flex-start;
    text-align: center;
    flex-direction: column;
  }
  .infoCard img {
    height: auto;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  .infoCard {
    width: 100%;
    word-wrap: break-word;
    overflow-y: auto;

  }
  .container .card-stack:hover > .buttons.prev,
  .container .card-stack:hover > .buttons.next {
    display: block;
  }
  .transformThis {
    animation: scaleDown 500ms ;
  }
  
  .transformPrev {
    animation: scaleUp 100ms ;
  }
  .buttonsNew {
    display: flex;
    justify-content: center;
    align-items: center;
  }
.next-button, .prev-button {
    background: none;
    border: none;
    cursor: pointer;
    margin: 0 5px;
    z-index: 1;
  }
  @media (max-width: 344px) {
    .infoCard, .container .card-stack .card-list .card, .container .card-stack .card-list{
        width: 250px;
    }
  }

  /* Style for the Font Awesome icon */
  .next-button i, .prev-button i {
    color: #000000;
    font-size: 50px;
  }
  
  @keyframes scaleUp {
    0% { transform: scale(1.2) translateY(50px); opacity: 1; }
    20% { transform: scale(1.15) translateY(40px); opacity: 1; }
    40% { transform: scale(1.10) translateY(30px); opacity: 1; }
    60% { transform: scale(1.05) translateY(20px); opacity: 1; }
    80% { transform: scale(1.01) translateY(10px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
  }
  
  @keyframes scaleDown {
    0% { transform: scale(1) translateY(0); opacity: 1; }
    20% { transform: scale(1.01) translateY(20px); opacity: 1; }
    40% { transform: scale(1.05) translateY(40px); opacity: 1; }
    60% { transform: scale(1.10) translateY(60px); opacity: 1; }
    80% { transform: scale(1.15) translateY(80px); opacity: 1; }
    100% { transform: scale(1.2) translateY(100px); opacity: 1; }
  }
  
  @keyframes scaleCard {
    0% { top: 5px; }
    100% { top: 24px; }
  }
  
  @keyframes bounceInLeft {
    0% { opacity: 0; transform: translateX(40px); }
    100% { transform: translateX(0); }
  }
  
  @keyframes bounceInRight {
    0% { opacity: 0; transform: translateX(-40px); }
    100% { transform: translateX(0); }
  }
  @keyframes swipeRightToLeft {
    0% {
      transform: translateX(0);
    }
    20% {
      transform: translateX(20%);
    }
    40% {
      transform: translateX(40%);
    }
    60% {
        transform: translateX(60%);
    }
    80% {
        transform: translateX(80%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  @keyframes swipeLeftToRight {
    0% {
      transform: translateX(100%);
    }
    20% {
      transform: translateX(80%);
    }
    40% {
      transform: translateX(60%);
    }
    60% {
        transform: translateX(40%);
    }
    80% {
        transform: translateX(20%);
    }
    100% {
      transform: translateX(0);
    }
  }
  
</style>

<script>
  var cards = jQuery('.single_card');
  var container = cards.parent();
  var currentIndex = 0;

  // Reverse the order of the cards
  cards = jQuery(cards.get().reverse());
  
  function updateVisibleCards() {
    cards.detach(); // Remove all cards from the DOM
  
    if (cards.length < 5) {
      // If there are less than 5 cards, append them in reverse order
      for (var i = cards.length - 1; i >= 0; i--) {
        container.append(cards.eq((currentIndex + i) % cards.length)); // Reinsert the cards into the DOM
      }
    } else {
      // If there are 5 or more cards, append them in the original order
      for (var i = 4; i >= 0; i--) {
        container.append(cards.eq((currentIndex + i) % cards.length)); // Reinsert the cards into the DOM
    }
    }
  }
  updateVisibleCards();

  jQuery('.next-button').click(function() {
    currentIndex = (currentIndex + 1) % cards.length; // Wrap around to the beginning when reaching the end
    updateVisibleCards();
    cards.eq((currentIndex) % cards.length).addClass('transformPrev');
    setTimeout(function() {
      cards.eq((currentIndex) % cards.length).removeClass('transformPrev');
    }, 150);
  });
  
  jQuery('.prev-button').click(function() {
    if (currentIndex > 0) { // Prevent going before the first card
      currentIndex--;
    } else { // If at the first card, go to the last card
      currentIndex = cards.length - 1;
    }
    updateVisibleCards();
    cards.eq((currentIndex) % cards.length).addClass('transformThis');
    setTimeout(function() {
      cards.eq((currentIndex) % cards.length).removeClass('transformThis');
    }, 150);
  });
  
</script>