<template>
  <BasePane>
    <template #header-title>
      Group tag list
    </template>

    <template #content>
      <section>
        <p class="small-title">
          Tagged groups
        </p>
        <b-field grouped group-multiline>
          <div v-for="t in tags" :key="t.id">
            <b-tag v-if="t.properties.get('color') != 'none'" class="tag" rounded>
              <svg viewBox="0 0 24 24">
                <circle
                  :cy="12"
                  :cx="12"
                  :r="8"
                  :fill="t.properties.get('color')"
                  :stroke="t.properties.get('stroke')"
                />
              </svg>
              {{ t.name }}
            </b-tag>
          </div>
        </b-field>
      </section>
      <section>
        <p class="small-title">
          Non-tagged groups
        </p>
        <b-field grouped group-multiline>
          <div v-for="t in tags" :key="t.id">
            <b-tag v-if="t.properties.get('color') === 'none'" class="tag" rounded>
              <svg viewBox="0 0 24 24">
                <circle
                  :cy="12"
                  :cx="12"
                  :r="8"
                  :fill="t.properties.get('color')"
                  :stroke="t.properties.get('stroke')"
                />
              </svg>
              {{ t.name }}
            </b-tag>
          </div>
        </b-field>
      </section>
    </template>
  </BasePane>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    // same as slotId
    instanceId: {
      type: Number,
      required: true
    }
  },
  computed: {
    ...mapGetters('data', 'getTags'),
    tags() {
      return this.$store.getters['data/getTags'](this.instanceId)
    }
  }
}
</script>

<style lang="sass" scoped>
section:first-of-type
  margin-top: 0.6em
section
  font-size: 0.9em
  margin-top: 1.4em
  &.limit-height-scrollable
    max-height: 20em
    overflow-y: auto
    overflow-x: hidden
  &.joined
    margin-top: 0

.tag
  margin-top: 7px
  margin-right: 10px
  border: 2px solid #cccccc

svg
    height: 1em
    width: 1em
    margin-top: -2px
    vertical-align: middle

.small-title
  color: #363636
  font-size: 0.7rem
  font-weight: 500
</style>
