<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
<template>
  <ul>
    <li v-for="value in values" :key="value.id">
      <img
        style="max-width: 64px"
        v-if="value[type].icon_url"
        :src="iconUrl + value[type].icon_url"
        :alt="`${value[type].name} Logo`"
      />
      {{ value[type].name }}
      <span v-if="value.level">
        <span v-if="type == 'skill'">({{ levelSelection[value.level] }})</span>
        <span v-if="type == 'language'">({{ languagesSelection[value.level] }})</span>
      </span>
      <span v-if="value.content">:
          <span v-if="value[type].name === 'E-Mail'">
              <a :href="`mailto:${value.content}`">{{ value.content }}</a>
          </span>
          <span v-else>
           {{ value.content }}
          </span>
        </span>

      <button
        v-if="this.editable"
        type="button"
        class="btn btn-outline-warning m-2"
        aria-label="Bearbeiten"
        @click="this.$emit('editValue', value)"
      >
        <img
          src="/img/bootstrap-icons-1.5.0/pencil.svg"
          alt="Bearbeiten Icon"
        />
      </button>
      <button
        v-if="this.editable"
        type="button"
        class="btn btn-outline-danger m-2"
        aria-label="Löschen"
        @click="this.$emit('removeValue', value[type].id)"
      >
        <img src="/img/bootstrap-icons-1.5.0/trash.svg" alt="Löschen Icon" />
      </button>
    </li>
  </ul>
</template>
<script>
import levelJson from "@/assets/skill_level.json"
import languagesJson from "@/assets/language_level.json"

export default {
  name: "ProfileList",
  props: {
    type: {
      type: String,
    },
    values: {
      type: Array,
    },
    editable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      iconUrl: this.apiUrl,
      levelSelection: levelJson,
      languagesSelection: languagesJson,
    }
  }
};
</script>
