<template>
    <div class="ping tile-m">
        <p class="left-center">{{ dayjs(ping.timestamp).format("DD.MM.YYYY HH:mm") }}</p>
        <div class="center">
            <p class="indicator center" :class="ping.result">{{ ping.code }}</p>
        </div>
        <p @click="open = !open" class="dropdown-icon">
            <UiIcon class="pointer" v-if="!open">keyboard_arrow_down</UiIcon>
            <UiIcon class="pointer" v-if="open">keyboard_arrow_up</UiIcon>
        </p>
        <div class="dropdown" v-if="open">
            <pre>{{ JSON.stringify(JSON.parse(ping.body), null, 2) }}</pre>
        </div>
    </div>
</template>

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

const open = ref(false);

defineProps<{
    ping: Ping
}>()
</script>

<style scoped>
.ping {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-column-gap: 1rem;
    grid-row-gap: 0.25rem;
    align-content: center;
    height: max-content;
}
.ping > * {
    min-height: 1.75rem;
}
.indicator {
    color: black;
    border-radius: 1rem;
    width: 3.5rem;
    height: 1.5rem;
}
.dropdown {
    grid-column: 1 / -1;
    margin-top: 1rem;
}
.dropdown > * {
    font-family: "Source Code Pro", monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    background-color: #151515;
    padding: 0.5rem;
    border-radius: 0.5rem;
}
.dropdown-icon {
    margin-top: 0.25rem;
    padding-top: 0.125rem;

}
.dropdown-icon * {
    font-size: 1.5rem;
}
.UP {
    background-color: #74f474;
}
.DOWN {
    background-color: #ff4534;
    color: white;
}
</style>