<script setup>
import { onMounted, ref } from "vue";
import AlarmCards from "./AlarmCards.vue";

const showErr = ref(false);
const toggleErrIcon = () => {
  console.log("Toggle");
  showErr.value = !showErr.value;
};
</script>

<template>
  <div class="drawer drawer-end">
    <input id="alarm" type="checkbox" class="drawer-toggle" />
    <div class="drawer-content">
      <!-- Page content here -->
      <label
        for="alarm"
        class="drawer-button flex flex-col justify-center items-center bg-transparent w-[95px]"
        @click="toggleErrIcon"
      >
        <font-awesome-icon
          v-if="!showErr"
          :icon="['fas', 'comment-dots']"
          size="2x"
          class="text-white w-10 m-auto"
        />
        <font-awesome-icon
          v-else
          :icon="['fas', 'comment-slash']"
          size="2x"
          class="text-white w-10 m-auto"
        />
        <span class="text-white block mt-0"> {{ $t("alarm.title") }}</span>
      </label>
    </div>
    <div
      v-if="showErr"
      class="drawer-side translate-y-20 max-h-[90vh] overflow-x-hidden overflow-y-scroll w-[300px] left-auto right-0"
    >
      <AlarmCards />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.drawer-toggle,
.drawer-button {
  outline: none !important;
  outline-offset: 0 !important;
  border: 0 !important;
}
</style>
