add: bottom toolbar, remove button for cards

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

app/pages/index.vue

@@ -1,19 +1,41 @@
 <template>
   <section class="content flex-col">
     <div class="pc-wrapper flex-col">
-      <PpPriceCard v-for="num in cards" :uid="num" />
+      <PpPriceCard
+          v-for="card in cards"
+          :key="card"
+          :uid="card"
+          :deletable="cards.length > 1"
+          @remove="removeCard"
+      />
     </div>
-    <PpButton class="cta" @click="addCard">
-      <Icon name="uil:plus" mode="svg" />
-      Vergleich hinzufügen
-    </PpButton>
   </section>
+  <PpToolbar>
+    <PpButton class="mini-button text-white" @click="addCard">
+      <Icon class="icon" name="uil:plus" mode="svg" />
+      <span>Hinzufügen</span>
+    </PpButton>
+    <PpButton class="mini-button text-white" @click="calculate">
+      <Icon class="icon" name="uil:calculator" mode="svg" />
+      <span>Berechnen</span>
+    </PpButton>
+  </PpToolbar>
 </template>
 
 <script setup lang="ts">
-const cards = ref(1)
+const initialId = crypto.randomUUID()
+
+const cards = useState('cards', () => [
+  initialId,
+])
 
 const addCard = () => {
-  cards.value++
+  cards.value.push(crypto.randomUUID())
 }
+
+const removeCard = (uuid : string) => {
+  cards.value = cards.value.filter((c) => c !== uuid)
+}
+
+const calculate = () => {}
 </script>