<template>
  <div class="app_list">
    <app-card
      v-for="(item, index) in data"
      :key="'app_card_' + index"
      :data="item"
      :card-type="cardType"
      @deployment-action="deploymentAction"
      @delete-action="deleteAction"
      :details-url="detailsUrl"
    ></app-card>
  </div>
</template>

<script>
import appCard from "./app-card";

export default {
  components: {
    appCard,
  },
  props: {
    data: {
      type: Array,
      default: [],
    },
    cardType: {
      type: [String, Number],
      default: 0,
    },
    detailsUrl: {
      type: String,
      default: 0,
    },
  },
  methods: {
    deploymentAction(item) {
      this.$emit("deployment-action", item);
    },
    deleteAction(item) {
      this.$emit("delete-action", item);
    },
  },
};
</script>

<style scoped>
.app_list {
  margin: 20px -25px 0;
  padding: 30px 0 0;
  border-top: 1px solid #e3e5ef;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
</style>
