<template>
    <div class="narrow">
        <div>
            <h1>Tavolio Uptime Dashboard</h1>
        </div>
        <div class="tile" v-for="group in groups">
            <h2>{{ group.displayName }}</h2>
            <div v-for="target in group.targets" class="target" @click="useRouter().push('/healthchecks/' + group.key + '/' + target.key)">
                <div class="left-center">
                    <RatioComponent :ratio="target.last24Hour" :status="target.status"></RatioComponent>
                    <p>{{ target.displayName }}</p>
                </div>
                <div class="ping-container">
                    <div style="user-select: none" v-for="ping in target.pings" :class="ping.result">&nbsp;</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {Group} from "~/components/targets/Target";

const groups: Ref<Group[] | undefined> = ref();

onMounted(() => {
    Group.get((_groups: Group[]) => {
        groups.value = _groups;
    })
})
</script>

<style scoped>
.narrow {
    width: min(1140px, 100%);
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
}
.target {
    display: grid;
    grid-template-columns: 55% 45%;
}
.ping-container {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(50, 1fr);
    justify-content: end;
    direction: rtl;
}
.healthcheck {
    font-size: 1.125rem;
}
h2 {
    font-weight: 600;
}
.UP {
    background-color: #74f474;
    border-radius: 0.25rem;
}
.DOWN {
    background-color: #ff4534;
    border-radius: 0.25rem;
}
.indicator {
    font-size: 0.90rem;
    font-weight: 550;
    width: 3.75rem;
    display: inline-flex;
    justify-content: center;
    background-color: #74f474;
    color: black;
    margin-right: 0.5rem;
    border-radius: 1rem;
}
</style>