BSlideOverlay in qrcode and qrcode/status

src/routes/[qrcode]/status/+page.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { invalidate } from "$app/navigation";
+  import { goto, invalidate } from "$app/navigation";
+  import { scale } from 'svelte/transition';
   import BatteryIcon from "$lib/icons/BatteryIcon.svelte";
+  import BSlideOverlay from "$lib/BSlideOverlay.svelte";
 
   let { data } = $props();
 
@@ -23,7 +25,20 @@
     return (wh / 1000).toFixed(2);
   });
 
-  // TODO: Add Modal from bottom to confirm
+  let showOverlay = $state(false);
+  let stoppingCharge = $state(false);
+
+  async function stopCharge() {
+    if (stoppingCharge) return;
+    stoppingCharge = true;
+    try {
+      // TODO: StopCharge fetch request
+      console.log("nop");
+      await goto(`/${data.qrcode}`);
+    } finally {
+      stoppingCharge = false;
+    }
+  }
 </script>
 
 <div class="pointer-events-auto bg-green-700/80 h-full w-full flex flex-col justify-center items-center gap-12">
@@ -36,7 +51,7 @@
     <p class="text-sm">Potenza misurata: {powerkWh} kW</p>
   </div>
   <div class="w-[90%]">
-    <button class="btn btn-warning btn-xl w-full">Interrompere la ricarica</button>
+    <button class="btn btn-warning btn-xl w-full" onclick={() => showOverlay = true}>Interrompere la ricarica</button>
   </div>
   <div class="text-center w-[70%] flex flex-col gap-5 text-sm">
     <p>
@@ -46,4 +61,19 @@
       Papa Francesco, Enciclica Laudato Si’
     </p>
   </div>
+  <BSlideOverlay bind:show={showOverlay} closable={!stoppingCharge}>
+    {#snippet children({ closeOverlay })}
+      <p class="font-bold w-[90%] text-wrap uppercase text-center">Sei sicuro di voler interrompere la ricarica?</p>
+      <div class="flex flex-row justify-around gap-4 w-full">
+        <button class="btn btn-primary btn-xl w-24 grid" onclick={stopCharge}>
+          {#if stoppingCharge}
+            <span transition:scale class="col-start-1 col-end-2 row-start-1 row-end-2 loading"></span>
+          {:else}
+            <span transition:scale class="col-start-1 col-end-2 row-start-1 row-end-2">SI</span>
+          {/if}
+        </button>
+        <button class="btn btn-secondary btn-xl w-24" onclick={closeOverlay}>NO</button>
+      </div>
+    {/snippet}
+  </BSlideOverlay>
 </div>