<script>

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

export default {
  props: ['entite'],
  data() {
    return {
    }
  },
  computed: {
    ...mapState(ConcernementsStore,['opened_concernement']),
    ...mapState(ConcernementsStore,['ct_concernement']),
    ...mapState(ConcernementsStore,['ct_entite']),

  },
  methods: {
    
  },
  components: {
  }
}
</script>

<template>
  <section class="action">
      <label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
      <div v-html="entite.action"/>
  </section>
  <section class="menace-maintien">
      <label v-if="ct_entite">{{ ct_entite.field_menace_maintien.description }}</label>
      <div v-html="entite.menacemaintien"/>
  </section>
  <!-- SOURCES (experiences vecues) -->
  <section
    v-if="entite.sources.length" 
    class="sources multiple">
    <section 
      v-for="(source, index) in entite.sources"
      :key="index"
      class="source">
      <section class="description">
          <label v-if="ct_entite"> {{ ct_entite.field_sources.description }}</label>
          <div v-html="source.description"/>
        </section>
        
        <section
          v-if="source.images.length" 
          class="images">
            <figure
              v-for="(image, j) in source.images"
              :key="j">
              <img :src="image.url" :alt="image.alt"/>
            </figure>
        </section>

        <section
          v-if="source.videos.length"
          class="video multiple">
            <vue-plyr
              v-for="(video,v) in source.videos"
              :key="v">
                <div class="plyr__video-embed">
                  <iframe 
                    :src="video.url"
                    allowfullscreen
                  ></iframe>
                </div>
            </vue-plyr>
        </section>

        <section
          v-if="source.audios.length"
          class="audio multiple">
            <div
                v-for="(audio,a) in source.audios"
                :key="a">
              <label v-if="audio.description">{{ audio.description }}</label>
              <label v-else>{{ audio.file.filename }}</label>
              <vue-plyr>
                  <audio>
                    <source :src="audio.file.url" :type="audio.file.filemime" />
                  </audio>
              </vue-plyr>

            </div>
        </section>

        <section
          v-if="source.liens.length"
          class="liens multiple">
            <a
              v-for="(lien,l) in source.liens"
              :key="l"
              :href="lien.url">
              {{ lien.title }}
            </a>
        </section>


        <section
          v-if="source.documents.length"
          class="documents multiple">
            <a
              v-for="(doc,d) in source.documents"
              :key="d"
              :href="doc.file.url">
              <template v-if="doc.description">{{ doc.description }}</template>
              <template v-else>{{ doc.file.url }}</template>
            </a>
        </section>
        
    </section>
  </section>
</template>