<template>
  <div class="card legend-container">
    <checkbox-blank-circle-icon class="small-icon manual" />
    <div>Manually edited image</div>
    <close-icon class="small-icon manual" />
    <div>Manually discarded stake</div>
    <close-icon class="small-icon discard" />
    <div>Discarded image</div>
    <checkbox-blank-circle-icon class="small-icon not-found" />
    <div>Stake not found</div>
    <checkbox-blank-circle-icon class="small-icon no-snow" />
    <div>Found no snow in the image</div>
    <checkbox-blank-circle-icon class="small-icon normal" />
    <div>Stake found</div>
    <chart-line-variant-icon class="small-icon average" />
    <div>Snow height moving average</div>
  </div>
</template>

<script>
import CloseIcon from 'icons/Close'
import CheckboxBlankCircleIcon from 'icons/CheckboxBlankCircle'
import ChartLineVariantIcon from 'icons/ChartLineVariant'
export default {
  name: 'Legend',
  components: {
    CloseIcon,
    CheckboxBlankCircleIcon,
    ChartLineVariantIcon
  }
}
</script>

<style scoped>
.legend-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto 220px;
  align-items: center;

  padding: 10px;
}

.small-icon svg {
  width: 15px;
  height: 15px;
}

.manual svg {
  fill: var(--color-manually-edited);
}
.discard svg {
  fill: var(--color-discarded);
}
.not-found svg {
  fill: var(--color-not-found);
}
.no-snow svg {
  fill: var(--color-no-snow);
}
.normal svg {
  fill: var(--color-normal);
}
.average svg {
  fill: var(--color-average);
}
</style>
