<template>
  <div>
    <q-card class="">
      <q-bar
        dense
        class="bg-primary text-white"
      >
        Aggiungi Elemento:
        <q-space />
        <q-btn
          flat
          round
          color="white"
          icon="close"
          v-close-popup
        ></q-btn>
      </q-bar>

      <div class="q-pa-md row justify-center">
        <div style="width: 100%; max-width: 600px">
          <q-list
            padding
            bordered
            class="rounded-borders"
          >
            <q-expansion-item
              label="Principali"
              icon="fas fa-eye"
              dense
              dense-toggle
              expand-separator
              default-opened
            >
              <div class="row q-pa-sm">
                <div
                  v-for="(rec, index) in shared_consts.TypesElem"
                  :key="index"
                  class="col-6 q-pa-xs"
                >
                  <q-btn
                    v-if="enableAdd"
                    :label="rec.label"
                    color="primary"
                    class="full-width uniform-button q-px-sm"
                    @click="
                      newtype = rec.value;
                      addNewElem(myel, direzadd);
                    "
                  >
                  </q-btn>
                </div>
              </div>
            </q-expansion-item>
            <q-expansion-item
              dense
              dense-toggle
              expand-separator
              label="Gestione"
              icon="fas fa-cog"
            >
              <div class="row q-pa-sm">
                <div
                  v-for="(rec, index) in shared_consts.TypesElemAdmin"
                  :key="index"
                  class="col-6 q-pa-xs"
                >
                  <q-btn
                    v-if="enableAdd"
                    :label="rec.label"
                    color="primary"
                    class="full-width uniform-button q-px-sm"
                    @click="
                      newtype = rec.value;
                      addNewElem(myel, direzadd);
                    "
                  >
                  </q-btn>
                </div>
              </div>
            </q-expansion-item>
            <q-expansion-item
              dense
              dense-toggle
              expand-separator
              label="Avanzati"
              icon="fas fa-star"
            >
              <div class="row q-pa-sm">
                <div
                  v-for="(rec, index) in shared_consts.TypesElemAdminTools"
                  :key="index"
                  class="col-6 q-pa-sm"
                >
                  <q-btn
                    v-if="enableAdd"
                    :label="rec.label"
                    color="primary"
                    class="full-width uniform-button q-px-sm"
                    @click="
                      newtype = rec.value;
                      addNewElem(myel, direzadd);
                    "
                  >
                  </q-btn>
                </div>
              </div>
            </q-expansion-item>
          </q-list>
        </div>
      </div>
    </q-card>
  </div>
</template>

<script lang="ts" src="./CMyElemAdd.ts"></script>
<style lang="scss" scoped>
@import './CMyElemAdd.scss';
</style>
