<template>
  <div class="toolbar">
    <div class="tools">
      <button :class="{ active: activeTool === 'tiles' }" @click="activeTool = 'tiles'">
        <img src="/assets/icons/zoneEditor/tiles.svg" alt="Eraser tool" />
      </button>
      <div class="divider"></div>
      <button :class="{ active: activeTool === 'eraser' }" @click="activeTool = 'eraser'">
        <img src="/assets/icons/zoneEditor/eraser-tool.svg" alt="Eraser tool" />
      </button>
    </div>
    <div class="buttons">
      <button class="btn-cyan">Save</button>
      <button class="btn-cyan">Load</button>
      <button class="btn-cyan">Clear</button>
      <button class="btn-cyan">Exit</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeTool = ref('tiles');
</script>

<style scoped lang="scss">
@import '@/assets/scss/main';

.toolbar {
  position: absolute;
  border-radius: 5px;
  opacity: 0.8;
  display: flex;
  background: $dark-gray;
  border: 2px solid $cyan;
  color: $light-gray;
  padding: 5px;
  min-width: 100%;
  height: 40px;

  .tools {
    display: flex;
    gap: 10px;

    .divider {
      width: 1px;
      background: $cyan;
    }

    // vertical center
    button {
      display: flex;
      justify-content: center;
      align-items: center;

      &.active {
        border-bottom: 3px solid $light-cyan;
        border-radius: 5px;
      }
    }

    img {
      filter: invert(1);
      width: 35px;
      height: 35px;
    }
  }

  .buttons {
    display: flex;
    gap: 10px;
    margin-left: auto;

    button {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}
</style>