pagination

<template>
  <div class="PortfolioItems pb-5">
    <div class="container overflow-auto">
      <div id="profilesITem" class="row pt-5 align-items-center"
           v-for="(profile, index) in profiles.slice(8*(currentPage-1),8*(currentPage))" :key="index"
           :per-page="perPage"
           :current-page="currentPage"
      >
        <div style="background: #353535; height: 2px; width: 100%; margin-bottom: 30px; ">
        </div>
        <div class="col-1">
          <h1> {{ (index + 1) + (currentPage - 1) * 8 }}</h1>
        </div>
        <div class="col-2">
          <div class="rectangle">
          </div>
          <div class="rectangle-img">
            <img :src="profile.img" alt="">
          </div>
        </div>
        <div class="col-9">
          <div class="portfolio-profile">
            <!--            <ul class="mb-2">-->
            <!--              <li class="profile-nick">{{ profile.nick }}</li>-->
            <!--            </ul>-->
            <ul>
              <li class="profile-nick">{{ profile.nick }}</li>
            </ul>
            <h1 class="profile-name">{{ profile.name }}</h1>
            <div class="profile-accout">
              <img :src="profile.icon" alt="">
              <p>{{ profile.followers }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-3 offset-9">
          <div>
            <b-pagination
              v-model="currentPage"
              :total-rows="rows"
              :per-page="perPage"
              aria-controls="profilesITem"
              hide-goto-end-buttons
              align="right"
            ></b-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PortfolioItems',
  data() {
    return {
      perPage: 8,
      currentPage: 1,
    }
  },
  computed: {
        rows() {
      return this.profiles.length;
    }
  },
  props: {
    profiles: {
      type: Array,
      default: [],
    },
  },
}
</script>

<style lang="scss">

.PortfolioItems {
  background: #151515;

  .row {
    transition: 0.5s all;

    h1 {
      font-size: 34px;
      font-style: normal;
      font-weight: 700;
      line-height: 43px;
      letter-spacing: 0em;
      text-align: left;
      color: white;
      -webkit-text-stroke: 1px #fff;
      -webkit-text-fill-color: transparent;
    }

    .rectangle {
      position: relative;
      height: 172px;
      width: 182px;
      background: transparent;
      border: 2px solid #FFFFFF;
    }

    .rectangle-img {
      position: absolute;
      z-index: 111;
      top: 7%;
      left: -10%;
    }

    .portfolio-profile {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-left: 30px;

      .profile-nick {
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 25px;
        letter-spacing: 0em;
        text-align: left;
        color: #F6F6F6;
      }

      .profile-name {
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 50px;
        letter-spacing: 0em;
        text-align: left;
        color: white;
        -webkit-text-stroke: 1px #fff;
        -webkit-text-fill-color: transparent;
      }

      ul {
        margin-bottom: 20px;

        li::marker {
          content: '';
          background: #02F093 !important;
        }
      }

      .profile-accout {
        display: flex;
        align-items: center;
        padding-top: 25px;

        p {
          margin-top: unset !important;
          margin-bottom: unset !important;
          margin-left: 20px !important;
          font-size: 20px;
          font-style: normal;
          font-weight: 600;
          line-height: 25px;
          letter-spacing: 0em;
          text-align: left;
          color: #ffffff;
        }
      }


    }

    &:hover {
      .profile-name, h1 {
        -webkit-text-stroke: 1px #fff;
        -webkit-text-fill-color: white;
      }

      .rectangle {
        border: 2px solid #02F093;

      }
    }
  }


  /* Pagination */
  .page-item.active {
    outline: none !important;
    border: none !important;
    border-color: transparent;

    .page-link {
      font-size: 15px;
      font-style: normal;
      font-weight: 600;
      line-height: 19px;
      letter-spacing: 0em;
      text-align: center;
      background: #1F1F1F;
      color: #02F093;
      border-color: transparent;
      border-radius: 4px;

      button{
        border-radius: 4px;
      }

      button.active {
        outline: none;
      }

      &:focus {
        outline: none;
      }
    }
  }

  .page-item.disabled {
    background: transparent;
    color: #02F093;
    font-weight: 700;

    .page-link {
      border: 1px solid #1F1F1F;
      background: transparent;
      color: #02F093;
      font-weight: bold;
    }
  }
}
.page-item {
  background: black;
  outline: none;
  border-color: transparent;
  margin-right: 20px;

  &.disabled:first-child,
  &.disabled:last-child,
  &:first-child,
  &:last-child {

    button.page-link {
      background: #1F1F1F !important;
      font-size: 27px !important;
      padding: 8px 12px !important;
      border-color: transparent;
    }
    span.page-link  {
      background: #1F1F1F !important;
      font-size: 27px !important;
      padding: 1px 12px !important;
    }
  }

  button.page-link {
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: center;
    background: transparent;
    color: #02F093;
    border-radius: 4px;
  }

  .next-class {
    background: url("/img/prev.png");
    height: 100%;
    width: 100%;

  }
}


</style>