add: bottom toolbar, remove button for cards

Implemented bottom toolbar for adding and calculating, added remove button for Price Cards

app/components/Pp/PriceCard.vue

@@ -1,8 +1,18 @@
 <template>
   <form class="PriceCard card">
+    <header class="padding bg-blue">
+      TODO: IRGENDWAS
+      <PpButton
+          class="icon-button bg-main"
+          :class="[deletable && 'deletable']"
+          @click="emit('remove', uid)"
+      >
+        <Icon name="uil:times" mode="svg" />
+      </PpButton>
+    </header>
     <div class="padding bg-blue flex-col">
       <div class="wrapper">
-        <PpFormInput v-model="name" label="Name" id="n" :uid="uid" type="text" />
+<!--        <PpFormInput v-model="name" label="Name" id="n" :uid="uid" type="text" />-->
         <PpFormInput v-model="price" label="Preis" id="p" :uid="uid" type="number" :min="0.01" @blur="calculate" />
       </div>
       <div class="wrapper">
@@ -19,7 +29,7 @@
       </div>
       <div class="info flex-col">
         <Icon class="icon" name="uil:file-landscape" mode="svg" />
-        <span class="price">{{ intl.format(ppr) }}</span>
+        <span class="price">{{ intl.format(pps) }}</span>
         <span class="pro">Pro 10</span>
       </div>
       <div class="info flex-col">
@@ -33,11 +43,14 @@
 
 <script setup lang="ts">
 type Props = {
-  uid: number
+  uid: string
+  deletable: boolean
 }
 
 const { uid } = defineProps<Props>()
 
+const emit = defineEmits(['remove'])
+
 const name = ref('')
 const price = ref(0)
 const roles = ref(0)
@@ -61,6 +74,6 @@ const calculate = () => {
   pps.value = (ppr.value / sheets.value) * 10
 
   if(!layers.value) return
-  ppl.value = (pps.value / layers.value) * 100
+  ppl.value = (pps.value / layers.value) * 10
 }
 </script>