<script>
	import {projects_base} from "$shared/lib/configuration";
	import {get_session_data} from "$shared/lib/session";
	import {push} from "svelte-spa-router";
	import Layout from "./_layout@loggedin.svelte";
	import LinkCard from "$shared/components/link-card.svelte";
    import Alert from "$shared/components/alert.svelte";
	import {UserIcon, UsersIcon, WatchIcon, SendIcon, ListIcon} from "svelte-feather-icons";

	let showUsers = true;
	const session = get_session_data();
</script>

<Layout>
    <div class="grid gap-md">
        <div class="row">
            <Alert closeable="true" 
                   title="Hello {session.profile?.username}" 
                   message="This is your portal to Greatoffice, here you will find all your great apps and management options."/>
        </div>
        <div class="row">
            <h2 class="margin-bottom-xs">Apps</h2>
            <div class="grid-auto-md gap-sm">
                <LinkCard name="Projects"
                          description="The home for your projects"
                          text="Open in a new tab"
                          target="_blank"
                          title="Open Projects in a new tab"
                          href="{projects_base()}">
                    <figure slot="icon">
                        <div class="bg-primary bg-opacity-10% padding-xs border-left border-primary border-2">
                            <WatchIcon size="42"
                                       class="color-primary"
                                       strokeWidth="1.2"/>
                        </div>
                    </figure>
                </LinkCard>
                <LinkCard name="Tickets"
                          description="The home for your tickets"
                          class="c-disabled user-select-none"
                          text="Coming soon"
                          target="_blank"
                          title="Open Tickets in a new tab"
                          href="{projects_base()}">
                    <figure slot="icon">
                        <div class="bg-primary bg-opacity-10% padding-xs border-left border-primary border-2">
                            <SendIcon size="42"
                                       class="color-primary"
                                       strokeWidth="1.2"/>
                        </div>
                    </figure>
                </LinkCard>
                <LinkCard name="Todo"
                          description="The home for your todos"
                          class="c-disabled user-select-none"
                          text="Coming soon"
                          target="_blank"
                          title="Open Todo in a new tab"
                          href="{projects_base()}">
                    <figure slot="icon">
                        <div class="bg-primary bg-opacity-10% padding-xs border-left border-primary border-2">
                            <ListIcon size="42"
                                       class="color-primary"
                                       strokeWidth="1.2"/>
                        </div>
                    </figure>
                </LinkCard>
            </div>
        </div>
        <div class="row">
            <h2 class="margin-bottom-xs">Manage</h2>
            <div class="grid-auto-md gap-sm">
                <LinkCard name="Profile"
                          description="Manage your profile"
                          text="Open"
                          title="Go to your profile management page"
                          on:click={() => push("/profile")}>
                    <figure slot="icon">
                        <div class="bg-primary bg-opacity-10% padding-xs border-left border-primary border-2">
                            <UserIcon size="42"
                                      class="color-primary"
                                      strokeWidth="1.2"/>
                        </div>
                    </figure>
                </LinkCard>
                {#if showUsers}
                    <LinkCard name="Users"
                              description="Manage your users"
                              title="Go to your users management page"
                              text="Open"
                              href="{projects_base()}">
                        <figure slot="icon">
                            <div class="bg-primary bg-opacity-10% padding-xs border-left border-primary border-2">
                                <UsersIcon size="42"
                                           class="color-primary"
                                           strokeWidth="1.2"/>
                            </div>
                        </figure>
                    </LinkCard>
                {/if}
            </div>
        </div>
    </div>
</Layout>
