<template>
  <div class="sm:hidden min-w-[48px]">
    <button @click="addTask" type="button" v-bind="$attrs" :disabled="!boardsStore.getColumns"
      class="text-white text-sm font-bold py-2.5 px-4.5 rounded-3xl bg-main-purple hover:bg-main-purple-light disabled:bg-main-purple disabled:bg-opacity-20">
      <img src="@/assets/icons/icon-add-task-mobile.svg" alt="">
    </button>
  </div>
</template>
<script setup>
import { useBoardsStore } from '@/store/boards';
import { useSystemStore } from '@/store/system';
const boardsStore = useBoardsStore()
const systemStore = useSystemStore()

const addTask = () => {
  systemStore.overlay = true
  systemStore.taskForm = { edit: false, visible: true }
}
</script>