<div
      v-for="(user, index) in userList.results"
      v-if="
        currentUser &&
        (currentUser.role === 'SUPER_ADMIN' || currentUser.role === 'ADMIN')
      "
      :key="index"
      :class="{
        'd-flex': true,
        row: true,
        'p-0': true,
        'py-2': true,
        'm-0': true,
        'gap-2': true,
        'bg-gray-100': user.isActive,
        'bg-gray-300': !user.isActive,
        'border-5': true,
        'border-start': true,
        'border-success': user.isActive,
        'border-gray-600': !user.isActive,
        rounded: true,
        'mb-1': true
      }"
    >
      <div
        class="col-12 col-lg-2 d-flex flex-column lh-1 justify-content-center"
      >
        <span class="text-muted fs-7 d-block pb-1">First name</span>
        <span class="fw-medium">{{ user.name }}</span>
      </div>

      <div
        class="col-12 col-lg-2 d-flex flex-column lh-1 justify-content-center"
      >
        <span class="text-muted fs-7 d-block pb-1">Middle name</span>
        <span class="fw-medium">{{ user.middleName }}</span>
      </div>

      <div
        class="col-12 col-lg-2 d-flex flex-column lh-1 justify-content-center"
      >
        <span class="text-muted fs-7 d-block pb-1">Surname</span>
        <span class="fw-medium">{{ user.surname }}</span>
      </div>

      <div
        class="col-12 col-lg-2 d-flex flex-column lh-1 justify-content-center"
      >
        <span class="text-muted fs-7 d-block pb-1">Role</span>
        <span class="fw-medium">{{ UserRole[user.role] }}</span>
      </div>

      <div
        class="col-12 col-lg-2 d-flex flex-column lh-1 justify-content-center"
      >
        <span class="text-muted fs-7 d-block pb-1">E-mail</span>
        <span class="fw-medium">{{ user.email }}</span>
      </div>
      <div class="col d-flex justify-content-end">
        <button
          v-if="
            (currentUser.role === 'SUPER_ADMIN' ||
              currentUser.role !== 'SUPER_ADMIN') &&
            (currentUser.role === 'SUPER_ADMIN' ||
              (currentUser.role === 'ADMIN' &&
                (user.role === 'ADMIN' ||
                  user.role === 'STAFF_MEMBER' ||
                  user.role === 'MANAGER')))
          "
          type="button"
          class="btn btn-success text-light d-flex float-start px-2 me-2"
          data-bs-toggle="modal"
          data-bs-target="#userModal"
          data-bs-trigger="hover focus"
          data-bs-content="Edit user"
          @click="loadUser(user.id)"
        >
          <span class="fs-5 d-flex material-icons"> edit </span>
        </button>

        <button
          v-if="
            (currentUser.role === 'SUPER_ADMIN' ||
              currentUser.role !== 'SUPER_ADMIN') &&
            (currentUser.role === 'SUPER_ADMIN' ||
              (currentUser.role === 'ADMIN' &&
                user.role !== 'SUPER_ADMIN' &&
                (user.role !== 'ADMIN' || currentUser.id !== user.id)))
          "
          type="button"
          class="btn btn-danger d-flex float-start px-2"
          data-bs-toggle="modal"
          data-bs-target="#userDeleteModal"
          data-bs-trigger="hover focus"
          data-bs-content="Delete item"
          @click="deleteUser(`${user.name} ${user.middleName}`, user.id)"
        >
          <span class="fs-5 d-flex material-icons"> delete </span>
        </button>
      </div>
    </div> this is where i  show the list of users and currently the logged in user is shown at the top but its also being shown in the list again and i need to exclude it from the list