
<script setup>
const props = defineProps(['node']);
</script>
<template>
    <div>
        <div class="bg-gray-200 p-2 font-semibold">Details</div>
        <ul role="list" class="flex-1 divide-y divide-gray-200">

            <!-- id -->
            <li class="flex p-3">
                <div class="text-sm font-medium text-gray-900">ID</div>
                <div class="ml-auto text-sm text-gray-700">{{ props.node.node_id }}</div>
            </li>

            <!-- hex id -->
            <li class="flex p-3">
                <div class="text-sm font-medium text-gray-900">Hex ID</div>
                <div class="ml-auto text-sm text-gray-700">{{ props.node.node_id_hex }}</div>
            </li>

            <!-- role -->
            <li class="flex p-3">
                <div class="text-sm font-medium text-gray-900">Role</div>
                <div class="ml-auto text-sm text-gray-700">{{ props.node.role_name }}</div>
            </li>

            <!-- hardware -->
            <li class="flex p-3">
                <div class="text-sm font-medium text-gray-900">Hardware</div>
                <div class="ml-auto text-sm text-gray-700">{{ props.node.hardware_model_name }}</div>
            </li>

            <!-- firmware version -->
            <li class="flex p-3">
                <div class="text-sm font-medium text-gray-900">Firmware</div>
                <div class="ml-auto text-sm text-gray-700">
                    <span v-if="props.node.firmware_version">{{ props.node.firmware_version }}</span>
                    <span v-else>???</span>
                </div>
            </li>

        </ul>
    </div>
</template>