<!-- ldgallery - A static generator which turns a collection of tagged
--             pictures into a searchable web gallery.
--
-- Copyright (C) 2019-2022  Guillaume FOUET
--
-- This program is free software: you can redistribute it and/or modify
-- it under the terms of the GNU Affero General Public License as
-- published by the Free Software Foundation, either version 3 of the
-- License, or (at your option) any later version.
--
-- This program is distributed in the hope that it will be useful,
-- but WITHOUT ANY WARRANTY; without even the implied warranty of
-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-- GNU Affero General Public License for more details.
--
-- You should have received a copy of the GNU Affero General Public License
-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->

<template>
  <div
    v-show="model.length"
    class="flex"
    :class="$style.tag"
  >
    <TransitionGroup name="move">
      <div
        v-for="tag in model"
        :key="tag.tagfiltered"
        :title="t('panelLeft.taglist.activetag.title')"
        @click="remove(tag)"
        v-text="tag.display"
      />
    </TransitionGroup>
  </div>
</template>

<script setup lang="ts">
import { TagSearch } from '@/@types/tag';
import { useVModel } from '@vueuse/core';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  modelValue: { type: Array<TagSearch>, required: true },
});
const emit = defineEmits(['update:modelValue']);
const model = useVModel(props, 'modelValue', emit);

const { t } = useI18n();

function remove(toRemove: TagSearch) {
  model.value = model.value.filter(tag => tag !== toRemove);
}
</script>

<style lang="scss" module>
@import "~@/assets/scss/theme";

.tag {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2px;
  padding: 4px;
  background-color: $input-background-color;
  > div {
    color: $text-light;
    background-color: $tag-background-color;
    padding: 0 8px 3px;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
  }
}
</style>
