<template>
  <main>
    <h1>
      Alle foreslåtte viner
    </h1>
    <section class="requested-wines-container">
      <p v-if="wines == undefined || wines.length == 0">Ingen har foreslått noe enda!</p>
      <RequestedWineCard v-for="requestedEl in wines" :key="requestedEl.id" :requestedElement="requestedEl" @wineDeleted="filterOutDeletedWine" :showDeleteButton="isAdmin"/>
    </section>
  </main>
</template>

<script>
import { allRequestedWines } from "@/api";
import RequestedWineCard from "@/ui/RequestedWineCard";
export default {
  components: {
    RequestedWineCard
  },
  data(){
    return{
      wines: undefined,
      canRequest: true,
      isAdmin: false
    }
  },
  methods: {
    filterOutDeletedWine(wine){
      this.wines = this.wines.filter(item => item.wine._id !== wine._id)
    },
    async refreshData(){
      [this.wines, this.isAdmin] = await allRequestedWines() || [[], false]
    }
  },
  mounted() {
    this.refreshData()
  }
}
</script>

<style lang="scss" scoped>
@import "../styles/media-queries.scss";

.requested-wines-container{
  display: grid;
  grid-gap: 1.5rem;
  justify-items: center;

  @include mobile {
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
    row-gap: 1.5rem;
    margin: 2rem;
  }

  @include tablet {
    margin: 1em;
    grid: 1fr / 1fr 1fr;
    justify-items: center;
  }

  @include desktop {
    margin: 1em;
    grid: 1fr / repeat(4, 1fr);
  }

  @include widescreen {
    width: 80%;
    margin: auto;
    grid: 1fr / repeat(5, 1fr);
    justify-items: center;
  }
}

h1{
  text-align: center;
}

</style>