<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2023 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 {t} from "astro-i18n";
    import type {Player} from "@type/data.ts";
    import {l} from "@utils/util.ts";
    import Statistics from "./Statistics.svelte";
    import {authV2Repo} from "@repo/authv2.ts";
    import Card from "@components/Card.svelte";
    import {navigate} from "astro:transitions/client";

  interface Props {
    user: Player;
  }

  let { user }: Props = $props();

    async function logout() {
        await $authV2Repo.logout();
        await navigate(l("/login"));
    }
</script>

<div class="flex mb-4 flex-col md:flex-row">
    <div>
        <Card>
            <figure>
                <figcaption class="text-center mb-4 text-2xl">{user.name}</figcaption>
                <img src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${user.uuid}`} class="transition duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl" alt={user.name + "s bust"} width="150" height="150" />
            </figure>
        </Card>
        <div class="flex flex-wrap">
            <button class="btn mt-2" onclick={logout}>{t("dashboard.buttons.logout")}</button>
            {#if user.perms.includes("MODERATION")}
                <a class="btn w-fit mt-2" href="/admin" data-astro-reload>{t("dashboard.buttons.admin")}</a>
            {/if}
        </div>
    </div>
    <div>
        <h1 class="text-4xl font-bold">{t("dashboard.title", {name: user.name})}</h1>
        <p>{t("dashboard.rank", {rank: t("home.prefix." + (user.prefix || "User"))})}</p>
        <Statistics {user} />
    </div>
</div>