<template>
  <div v-if="shownote" class="text-center q-ma-sm">
    <q-dialog v-model="shownote" maximized>
      <q-card>
        <q-toolbar class="bg-primary text-white">
          <q-toolbar-title> Note per {{ username }}: </q-toolbar-title>
          <q-btn
            flat
            round
            color="white"
            icon="close"
            @click="
              $emit('closenote');
              shownote = false;
            "
          ></q-btn>
        </q-toolbar>
        <q-card-section>
          Note per {{ username }} da parte del Facilitatore:
          <br />

          <CMyFieldRec
            table="users"
            :id="userprofile._id"
            :rec="userprofile"
            field="profile.note"
            class="cursor-pointer"
            :canEdit="true"
            :canModify="true"
          >
          </CMyFieldRec>
        </q-card-section>
        <q-card-actions align="center">
          <q-btn
            filled
            :label="t('dialog.save')"
            color="primary"
            @click="UpdateDbNote"
          ></q-btn>
          <q-btn
            filled
            :label="$t('dialog.close')"
            icon="close"
            @click="
              $emit('closenote');
              shownote = false;
            "
          ></q-btn>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

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

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