<q-btn dense round flat icon="shopping_cart">
  <q-badge v-if="cart.size" color="red" class="text-bold" floating>
    {{ cart.size }}
  </q-badge>
  <q-menu v-if="cart.size">
    <q-list style="min-width: 100px">
      <q-item :id="p.id" :key="p.id" v-for="p in cartMenu">
        <q-item-section style="flex-flow: row">
          <q-btn color="red" size="xs" icon="remove" @click="remove(p.id)" />
          <q-input
            v-model.number="p.quantity"
            @change="addQty(p.id, p.quantity)"
            type="number"
            dense
            standout
            :max="products.find(pr => pr.id == p.id).quantity"
          ></q-input>
          
          <q-btn color="green" size="xs" icon="add" @click="add(p.id)" />
        </q-item-section>
        <q-item-section avatar v-if="p.image">
          <q-avatar color="primary">
            <img :src="p.image" />
          </q-avatar>
        </q-item-section>

        <q-item-section top class="q-mx-sm">
          <q-item-label>{{ p.name }}</q-item-label>
        </q-item-section>

        <q-item-section side>
          <span>
            {{p.currency != 'sat' ? p.formatedPrice : p.price + 'sats'}}
            <q-btn
              class="q-ml-md"
              round
              color="red"
              size="xs"
              icon="close"
              @click="removeProduct(p.id)"
            />
          </span>
        </q-item-section>
      </q-item>
      <q-separator />
    </q-list>
    <div class="row q-pa-md q-gutter-md">
      <q-btn
        color="primary"
        icon-right="checkout"
        label="Checkout"
        @click="$emit('open-checkout')"
      ></q-btn>
      <q-btn
        class="q-ml-auto"
        flat
        color="primary"
        label="Reset"
        @click="$emit('reset-cart')"
      ></q-btn></div></q-menu
></q-btn>
