<script>

import { mapActions, mapState } from 'pinia'
import { ConcernementsStore } from '@stores/concernements'

import SvgIcon from '@jamescoyle/vue-icon';
import { mdiHeadphones } from '@mdi/js';

export default {
  props: ['id', 'eid', 'entite'],
  data(){
    return {
      headphones_path: mdiHeadphones
    }
  },
  computed: {
    ...mapState(ConcernementsStore,['opened_concernement']),
  },
  methods: {
    ...mapActions(ConcernementsStore,['setMapMode'])
  },
  components: {
    SvgIcon
  }
}
</script>

<template>
  <header>
    <slot name="header"></slot>
    <div class="concernement-cartouche-icons">
        <h2>{{ opened_concernement.title }}</h2>
        <nav class="icons">
          <ul>
            <li v-if="opened_concernement.has_recit" >
              <svg-icon type="mdi" :path="headphones_path"></svg-icon>
            </li>
            <li>
              <a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span></a>
            </li>
            <li v-if="opened_concernement.has_puissancedagir" >
              <a href="#puissanceagir" @click="setMapMode('puissancedagir')"><span class="icon puissancedagir"></span></a>
            </li>
            <li v-if="opened_concernement.has_proximite" >
              <a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span></a>
            </li>
            <li v-if="opened_concernement.has_superposition" >
              <a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span></a>
            </li>
            <li v-if="opened_concernement.has_agissantes" >
              <a href="#action" @click="setMapMode('action')"><span class="icon action"></span></a>
            </li>
            <li v-if="opened_concernement.has_doleance" >
              <a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span></a>
            </li>
          </ul>
        </nav>

      </div>
  </header>
  <main>
    <slot name="main"></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</template>