<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2024 SteamWar.de-Serverteam
  -
  -   This program is free software: you can redistribute it and/or modify
  -   it under the terms of the GNU Affero General Public License as published by
  -   the Free Software Foundation, either version 3 of the License, or
  -   (at your option) any later version.
  -
  -   This program is distributed in the hope that it will be useful,
  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  -   GNU Affero General Public License for more details.
  -
  -   You should have received a copy of the GNU Affero General Public License
  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

<script lang="ts">
    import {createEventDispatcher, onMount} from "svelte";

    export let title: string;
    export let open: boolean;
    let internalOpen = open;

    const dispatch = createEventDispatcher();

    $: if (open && !internalOpen) {
        dialog.showModal();
        internalOpen = true;
    } else if (!open && internalOpen) {
        dialog.close();
        internalOpen = false;
    }

    let dialog: HTMLDialogElement;

    onMount(() => {
        if (open) {
            dialog.showModal();
            internalOpen = true;
        }
    });

    function close() {
        open = false;
        internalOpen = false;
        dispatch("close");
    }
</script>

<dialog bind:this={dialog} on:close={close} on:cancel={close} on:click={() => dialog.close()} aria-hidden="true">
    <div on:click|stopPropagation aria-hidden="true">
        <div class="spaced bordered">
            <h1>{title}</h1>
        </div>
        <div class="spaced main bordered">
            <slot />
        </div>
        <div class="footer spaced" on:click={() => dialog.close()} aria-hidden="true">
            <slot name="footer" />
        </div>
    </div>
</dialog>

<style lang="scss">
  h1 {
    @apply text-4xl font-bold;
  }

  dialog {
    @apply max-h-full max-w-md w-full rounded-lg shadow-lg
        dark:bg-neutral-800 dark:text-neutral-100;
  }

  .spaced {
    @apply p-6;
  }

  .bordered {
    @apply border-b border-neutral-200 dark:border-neutral-700;
  }

  .footer {
    @apply flex mx-4 my-2;
  }
</style>