<template>
    <div class="narrow ping-page" v-if="target">
        <div class="content-xl">
            <h1>{{ target.displayName }}</h1>
            <div class="col-2">
                <div class="tile-l uptime">
                    <h3>1-Hour Uptime</h3>
                    <RatioComponent :ratio="target.last1Hour" :status="target.status"></RatioComponent>
                </div>
                <div class="tile-l uptime">
                    <h3>24-Hours Uptime</h3>
                    <RatioComponent :ratio="target.last24Hour" :status="target.status"></RatioComponent>
                </div>
            </div>
        </div>
        <div class="main">
            <PingComponent :ping="ping" v-for="ping in target.pings"></PingComponent>
        </div>
    </div>
</template>

<script setup lang="ts">
import {Target} from "~/components/targets/Target";
import PingComponent from "~/components/pings/PingComponent.vue";

const target: Ref<Target | undefined> = ref();

onMounted(() => {
    const key = useRoute().params.target as string;
    Target.getByKey(key, (_target: Target) => {
        target.value = _target;
    })
})
</script>

<style scoped>
.ping-page {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 2rem;
    height: 100vh;
    padding: 2rem;
}
.main {
    overflow-y: auto;
    min-height: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.main > *:not(*:last-of-type) {
    margin-bottom: 0.5rem;
}
.uptime {
    display: flex;
    justify-content: space-between;
}
</style>