{% assign completed_lps = 0 %}

{% for learning_path in items %}
  {% if learning_path.completed? %}
    {% assign completed_lps = completed_lps | plus: 1 %}
  {% endif %}
{% endfor %}

{% if completed_lps > 0 %}
  <div class="subject-mattr-expert-section">
    <div class="section-header">
      <div>
        <div class="heading">Congrats {{current_person.first_name}}! 🎉</div>
        <div class="subheading">You are MATTR Subject Experts in -</div>
      </div>
      <nav class="pagination-container">
        <div class="pagination-button" id="prev-button" title="Previous page" aria-label="Previous page">
          <i class="fal fa-arrow-left"></i>
        </div>
        <div class="pagination-button" id="next-button" title="Next page" aria-label="Next page">
          <i class="fal fa-arrow-right"></i>
        </div>
      </nav>
    </div>
    <div class="lp-badges-section row" id="paginated-list">
      {% for learning_path in items %}
        {% if learning_path.completed? %}
          <div class="col-xs-12 col-sm-6 completed-badge-col">
            <div class="completed-lp-badge">
              <div class="completed-lp-badge-wrapper">
                <div class="lp-badge-name">{{learning_path.name}}</div>
                <div class="lp-badge-description">{{learning_path.description}}</div>
              </div>
            </div>
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>


<script>
  const paginatedList = document.getElementById("paginated-list");
  const listItems = paginatedList.querySelectorAll(".completed-badge-col");
  const nextButton = document.getElementById("next-button");
  const prevButton = document.getElementById("prev-button");

  const paginationLimit = 4;
  const pageCount = Math.ceil(listItems.length / paginationLimit);
  let currentPage;


  window.addEventListener("load", () => {
    setCurrentPage(1);

    prevButton.addEventListener("click", () => {
      setCurrentPage(currentPage - 1);
    });
    nextButton.addEventListener("click", () => {
      setCurrentPage(currentPage + 1);
    });
  });

  const setCurrentPage = (pageNum) => {
    currentPage = pageNum;
    handlePageButtonsStatus();
    
    const prevRange = (pageNum - 1) * paginationLimit;
    const currRange = pageNum * paginationLimit;
    listItems.forEach((item, index) => {
      item.classList.add("hidden");
      if (index >= prevRange && index < currRange) {
        item.classList.remove("hidden");
      }
    });
  };

  const disableButton = (button) => {
    button.classList.add("disabled");
    button.setAttribute("disabled", true);
  };

  const enableButton = (button) => {
    button.classList.remove("disabled");
    button.removeAttribute("disabled");
  };

  const handlePageButtonsStatus = () => {
    if (currentPage === 1) {
      disableButton(prevButton);
    } else {
      enableButton(prevButton);
    }
    if (pageCount === currentPage) {
      disableButton(nextButton);
    } else {
      enableButton(nextButton);
    }
  };
</script>
{% endif %}

<style>
  .subject-mattr-expert-section { padding: 40px 0 0; }

  .subject-mattr-expert-section .section-header {
    margin-bottom:32px;
  }

  .subject-mattr-expert-section .heading {
    font-size:26px;
    line-height:32px;
    font-weight:700;
    margin-bottom:8px;
  }

  .completed-badge-col {
    margin-bottom:24px;
  }

  .completed-badge-col.hidden {
    display:none;
  }

  .completed-lp-badge {
    background: linear-gradient(100.62deg, #2E29FC 42.1%, rgba(46, 41, 252, 0) 100%),
    linear-gradient(0deg, #FFFFFF, #FFFFFF);
    box-shadow: 0px 6px 30px 0px #100F460D;
    padding: 2px;
    min-height:130px;
    display:flex;
  }

  .completed-lp-badge-wrapper {
    background-color:#fff;
    padding:32px;
    background-image: url("data:image/svg+xml,%3Csvg width='478' height='190' viewBox='0 0 478 190' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_7146_120216)'%3E%3Cg clip-path='url(%23clip0_7146_120216)'%3E%3Crect x='30' y='24' width='418' height='130' fill='white'/%3E%3Cpath d='M395.414 95.2845L323.906 24V178.922V179H353.203V94.6025L395.414 136.685L437.609 94.6025V179H466.906V178.922V24L395.414 95.2845Z' fill='%23FAFAFA'/%3E%3Cpath d='M408.262 148.464V101.857H440.405V148.464L424.333 132.928L408.262 148.464Z' fill='%2318D8AD'/%3E%3Cg style='mix-blend-mode:multiply'%3E%3Cpath d='M395.406 132.393V132.36V89L423.265 118.78L437.192 103.89' stroke='%23009C8A' stroke-width='6.42857'/%3E%3C/g%3E%3C/g%3E%3Crect x='31' y='25' width='416' height='128' stroke='url(%23paint0_linear_7146_120216)' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 90% auto;
    background-repeat: no-repeat;
    background-position: calc(100% + 31px) calc(100% + 34px);
    flex:2;
  }

  .lp-badge-name {
    font-size:20px;
    line-height:normal;
    font-weight:600;
    margin-bottom:8px;
    max-width:75%;
  }

  .lp-badge-description {
    font-size:12px;
    line-height:14px;
    font-weight:500;
    color: #888486;
    max-width:75%;
  }

  .pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination-button{
    font-size: 16px;
    background-color: transparent;
    margin-left:5px;
    cursor: pointer;
    height: 40px;
    width: 40px;
    border: 0.5px solid #242424;
    color:#242424;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pagination-button.disabled {
    border: 0.5px solid #D9D9D9;
    color:#d9d9d9;
  }

  .pagination-button:not(.disabled):hover {
    background: #fff;
  }

  @media (min-width:768px) {
    .subject-mattr-expert-section {
      padding: 80px 0 0;
    }

    .subject-mattr-expert-section .section-header {
      display:flex;
      justify-content: space-between;
      align-items: flex-end;
    }
  }
</style>
