<template>
  <div>
    <q-card class="shadow-6 rounded-lg" style="overflow: hidden">
      <!-- Barra superiore -->
      <q-bar class="bg-primary text-white">
        Aggiungi Elemento:
        <q-space />
        <q-btn flat round icon="close" v-close-popup />
      </q-bar>

      <!-- Contenuto principale -->
      <div class="q-pa-sm row justify-center">
        <div style="width: 100%; max-width: 350px">
          <q-list padding bordered class="rounded-borders shadow-sm">
            <!-- Sezioni generate dinamicamente -->
            <q-expansion-item
              v-for="(sec, i) in sections"
              :key="sec.label"
              :label="sec.label"
              :icon="sec.icon"
              :default-opened="i === 0"
              expand-separator
              header-class="text-subtitle1 text-weight-bold"
            >
              <div class="row q-pa-xs" v-if="enableAdd">
                <div
                  v-for="(rec, idx) in sec.items"
                  :key="idx"
                  class="col-6"
                >
                  <q-btn
                    flat
                    no-caps
                    stack
                    class="elementor-btn full-width q-py-sm q-px-sm my-stacked-btn"
                    :icon="rec.icon"
                    :label="rec.label"
                    text-color="primary"
                    @click="
                      newtype = rec.value;
                      addNewElem(myel, direzadd);
                    "
                  />
                </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>
