<template>
  <div class="to-left">
    <h1 v-if="project">
      Créer un nouveau type de signalement pour le projet «
      {{ project.title }} » depuis le catalogue Datasud
    </h1>
    Liste des ressources géographiques publiées par vos organisations :
    <div class="table">
      <div class="row header">
        <div>Organisation</div>
        <div>Dataset</div>
        <div>Ressource</div>
      </div>
      <div
        v-for="ressource in ressources"
        :key="ressource.ressource"
        class="row"
      >
        <div>{{ ressource.organisation }}</div>
        <div>{{ ressource.dataset }}</div>
        <div>{{ ressource.ressource }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Catalog",

  data() {
    return {
      ressources: [
        {
          organisation: "organisation1",
          dataset: "dataset1",
          ressource: "ressource1",
        },
        {
          organisation: "organisation2",
          dataset: "dataset2",
          ressource: "ressource2",
        },
        {
          organisation: "organisation3",
          dataset: "dataset3",
          ressource: "ressource3",
        },
        {
          organisation: "organisation4",
          dataset: "dataset4",
          ressource: "ressource4",
        },
      ],
    };
  },

  computed: {
    ...mapGetters(["project", "permissions"]),
  },

  created() {
    this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
  },
};
</script>

<style scoped>
.to-left {
  text-align: left;
}

h1 {
  margin: 0.5em 0;
}

.table {
  width: 100%;
  border: 1px solid #c0c0c0;
  margin: 2rem 0;
}
.table > .row {
  display: flex;
}
.table > .row:not(:last-child) {
  border-bottom: 1px solid #cacaca;
}
.table > .row > div {
  width: 100%;
  padding: 0.5rem;
}
.table > .header {
  background-color: #e0e0e0;
}
</style>