<script lang="ts">
    import * as m from "$lib/paraglide/messages";
    import ConfirmDialog from "./ConfirmDialog.svelte";

    interface ColorPickerProps {
        value: string;
        onchange?: (color: string) => void;
    }

    let { value = $bindable("#ffffff"), onchange }: ColorPickerProps = $props();

    let isOpen = $state(false);
    let hexInput = $state(value);

    // RGB values
    let r = $state(255);
    let g = $state(255);
    let b = $state(255);

    // Alpha/Opacity (0-100%)
    let alpha = $state(100);

    // HSV values
    let hsvH = $state(0);
    let hsvS = $state(0);
    let hsvV = $state(100);

    // HSL values
    let hslH = $state(0);
    let hslS = $state(0);
    let hslL = $state(100);

    // Grayscale
    let gray = $state(255);

    // Parse hex input - supports 2, 3, 6, and 8 character formats
    function parseHexInput(input: string): string | null {
        // Remove # and whitespace
        let hex = input.replace(/^#/, "").trim().toLowerCase();

        // 2 characters: repeat 3 times (e.g., "AB" → "ABABAB")
        if (/^[a-f\d]{2}$/i.test(hex)) {
            hex = hex + hex + hex;
        }
        // 3 characters: double each (e.g., "ABC" → "AABBCC")
        else if (/^[a-f\d]{3}$/i.test(hex)) {
            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
        }
        // 4 characters: double each with alpha (e.g., "ABCD" → "AABBCCDD")
        else if (/^[a-f\d]{4}$/i.test(hex)) {
            hex =
                hex[0] +
                hex[0] +
                hex[1] +
                hex[1] +
                hex[2] +
                hex[2] +
                hex[3] +
                hex[3];
        }
        // 6 characters: full hex
        else if (/^[a-f\d]{6}$/i.test(hex)) {
            // Already valid
        }
        // 8 characters: full hex with alpha
        else if (/^[a-f\d]{8}$/i.test(hex)) {
            // Valid with alpha
        } else {
            return null; // Invalid
        }

        return "#" + hex;
    }

    // Convert hex to RGB (supports 6 and 8 character hex)
    function hexToRgb(hex: string): {
        r: number;
        g: number;
        b: number;
        a: number;
    } {
        const parsed = parseHexInput(hex);
        if (!parsed) return { r: 255, g: 255, b: 255, a: 100 };

        const clean = parsed.replace("#", "");
        const r = parseInt(clean.substring(0, 2), 16);
        const g = parseInt(clean.substring(2, 4), 16);
        const b = parseInt(clean.substring(4, 6), 16);
        // Alpha from hex (8 chars) or default to 100%
        const a =
            clean.length === 8
                ? Math.round((parseInt(clean.substring(6, 8), 16) / 255) * 100)
                : 100;

        return { r, g, b, a };
    }

    // Convert RGB to hex (always outputs 6 characters, alpha stored separately)
    function rgbToHex(r: number, g: number, b: number): string {
        return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
    }

    // Convert RGB to HSV
    function rgbToHsv(
        r: number,
        g: number,
        b: number,
    ): { h: number; s: number; v: number } {
        r /= 255;
        g /= 255;
        b /= 255;
        const max = Math.max(r, g, b),
            min = Math.min(r, g, b);
        const v = max;
        const d = max - min;
        const s = max === 0 ? 0 : d / max;
        let h = 0;
        if (max !== min) {
            switch (max) {
                case r:
                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
                    break;
                case g:
                    h = ((b - r) / d + 2) / 6;
                    break;
                case b:
                    h = ((r - g) / d + 4) / 6;
                    break;
            }
        }
        return {
            h: Math.round(h * 360),
            s: Math.round(s * 100),
            v: Math.round(v * 100),
        };
    }

    // Convert HSV to RGB
    function hsvToRgb(
        h: number,
        s: number,
        v: number,
    ): { r: number; g: number; b: number } {
        s /= 100;
        v /= 100;
        const c = v * s;
        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
        const m = v - c;
        let r1 = 0,
            g1 = 0,
            b1 = 0;
        if (h < 60) {
            r1 = c;
            g1 = x;
        } else if (h < 120) {
            r1 = x;
            g1 = c;
        } else if (h < 180) {
            g1 = c;
            b1 = x;
        } else if (h < 240) {
            g1 = x;
            b1 = c;
        } else if (h < 300) {
            r1 = x;
            b1 = c;
        } else {
            r1 = c;
            b1 = x;
        }
        return {
            r: Math.round((r1 + m) * 255),
            g: Math.round((g1 + m) * 255),
            b: Math.round((b1 + m) * 255),
        };
    }

    // Convert RGB to HSL
    function rgbToHsl(
        r: number,
        g: number,
        b: number,
    ): { h: number; s: number; l: number } {
        r /= 255;
        g /= 255;
        b /= 255;
        const max = Math.max(r, g, b),
            min = Math.min(r, g, b);
        const l = (max + min) / 2;
        let h = 0,
            s = 0;
        if (max !== min) {
            const d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch (max) {
                case r:
                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
                    break;
                case g:
                    h = ((b - r) / d + 2) / 6;
                    break;
                case b:
                    h = ((r - g) / d + 4) / 6;
                    break;
            }
        }
        return {
            h: Math.round(h * 360),
            s: Math.round(s * 100),
            l: Math.round(l * 100),
        };
    }

    // Convert HSL to RGB
    function hslToRgb(
        h: number,
        s: number,
        l: number,
    ): { r: number; g: number; b: number } {
        s /= 100;
        l /= 100;
        const c = (1 - Math.abs(2 * l - 1)) * s;
        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
        const m = l - c / 2;
        let r1 = 0,
            g1 = 0,
            b1 = 0;
        if (h < 60) {
            r1 = c;
            g1 = x;
        } else if (h < 120) {
            r1 = x;
            g1 = c;
        } else if (h < 180) {
            g1 = c;
            b1 = x;
        } else if (h < 240) {
            g1 = x;
            b1 = c;
        } else if (h < 300) {
            r1 = x;
            b1 = c;
        } else {
            r1 = c;
            b1 = x;
        }
        return {
            r: Math.round((r1 + m) * 255),
            g: Math.round((g1 + m) * 255),
            b: Math.round((b1 + m) * 255),
        };
    }

    // Sync all values from hex
    function syncFromHex(hex: string) {
        const rgba = hexToRgb(hex);
        r = rgba.r;
        g = rgba.g;
        b = rgba.b;
        alpha = rgba.a;
        const hsv = rgbToHsv(r, g, b);
        hsvH = hsv.h;
        hsvS = hsv.s;
        hsvV = hsv.v;
        const hsl = rgbToHsl(r, g, b);
        hslH = hsl.h;
        hslS = hsl.s;
        hslL = hsl.l;
        gray = Math.round((r + g + b) / 3);
        hexInput = rgbToHex(r, g, b);
    }

    // Initialize from value
    $effect(() => {
        if (!isOpen) {
            syncFromHex(value);
        }
    });

    // Get output color with alpha if not 100%
    function getOutputColor(): string {
        const hex = rgbToHex(r, g, b);
        if (alpha < 100) {
            const alphaHex = Math.round((alpha / 100) * 255)
                .toString(16)
                .padStart(2, "0");
            return hex + alphaHex;
        }
        return hex;
    }

    function applyColor(hex: string, updateAlphaFromHex = true) {
        const rgba = hexToRgb(hex);
        r = rgba.r;
        g = rgba.g;
        b = rgba.b;
        // Update alpha from hex if it's 8 chars
        if (updateAlphaFromHex && hex.replace("#", "").length === 8) {
            alpha = rgba.a;
        }
        const hsv = rgbToHsv(r, g, b);
        hsvH = hsv.h;
        hsvS = hsv.s;
        hsvV = hsv.v;
        const hsl = rgbToHsl(r, g, b);
        hslH = hsl.h;
        hslS = hsl.s;
        hslL = hsl.l;
        gray = Math.round((r + g + b) / 3);
        // Update output value with alpha
        value = getOutputColor();
        hexInput = rgbToHex(r, g, b);
        onchange?.(value);
    }

    function updateFromHex() {
        const parsed = parseHexInput(hexInput);
        if (parsed) {
            applyColor(parsed, true);
        }
    }

    function updateFromRgb() {
        r = Math.max(0, Math.min(255, r));
        g = Math.max(0, Math.min(255, g));
        b = Math.max(0, Math.min(255, b));
        applyColor(rgbToHex(r, g, b), false);
    }

    function updateFromHsv() {
        const rgb = hsvToRgb(hsvH, hsvS, hsvV);
        applyColor(rgbToHex(rgb.r, rgb.g, rgb.b), false);
    }

    function updateFromHsl() {
        const rgb = hslToRgb(hslH, hslS, hslL);
        applyColor(rgbToHex(rgb.r, rgb.g, rgb.b), false);
    }

    function updateFromAlpha() {
        value = getOutputColor();
        onchange?.(value);
    }

    function updateFromGray() {
        const v = Math.max(0, Math.min(255, gray));
        applyColor(rgbToHex(v, v, v));
    }

    // Handle saturation/value picker click (HSV-based)
    function handleSVPick(e: MouseEvent) {
        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
        hsvS = Math.round(
            Math.max(
                0,
                Math.min(100, ((e.clientX - rect.left) / rect.width) * 100),
            ),
        );
        hsvV = Math.round(
            Math.max(
                0,
                Math.min(
                    100,
                    100 - ((e.clientY - rect.top) / rect.height) * 100,
                ),
            ),
        );
        updateFromHsv();
    }

    // Slider refs for global drag tracking
    let hueSliderRect: DOMRect | null = null;
    let opacitySliderRect: DOMRect | null = null;
    let svPickerRect: DOMRect | null = null;
    let dragging: "hue" | "opacity" | "sv" | null = null;

    // Calculate hue from mouse position
    function calcHue(clientX: number, rect: DOMRect) {
        const padding = rect.width * 0.02;
        const usableWidth = rect.width * 0.96;
        const relativeX = clientX - rect.left - padding;
        return Math.round(
            Math.max(0, Math.min(359, (relativeX / usableWidth) * 359)),
        );
    }

    // Calculate opacity from mouse position
    function calcOpacity(clientX: number, rect: DOMRect) {
        const padding = rect.width * 0.02;
        const usableWidth = rect.width * 0.96;
        const relativeX = clientX - rect.left - padding;
        return Math.round(
            Math.max(0, Math.min(100, (relativeX / usableWidth) * 100)),
        );
    }

    // Handle hue slider
    function handleHuePick(e: MouseEvent) {
        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
        hueSliderRect = rect;
        dragging = "hue";
        hsvH = calcHue(e.clientX, rect);
        updateFromHsv();
    }

    // Handle opacity slider
    function handleOpacityPick(e: MouseEvent) {
        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
        opacitySliderRect = rect;
        dragging = "opacity";
        alpha = calcOpacity(e.clientX, rect);
        updateFromAlpha();
    }

    // Handle SV picker
    function handleSVPickStart(e: MouseEvent) {
        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
        svPickerRect = rect;
        dragging = "sv";
        handleSVPick(e);
    }

    // Global mouse move handler
    function handleGlobalMouseMove(e: MouseEvent) {
        if (!dragging) return;

        if (dragging === "hue" && hueSliderRect) {
            hsvH = calcHue(e.clientX, hueSliderRect);
            updateFromHsv();
        } else if (dragging === "opacity" && opacitySliderRect) {
            alpha = calcOpacity(e.clientX, opacitySliderRect);
            updateFromAlpha();
        } else if (dragging === "sv" && svPickerRect) {
            const rect = svPickerRect;
            hsvS = Math.round(
                Math.max(
                    0,
                    Math.min(100, ((e.clientX - rect.left) / rect.width) * 100),
                ),
            );
            hsvV = Math.round(
                Math.max(
                    0,
                    Math.min(
                        100,
                        100 - ((e.clientY - rect.top) / rect.height) * 100,
                    ),
                ),
            );
            updateFromHsv();
        }
    }

    // Global mouse up handler
    function handleGlobalMouseUp() {
        dragging = null;
        hueSliderRect = null;
        opacitySliderRect = null;
        svPickerRect = null;
    }

    // Add/remove global listeners when modal opens/closes
    $effect(() => {
        if (isOpen) {
            document.addEventListener("mousemove", handleGlobalMouseMove);
            document.addEventListener("mouseup", handleGlobalMouseUp);
        }
        return () => {
            document.removeEventListener("mousemove", handleGlobalMouseMove);
            document.removeEventListener("mouseup", handleGlobalMouseUp);
        };
    });

    // Confirmation dialog state
    let showConfirmClose = $state(false);
    let originalValue = $state(value);

    function togglePicker() {
        if (!isOpen) {
            originalValue = value; // Store original when opening
        }
        isOpen = !isOpen;
    }

    function handleCloseClick() {
        // Only show confirmation if value changed
        if (value !== originalValue) {
            showConfirmClose = true;
        } else {
            closePicker();
        }
    }

    function confirmClose() {
        showConfirmClose = false;
        // Revert to original value
        value = originalValue;
        syncFromHex(originalValue);
        onchange?.(originalValue);
        isOpen = false;
    }

    function cancelClose() {
        showConfirmClose = false;
    }

    function closePicker() {
        isOpen = false;
    }

    // Portal action - moves element to body
    function portal(node: HTMLElement) {
        document.body.appendChild(node);
        return {
            destroy() {
                if (node.parentNode) {
                    node.parentNode.removeChild(node);
                }
            },
        };
    }
</script>

<!-- Color Swatch Button -->
<button
    class="w-10 h-10 border-4 border-black cursor-pointer"
    style="background-color: {value};"
    onclick={togglePicker}
    type="button"
    aria-label="Pick color"
></button>

<!-- Picker Modal - rendered via portal to body -->
{#if isOpen}
    <div use:portal>
        <!-- Backdrop -->
        <div
            class="fixed inset-0 bg-kv-background/50 z-[60]"
            onclick={closePicker}
            role="button"
            tabindex="-1"
            onkeydown={(e) => e.key === "Escape" && closePicker()}
        ></div>

        <!-- Modal centered on screen -->
        <div
            class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[70]
                   bg-kv-blue border-4 md:border-8 lg:border-[16px] border-kv-black
                   p-3 md:p-6 lg:p-8 w-[95vw] max-w-[320px] md:max-w-[400px] lg:max-w-[450px]
                   flex flex-col gap-3 md:gap-4 lg:gap-6
                   max-h-[90vh] overflow-y-auto"
        >
            <!-- Header with Title and Close Button -->
            <div class="flex items-start justify-between w-full">
                <h2
                    class="text-xl md:text-[28px] text-kv-white uppercase font-kv-body kv-shadow-text"
                >
                    {m.kv_color_picker()}
                </h2>
                <button
                    onclick={handleCloseClick}
                    class="w-6 h-6 cursor-pointer bg-transparent border-none p-0 hover:opacity-70"
                    aria-label="Close"
                >
                    <svg
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        class="w-full h-full text-kv-yellow"
                    >
                        <path d="M18 6L6 18M6 6l12 12" />
                    </svg>
                </button>
            </div>

            <!-- Saturation/Value Picker (HSV-based) -->
            <div
                class="relative w-full h-32 md:h-48 lg:h-56 cursor-crosshair border-2 md:border-4 border-black shrink-0 select-none"
                style="background: linear-gradient(to top, black, transparent),
                       linear-gradient(to right, white, hsl({hsvH}, 100%, 50%));"
                onmousedown={handleSVPickStart}
                role="slider"
                tabindex="0"
                aria-label="Saturation and Value"
                aria-valuenow={hsvS}
            >
                <!-- Picker Indicator -->
                <div
                    class="absolute w-5 h-5 border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2 pointer-events-none"
                    style="left: {hsvS}%; top: {100 -
                        hsvV}%; box-shadow: 0 0 3px black;"
                ></div>
            </div>

            <!-- Hue Slider -->
            <div
                class="relative w-full h-6 md:h-8 cursor-pointer border-2 md:border-4 border-black shrink-0 select-none"
                style="background: linear-gradient(to right, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(359,100%,50%));"
                onmousedown={handleHuePick}
                role="slider"
                tabindex="0"
                aria-label="Hue"
                aria-valuenow={hsvH}
            >
                <div
                    class="absolute top-0 bottom-0 w-2 md:w-3 border-2 border-white -translate-x-1/2 pointer-events-none"
                    style="left: calc(2% + {(hsvH / 359) *
                        96}%); box-shadow: 0 0 3px black;"
                ></div>
            </div>

            <!-- Opacity Slider -->
            <div>
                <div class="flex justify-between items-center mb-1">
                    <span
                        class="text-sm md:text-base text-kv-white uppercase font-kv-body kv-shadow-text"
                    >
                        {m.kv_opacity()}
                    </span>
                    <span
                        class="text-sm md:text-base text-kv-white font-kv-body"
                    >
                        {alpha}%
                    </span>
                </div>
                <div
                    class="relative w-full h-6 md:h-8 cursor-pointer border-2 md:border-4 border-black shrink-0 select-none"
                    style="background: linear-gradient(to right, transparent, {rgbToHex(
                        r,
                        g,
                        b,
                    )}), 
                           repeating-conic-gradient(#808080 0% 25%, #fff 0% 50%) 50% / 16px 16px;"
                    onmousedown={handleOpacityPick}
                    role="slider"
                    tabindex="0"
                    aria-label="Opacity"
                    aria-valuenow={alpha}
                >
                    <div
                        class="absolute top-0 bottom-0 w-2 md:w-3 border-2 border-white -translate-x-1/2 pointer-events-none"
                        style="left: calc(2% + {alpha *
                            0.96}%); box-shadow: 0 0 3px black;"
                    ></div>
                </div>
            </div>

            <!-- Preview & HEX -->
            <div class="flex gap-2 md:gap-4 items-center">
                <div
                    class="w-12 h-12 md:w-16 md:h-16 border-2 md:border-4 border-black shrink-0"
                    style="background-color: rgba({r}, {g}, {b}, {alpha /
                        100}); 
                           background-image: repeating-conic-gradient(#808080 0% 25%, #fff 0% 50%);
                           background-size: 8px 8px;
                           background-blend-mode: normal;"
                >
                    <div
                        class="w-full h-full"
                        style="background-color: rgba({r}, {g}, {b}, {alpha /
                            100});"
                    ></div>
                </div>
                <div class="flex-1">
                    <span
                        class="text-sm md:text-base text-kv-white uppercase font-kv-body kv-shadow-text"
                        >HEX</span
                    >
                    <input
                        type="text"
                        bind:value={hexInput}
                        oninput={updateFromHex}
                        onblur={updateFromHex}
                        onkeydown={(e) => e.key === "Enter" && updateFromHex()}
                        class="w-full bg-kv-black border-2 md:border-4 border-black px-2 md:px-3 py-1.5 md:py-2 text-kv-white font-kv-body text-base md:text-lg uppercase"
                        maxlength="9"
                        placeholder="#RRGGBB"
                    />
                </div>
            </div>

            <!-- RGB -->
            <div>
                <span
                    class="text-sm md:text-base text-kv-white uppercase font-kv-body kv-shadow-text"
                    >RGB</span
                >
                <div class="grid grid-cols-3 gap-1 md:gap-2">
                    <input
                        type="number"
                        bind:value={r}
                        oninput={updateFromRgb}
                        min="0"
                        max="255"
                        class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center"
                    />
                    <input
                        type="number"
                        bind:value={g}
                        oninput={updateFromRgb}
                        min="0"
                        max="255"
                        class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center"
                    />
                    <input
                        type="number"
                        bind:value={b}
                        oninput={updateFromRgb}
                        min="0"
                        max="255"
                        class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center"
                    />
                </div>
            </div>

            <!-- HSV -->
            <div>
                <span
                    class="text-sm md:text-base text-kv-white uppercase font-kv-body kv-shadow-text"
                    >HSV</span
                >
                <div class="grid grid-cols-3 gap-1 md:gap-2">
                    <input
                        type="number"
                        bind:value={hsvH}
                        oninput={updateFromHsv}
                        min="0"
                        max="360"
                        class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center"
                    />
                    <input
                        type="number"
                        bind:value={hsvS}
                        oninput={updateFromHsv}
                        min="0"
                        max="100"
                        class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center"
                    />
                    <input
                        type="number"
                        bind:value={hsvV}
                        oninput={updateFromHsv}
                        min="0"
                        max="100"
                        class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center"
                    />
                </div>
            </div>

            <!-- HSL -->
            <div>
                <span
                    class="text-sm md:text-base text-kv-white uppercase font-kv-body kv-shadow-text"
                    >HSL</span
                >
                <div class="grid grid-cols-3 gap-1 md:gap-2">
                    <input
                        type="number"
                        bind:value={hslH}
                        oninput={updateFromHsl}
                        min="0"
                        max="360"
                        class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center"
                    />
                    <input
                        type="number"
                        bind:value={hslS}
                        oninput={updateFromHsl}
                        min="0"
                        max="100"
                        class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center"
                    />
                    <input
                        type="number"
                        bind:value={hslL}
                        oninput={updateFromHsl}
                        min="0"
                        max="100"
                        class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center"
                    />
                </div>
            </div>

            <!-- Grayscale -->
            <div>
                <span
                    class="text-sm md:text-base text-kv-white uppercase font-kv-body kv-shadow-text"
                    >Grayscale</span
                >
                <input
                    type="number"
                    bind:value={gray}
                    oninput={updateFromGray}
                    min="0"
                    max="255"
                    class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center"
                />
            </div>

            <!-- Done Button -->
            <button
                onclick={closePicker}
                class="bg-kv-yellow border-4 border-black font-kv-body text-black uppercase px-6 py-3 cursor-pointer hover:opacity-80 text-xl kv-shadow-button"
            >
                {m.kv_done()}
            </button>
        </div>

        <!-- Confirmation Dialog -->
        <ConfirmDialog
            bind:open={showConfirmClose}
            title={m.kv_confirm_close_title()}
            message={m.kv_confirm_close_message()}
            confirmText={m.kv_confirm_discard()}
            cancelText={m.kv_confirm_cancel()}
            onconfirm={confirmClose}
            oncancel={cancelClose}
        />
    </div>
{/if}
