<script setup>
const props = defineProps(['node']);
import moment from 'moment';
</script>
<template>
    <div>
        <div class="bg-gray-200 p-2 font-semibold">Other</div>
        <ul role="list" class="flex-1 divide-y divide-gray-200">
            <!-- first seen -->
            <li class="flex p-3">
                <div class="text-sm font-medium text-gray-900">First Seen</div>
                <div class="ml-auto text-sm text-gray-700">{{ moment(new Date(props.node.created_at)).fromNow() }}</div>
            </li>

            <!-- last seen -->
            <li class="flex p-3">
                <div class="text-sm font-medium text-gray-900">Last Seen</div>
                <div class="ml-auto text-sm text-gray-700">{{ moment(new Date(props.node.updated_at)).fromNow() }}</div>
            </li>

            <!-- neighbours updated -->
            <li class="flex p-3">
                <div class="text-sm font-medium text-gray-900">Neighbours Updated</div>
                <div class="ml-auto text-sm text-gray-700">
                    <span v-if="props.node.neighbours_updated_at">{{ moment(new Date(props.node.neighbours_updated_at)).fromNow() }}</span>
                    <span v-else>???</span>
                </div>
            </li>

            <!-- position updated -->
            <li class="flex p-3">
                <div class="text-sm font-medium text-gray-900">Position Updated</div>
                <div class="ml-auto text-sm text-gray-700">
                    <span v-if="props.node.position_updated_at">{{ moment(new Date(props.node.position_updated_at)).fromNow() }}</span>
                    <span v-else>???</span>
                </div>
            </li>
        </ul>
    </div>
</template>