<template>
    <div id="details">
      <LoopDetail
        class="detail"
        mode="exploration"
        v-for="(loopDetail, index) in getLoopDetails"
        :key="`detail-${index}`"
        :detail="loopDetail"
        :color="loopDetail.loop.color"
      />
    </div>
</template>

<script>
import { mapGetters } from "vuex";

import LoopDetail from "./LoopDetail";
import DetailsMixin from "@/mixins/DetailsMixin";


export default {
  name: "LoopDetails",
  components: {
    LoopDetail
  },
  computed: {
    ...mapGetters(["getLoopDetails"]),
    details() {
      return this.getLoopDetails;
    }
  },
  mixins: [DetailsMixin]
};
</script>

<style scoped>
#details {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.detail {
    margin: 10px 10px;
    min-width: 45%;
    flex-grow: 1;
}
</style>