<template>
  <div class="q-ma-sm">
    <div
      :class="[
        $q.dark.isActive ? `bg-black text-white` : `bg-white text-black`,
        'column cursor-pointer',
      ]"
      @click="copytoclip"
      style="max-width: 100%; width: auto; overflow: hidden"
    >
      <q-field
        outlined
        :label="title"
        stack-label
        class="text-center"
        style="max-width: 100%"
        label-color="blue"
      >
        <template v-slot:prepend>
          <q-btn v-if="!$q.platform.is.mobile" round dense flat icon="far fa-copy" />
        </template>

        <template v-slot:control>
          <div
            class="self-center q-my-xs no-outline text-center wrapword"
            :class="getclass()"
            style="
              overflow-wrap: break-word;
              word-wrap: break-word;
              white-space: normal;
              max-width: 100%; /* Assicurati di limitare la larghezza */
            "
          >
            {{ tools.firstchars(texttocopy, 300) }}
          </div>
        </template>
      </q-field>
      <div class="row justify-center">
        <q-btn 
        rounded 
        label="Copia il link" color="primary" @click="copytoclip" 
        >
        </q-btn>
      </div>
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
@import './CCopyBtn.scss';
</style>
