<template>
    <div
        class="w-screen h-full flex items-center justify-start flex-col font-mono"
    >
        <div class="w-1 h-10 shrink-10" />

        <div
            class="w-[90vw] sm:w-[80vw] m:w-[70vw] lg:w-[60vw] xl:w-[50vw] border-solid border-ctp-text border p-6 shrink-0 overflow-auto relative"
        >
            <div class="absolute top-2 right-2 flex gap-x-2">
                <button
                    v-for="locale in locales.filter(
                        (l) => l.code !== $i18n.locale
                    )"
                    @click="setLocale(locale.code)"
                    class="cursor-pointer underline"
                >
                    {{ locale.code.toUpperCase() }}
                </button>
            </div>

            <section>
                <BashPrompt>cat README.md</BashPrompt>
                <h1 class="text-xl mr-12 mt-4">
                    {{ $t("main.intro.0") }}
                    <span class="font-bold">{{ $t("main.intro.1") }}</span
                    >, {{ $t("main.intro.2") }}{{ years
                    }}{{ $t("main.intro.3") }}
                </h1>
                <a href="/cv2.pdf" target="_blank" class="underline">
                    {{ $t("main.cv") }}
                </a>
            </section>

            <section>
                <BashPrompt>ls .</BashPrompt>
                <div class="flex items-center flex-wrap gap-x-4">
                    <ul>
                        <li>
                            <a href="#experience" class="underline">
                                {{ $t("main.experience.title") }}
                            </a>
                        </li>
                        <li>
                            <a href="#education" class="underline">
                                {{ $t("main.education.title") }}
                            </a>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href="#skills" class="underline">
                                {{ $t("main.skills.title") }}
                            </a>
                        </li>
                        <li>
                            <a href="#projects" class="underline">
                                {{ $t("main.projects.title") }}
                            </a>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href="#about-me" class="underline">
                                {{ $t("main.about.title") }}
                            </a>
                        </li>
                        <li>
                            <a href="#contacts" class="underline">
                                {{ $t("main.contacts.title") }}
                            </a>
                        </li>
                    </ul>
                </div>
            </section>

            <section>
                <BashPrompt>feh images/selfie.png</BashPrompt>
                <div class="flex justify-center w-full">
                    <NuxtImg
                        src="/images/selfie.png"
                        alt="Selfie"
                        class="w-80"
                    />
                </div>
            </section>

            <section id="experience">
                <BashPrompt>cat {{ $t("main.experience.title") }}</BashPrompt>
                <table class="w-full">
                    <thead>
                        <tr>
                            <th class="max-w-48">
                                <p class="px-1">
                                    {{ $t("main.experience.header.when") }}
                                </p>
                            </th>
                            <th>
                                <p class="px-1">
                                    {{
                                        $t("main.experience.header.occupation")
                                    }}
                                </p>
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td>{{ $t("main.experience.0.when") }}</td>
                            <td>
                                {{ $t("main.experience.0.occupation") }}<br />
                                {{ $t("main.experience.0.occupation.details") }}

                                <ul class="list-disc mt-2">
                                    <li>
                                        {{ $t("main.experience.0.details.0") }}
                                    </li>
                                    <li>
                                        {{ $t("main.experience.0.details.1") }}
                                    </li>
                                    <li>
                                        {{ $t("main.experience.0.details.2") }}
                                    </li>
                                    <li>
                                        {{ $t("main.experience.0.details.3") }}
                                    </li>
                                </ul>
                                <p class="mt-2 flex items-center gap-x-1">
                                    {{ $t("main.experience.publications") }}
                                    <ArrowLink
                                        link="https://ieeexplore.ieee.org/document/10844607"
                                    />
                                </p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </section>

            <section id="education">
                <BashPrompt>cat {{ $t("main.education.title") }}</BashPrompt>
                <table class="w-full">
                    <thead>
                        <tr>
                            <th class="max-w-48">
                                <p class="px-1">
                                    {{ $t("main.education.header.when") }}
                                </p>
                            </th>
                            <th>
                                <p class="px-1">
                                    {{ $t("main.education.header.where") }}
                                </p>
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td>{{ $t("main.education.0.when") }}</td>
                            <td>{{ $t("main.education.0.where") }}</td>
                        </tr>

                        <tr>
                            <td>{{ $t("main.education.1.when") }}</td>
                            <td>{{ $t("main.education.1.where") }}</td>
                        </tr>

                        <tr>
                            <td>{{ $t("main.education.2.when") }}</td>
                            <td>{{ $t("main.education.2.where") }}</td>
                        </tr>
                    </tbody>
                </table>
            </section>

            <section id="skills">
                <BashPrompt>cat {{ $t("main.skills.title") }}</BashPrompt>
                <ul>
                    <li>{{ $t("main.skills.languages") }}</li>
                    <li>{{ $t("main.skills.data-science") }}</li>
                    <li>{{ $t("main.skills.sysadmin") }}</li>
                    <li>{{ $t("main.skills.frontend") }}</li>
                    <li>{{ $t("main.skills.backend") }}</li>
                    <li>{{ $t("main.skills.database") }}</li>
                    <li>{{ $t("main.skills.math") }}</li>
                    <li>{{ $t("main.skills.other") }}</li>
                </ul>

                <p class="mt-2">{{ $t("main.skills.0") }}</p>
                <p>{{ $t("main.skills.1") }}</p>
                <p>{{ $t("main.skills.2") }}</p>
                <p>{{ $t("main.skills.3") }}</p>
                <p>{{ $t("main.skills.4") }}</p>
            </section>

            <section id="projects">
                <BashPrompt>cat {{ $t("main.projects.title") }}</BashPrompt>
                <table class="w-full">
                    <thead>
                        <tr>
                            <th class="max-w-60">
                                <p class="px-1">
                                    {{ $t("main.projects.header.name") }}
                                </p>
                            </th>
                            <th class="max-w-28">
                                <p class="px-1">
                                    {{ $t("main.projects.header.reference") }}
                                </p>
                            </th>
                            <th>
                                <p class="px-1">
                                    {{ $t("main.projects.header.description") }}
                                </p>
                            </th>
                            <th class="max-w-32">
                                <p class="px-1">
                                    {{ $t("main.projects.header.tags") }}
                                </p>
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td>{{ $t("main.projects.0.name") }}</td>
                            <td class="flex gap-x-2">
                                <ArrowLink
                                    link="https://gitea.svitan.dev/Streamer272/soc-2024"
                                />
                                <ArrowLink
                                    link="https://github.com/Streamer272/soc-2024"
                                />
                            </td>
                            <td>{{ $t("main.projects.0.description") }}</td>
                            <td class="flex gap-1 flex-wrap text-sm">
                                <span class="hashtag">
                                    {{ $t("main.projects.0.tags.0") }}
                                </span>
                                <span class="hashtag">
                                    {{ $t("main.projects.0.tags.1") }}
                                </span>
                            </td>
                        </tr>

                        <tr>
                            <td>{{ $t("main.projects.1.name") }}</td>
                            <td class="flex gap-x-2">
                                <ArrowLink
                                    link="https://gitea.svitan.dev/Streamer272/state-soc-cross"
                                />
                            </td>
                            <td>{{ $t("main.projects.1.description") }}</td>
                            <td class="flex gap-1 flex-wrap text-sm">
                                <span class="hashtag">
                                    {{ $t("main.projects.1.tags.0") }}
                                </span>
                            </td>
                        </tr>

                        <tr>
                            <td>{{ $t("main.projects.2.name") }}</td>
                            <td class="flex gap-x-2">
                                <ArrowLink
                                    link="https://gitea.svitan.dev/Streamer272/door-alarm"
                                />
                            </td>
                            <td>{{ $t("main.projects.2.description") }}</td>
                            <td class="flex gap-1 flex-wrap text-sm">
                                <span class="hashtag">
                                    {{ $t("main.projects.2.tags.0") }}
                                </span>
                                <span class="hashtag">
                                    {{ $t("main.projects.2.tags.1") }}
                                </span>
                            </td>
                        </tr>

                        <tr>
                            <td>{{ $t("main.projects.3.name") }}</td>
                            <td class="flex gap-x-2">
                                <ArrowLink
                                    link="https://github.com/Streamer272/green-school"
                                />
                                <ArrowLink link="https://zelena.svr.sk/" />
                            </td>
                            <td>{{ $t("main.projects.3.description") }}</td>
                            <td class="flex gap-1 flex-wrap text-sm">
                                <span class="hashtag">
                                    {{ $t("main.projects.3.tags.0") }}
                                </span>
                                <span class="hashtag">
                                    {{ $t("main.projects.3.tags.1") }}
                                </span>
                                <span class="hashtag">
                                    {{ $t("main.projects.3.tags.2") }}
                                </span>
                            </td>
                        </tr>

                        <tr>
                            <td>{{ $t("main.projects.4.name") }}</td>
                            <td class="flex gap-x-2">
                                <ArrowLink
                                    link="https://github.com/Streamer272/automod"
                                />
                            </td>
                            <td>{{ $t("main.projects.4.description") }}</td>
                            <td class="flex gap-1 flex-wrap text-sm">
                                <span class="hashtag">
                                    {{ $t("main.projects.4.tags.0") }}
                                </span>
                                <span class="hashtag">
                                    {{ $t("main.projects.4.tags.1") }}
                                </span>
                            </td>
                        </tr>

                        <tr>
                            <td>{{ $t("main.projects.5.name") }}</td>
                            <td class="flex gap-x-2">
                                <ArrowLink
                                    link="https://gitea.svitan.dev/Streamer272/pwetty"
                                />
                            </td>
                            <td>{{ $t("main.projects.5.description") }}</td>
                            <td class="flex gap-1 flex-wrap text-sm">
                                <span class="hashtag">
                                    {{ $t("main.projects.5.tags.0") }}
                                </span>
                                <span class="hashtag">
                                    {{ $t("main.projects.5.tags.1") }}
                                </span>
                            </td>
                        </tr>

                        <tr>
                            <td>{{ $t("main.projects.6.name") }}</td>
                            <td class="flex gap-x-2">
                                <ArrowLink
                                    link="https://gitea.svitan.dev/Streamer272/keys"
                                />
                            </td>
                            <td>{{ $t("main.projects.6.description") }}</td>
                            <td class="flex gap-1 flex-wrap text-sm">
                                <span class="hashtag">
                                    {{ $t("main.projects.6.tags.0") }}
                                </span>
                            </td>
                        </tr>

                        <tr>
                            <td>{{ $t("main.projects.7.name") }}</td>
                            <td class="flex gap-x-2">
                                <ArrowLink
                                    link="https://github.com/7274-dev/AdventnaVyzva-React"
                                />
                                <ArrowLink link="https://github.com/7274-dev" />
                            </td>
                            <td>{{ $t("main.projects.7.description") }}</td>
                            <td class="flex gap-1 flex-wrap text-sm">
                                <span class="hashtag">
                                    {{ $t("main.projects.7.tags.0") }}
                                </span>
                                <span class="hashtag">
                                    {{ $t("main.projects.7.tags.1") }}
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <p class="mt-1">{{ $t("main.projects.footer") }}</p>
            </section>

            <section id="about-me">
                <BashPrompt>cat {{ $t("main.about.title") }}</BashPrompt>
                <p>{{ $t("main.about.residence") }}</p>
                <p>{{ $t("main.about.citizenship") }}</p>
                <p>{{ $t("main.about.0") }}</p>
                <p>{{ $t("main.about.1") }}</p>
                <p>{{ $t("main.about.2") }}</p>
                <p>{{ $t("main.about.3") }}</p>
            </section>

            <section id="contacts">
                <BashPrompt>cat {{ $t("main.contacts.title") }}</BashPrompt>
                <ul class="list-none">
                    <li>
                        <a
                            href="mailto:selfsigned-ash@proton.me"
                            target="_blank"
                            class="underline"
                        >
                            selfsigned-ash@proton.me</a
                        >
                        /
                        <a
                            href="mailto:ash@svitan.dev"
                            target="_blank"
                            class="underline"
                        >
                            ash@svitan.dev</a
                        >
                        (<a href="/key.asc" target="_blank" class="underline"
                            >{{ $t("main.contacts.gpg") }} </a
                        >)
                    </li>
                    <li>
                        <a
                            href="tel:+421948309804"
                            target="_blank"
                            class="underline"
                        >
                            +421 948 309 804</a
                        >&nbsp;<a
                            href="https://signal.me/#eu/spS_7L9Ln0xOql7JZMEusWCSmR95-cMnVTgB-zbQBVM54M6FUnRBUZMjGmr-_6qA"
                            target="_blank"
                            class="underline"
                        >
                            {{ $t("main.contacts.signal") }}
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://matrix.to/#/@selfsigned-ash:matrix.org"
                            target="_blank"
                            class="underline"
                        >
                            @selfsigned-ash:matrix.org
                        </a>
                    </li>
                </ul>
                <div class="h-4" />

                <p>{{ $t("main.socials.title") }}</p>
                <ul class="list-none">
                    <li>
                        <a
                            href="https://github.com/Streamer272"
                            target="_blank"
                            class="underline"
                        >
                            GitHub
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://gitea.svitan.dev/Streamer272"
                            target="_blank"
                            class="underline"
                        >
                            Gitea
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://codeberg.org/selfsigned-ash"
                            target="_blank"
                            class="underline"
                        >
                            Codeberg
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://kolektiva.social/@selfsigned_ash"
                            rel="me"
                            target="_blank"
                            class="underline"
                        >
                            Mastodon
                        </a>
                    </li>
                    <li>
                        <a
                            href="https://pixelfed.de/selfsigned-ash"
                            target="_blank"
                            class="underline"
                        >
                            Pixelfed
                        </a>
                    </li>
                </ul>
            </section>

            <section>
                <BashPrompt>exit</BashPrompt>
                <p>{{ $t("main.exit") }}</p>
            </section>

            <footer class="flex justify-center">
                <p>
                    {{ $t("main.footer.0") }} |
                    <a
                        href="https://gitea.svitan.dev/Streamer272/svitan.dev"
                        target="_blank"
                        class="underline"
                    >
                        {{ $t("main.footer.1") }}
                    </a>
                    {{ $t("main.footer.2") }}
                </p>
            </footer>
        </div>

        <div class="w-1 h-10 shrink-0" />
    </div>
</template>

<style>
td {
    vertical-align: top;
}

td.flex {
    padding: 0.25rem 0 0.5rem 0;
}

th {
    text-align: left;
    font-weight: normal;
    font-style: italic;
    font-size: 1.05rem;
}

tr,
thead {
    border-bottom: 1px solid var(--catppuccin-color-text);
}

tr:last-of-type {
    border-bottom: none;
}

.hashtag {
    padding: 0 0.25rem;
    border: 1px solid var(--catppuccin-color-text);
    border-radius: 1rem;
}

section {
    margin-bottom: 2rem;
}
</style>

<script lang="ts" setup>
const { locales, setLocale } = useI18n();

const now = new Date();
let years = now.getFullYear() - 2006 - 1;
if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
    years++;
}
</script>
