<script setup>
const props = defineProps(['node']);
const emit = defineEmits(['showPositionHistory']);
</script>
<template>
    <div>
        <div @click.stop class="flex bg-gray-200 p-2 font-semibold">
            <div class="my-auto">Position</div>
            <div class="ml-auto">
                <button @click="$emit('showPositionHistory', props.node.node_id)" type="button" class="rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                    Show History
                </button>
            </div>
        </div>
        <ul role="list" class="flex-1 divide-y divide-gray-200">
            <!-- position -->
            <li class="flex p-3">
                <div class="text-sm font-medium text-gray-900">Lat/Long</div>
                <div class="ml-auto text-sm text-gray-700">
                    <span v-if="props.node.latitude && props.node.longitude">{{ props.node.latitude }}, {{ props.node.longitude }}</span>
                    <span v-else>???</span>
                </div>
            </li>
            <!-- altitude -->
            <li class="flex p-3">
                <div class="text-sm font-medium text-gray-900">Altitude</div>
                <div class="ml-auto text-sm text-gray-700">
                    <span v-if="props.node.altitude">{{ props.node.altitude }}m</span>
                    <span v-else>???</span>
                </div>
            </li>
        </ul>
    </div>
</template>