<template>
  <q-banner
    v-if="num_notifs > 0"
    rounded
    dense
    class="bg-primary text-white"
    color="primary q-title"
    style="text-align: center;">
    <template v-slot:avatar>
      <q-icon name="fas fa-exclamation-triangle" color="yellow" size="xs" />
    </template>
    <q-item clickable v-for="(notif, index) in lasts_notifs_req" :key="index">

      <!--<q-item-section avatar>
        <q-avatar>
          <q-item-label lines="1">{{ getTypeDirNotif(notif) }}</q-item-label>
        </q-avatar>
      </q-item-section>-->

      <q-item-section avatar>
        <q-avatar>
          <img :src="notif.myimgsender" :alt="notif.sender">
        </q-avatar>
      </q-item-section>


      <q-item-section v-ripple>
        <q-item-label lines="5" :class="(!notif.read) ? 'unread' : 'read'" @click="clickNotif(notif)">
          <div v-html="getNotifText($t, notif, false)"></div>
        </q-item-label>
        <q-item-label caption lines="2"
                      v-if="notif.typedir === shared_consts.TypeNotifs.TYPEDIR_CIRCUITS && notif.status === 0 && notif.typeid === shared_consts.TypeNotifs.ID_CIRCUIT_SENDCOINSREQ"
                      v-ripple>
          <div class="row no-wrap justify-evenly q-pa-sm">
            <q-btn
              size="md"
              icon="fas fa-coins"
              color="positive" :label="$t('circuit.accept_coins_qty', {qty: notif.extrarec.qty, symbol: notif.extrarec.symbol})"
              @click="tools.acceptCoins(q, notif.sender, notif)"
            />
            <q-btn
              size="md"
              color="negative" :label="$t('circuit.refuse_coins_qty', {qty: notif.extrarec.qty, symbol: notif.extrarec.symbol})"
              @click="tools.refuseCoins(q, notif.sender, notif.extrarec)"
            />
          </div>
        </q-item-label>
      </q-item-section>
    </q-item>
  </q-banner>
</template>

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

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