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

const text = 'demo text';
const isEdit = ref(false);
</script>
<template>
  <div class="full-width column no-wrap" style="height: 50vh">
    <div
      v-if="true"
      class="bordered rounded surface-1 flex col column justify-between"
    >
      <q-list class="full-width col scroll">
        <q-item class="items-center row q-px-lg">
          <q-btn
            id="btn-delete-work-name"
            icon="mdi-trash-can-outline"
            dense
            flat
            round
            color="negative"
          />
          <q-btn
            v-if="!isEdit"
            id="btn-edit-work-name"
            icon="mdi-pencil-outline"
            dense
            flat
            round
            class="q-ml-md"
            color="primary"
            @click="isEdit = true"
          />
          <q-btn
            v-else
            id="btn-edit-work-name"
            icon="mdi-check"
            dense
            flat
            round
            class="q-ml-md"
            color="primary"
            @click="isEdit = false"
          />
          <!-- outlined -->
          <q-input
            dense
            :borderless="!isEdit"
            :readonly="!isEdit"
            :outlined="isEdit"
            class="q-ml-xl col"
            v-model="text"
            placeholder="ชื่องาน"
          ></q-input>
        </q-item>
      </q-list>

      <div class="bordered-t full-width">
        <q-item clickable>
          <span class="q-px-lg flex items-center app-text-muted-2">
            <q-icon name="mdi-plus" class="q-mr-md" />
            เพิ่มงานใหม่
          </span>
        </q-item>
      </div>
    </div>
    <div
      v-else
      class="bordered rounded surface-1 flex justify-center items-center col"
    >
      <NoData />
    </div>
  </div>
</template>
