<template>
  <section>
    <h6 v-if="editMode">{{ headerLabel }}</h6>
    <q-markup-table v-if="items && items.length" bordered>
      <thead>
        <tr>
          <th class="text-left">
            {{ columnValueLabel }}
          </th>
          <th class="text-left">
            {{ columnLabelLabel }}
          </th>
          <th v-if="editMode" class="text-left"></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item of items" :key="item.value">
          <td class="text-left">{{ item.value }}</td>
          <td class="text-left">{{ item.label }}</td>
          <td v-if="editMode" class="text-left">
            <q-btn
              dense
              round
              size="sm"
              class="on-left"
              color="secondary"
              @click="editItemEntry(item)"
            >
              <q-icon size="12px" name="edit" />
              <q-tooltip :delay="500">{{ $t('base.edit') }}</q-tooltip>
            </q-btn>
            <q-btn
              dense
              round
              size="sm"
              color="red-5"
              @click="deleteItemEntry(item)"
            >
              <q-icon size="12px" name="delete" />
              <q-tooltip :delay="500">{{ $t('base.delete') }}</q-tooltip>
            </q-btn>
          </td>
        </tr>
      </tbody>
    </q-markup-table>
    <template v-if="editMode">
      <q-btn
        class="q-mt-md"
        color="primary"
        unelevated
        :label="buttonAddLabel"
        @click="showItemModal = true"
      />
      <q-dialog ref="itemModal" v-model="showItemModal" persistent>
        <q-card :style="{ minWidth: '500px' }">
          <q-card-section>
            <q-form ref="form">
              <q-input
                v-model="currentItem.value"
                :label="columnValueLabel"
                class="q-mb-sm flex-grow"
                filled
                autogrow
                hide-bottom-space
                :rules="[
                  noEmptyValueWithCustomMessageRule(String(validationLabel)),
                ]"
              />
              <q-input
                v-model="currentItem.label"
                :label="columnLabelLabel"
                class="label-input"
                filled
                autogrow
                hide-bottom-space
                :rules="[
                  noEmptyValueWithCustomMessageRule(
                    String(validationValueLabel)
                  ),
                ]"
              />
            </q-form>
          </q-card-section>
          <q-card-actions align="between">
            <q-btn
              :label="$t('base.undo')"
              color="red-5"
              @click="closeItemModal"
            />
            <q-btn
              :label="editing ? $t('base.save') : buttonAddLabel"
              color="primary"
              @click="accept"
            />
          </q-card-actions>
        </q-card>
      </q-dialog>
    </template>
  </section>
</template>

<script src="./ServicesBasicItemsList.ts" lang="ts"></script>

<style scoped>
.label-input {
  flex-grow: 1;
}
</style>
