<template>
  <div :class="['diagram-legend', { collapsed }]">
    <span class="box-control toggle" @click="collapsed = !collapsed">
      <font-awesome-icon icon="angle-left" fixed-width />
    </span>
    <div
      class="d-flex align-items-center justify-content-center w-100"
      style="overflow: hidden"
      v-if="!collapsed"
    >
      <div class="text-left px-3">
        <slot />
      </div>
    </div>
  </div>
</template>

<style lang="sass">
.diagram-legend
  position: relative
  width: 180px
  font-size: 0.8rem
  display: flex
  border-right: solid 1px #dee2e6
  .toggle
    margin-left: 0
    position: absolute
    z-index: 1
    top: 0.25rem
    left: 0.25rem
    svg
      transition: transform 0.3s
  &.collapsed
    width: 0
    border-right: none
    .toggle
      left: 0.25rem
      svg
        transform: rotateY(180deg)
  .legend
    margin: 10px 0
    span
      vertical-align: middle
      display: inline-block
      width: 12px
      height: 12px
      border-radius: 50%
</style>

<script>
/* This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Markus Kottländer <markus.kottlaender@intevation.de>
 */

export default {
  data() {
    return {
      collapsed: false
    };
  },
  watch: {
    collapsed() {
      this.$nextTick(this.$parent.drawDiagram);
    }
  }
};
</script>