<template>
  <div class="apps-container">

    <div class="app-list-header">
      <div>App</div>
      <div>Groups</div>
      <div>Action</div>
    </div>
    <div class="app-list">

      <app-list-item v-for="app in apps" :app="app" @delete-app="deleteApp"></app-list-item>
    </div>

    <modal :state="modalState">
      <add-app @close="closeModal"></add-app>
    </modal>
    <basic-button icon="Plus" @click="modalState = true">New App</basic-button>
  </div>


</template>

<script>
import BasicButton from "@/components/UI/BasicButton.vue";
import AppListItem from "@/components/UI/AppListItem.vue";
import {mapStores} from "pinia";
import {useAppsStore} from "@/store/apps.js";
import Modal from "@/components/UI/Modal.vue";
import AddApp from "@/components/layout/config/AddApp.vue";

export default {
  name: "Apps",
  props: {
    isSelected: {
      type: Boolean,
      default: false
    }
  },
  components: {AddApp, Modal, AppListItem, BasicButton},
  computed: {
    ...mapStores(useAppsStore),
    apps() {
      return this.appsStore.apps;
    }
  },
  data() {
    return {
      modalState: false
    }
  },
  methods: {
    async closeModal(success) {
      this.modalState = false;
      if (success) {
        await this.appsStore.loadApps();
      }
    },
    deleteApp(id) {
      this.appsStore.deleteApp(id);
    }
  },
  async created() {
    await this.appsStore.loadApps();
  }
}
</script>

<style scoped>

.apps-container {
  padding: 2.4rem;


}

.app-list-header {
  display: grid;
  grid-template-columns: 1fr 2fr 0.5fr;
  grid-gap: 1rem;
  padding: 1rem;
  margin-bottom: 1rem;
  font-weight: 500;
  font-size: 1.4rem;
  color: #6B869C;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  border-bottom: 0.1rem solid #E3EDFF;
}

.app-list {
  margin-bottom: 2.4rem;
}

</style>