<script setup>
import { q } from "#imports";
const { system } = await q({
  system: {
    server: true,
    arch: true,
    os: true,
    CPUCores: true,
    hostname: true,
    memoryTotal: true,
    memoryFree: true,
    memoryAvailable: true
  }
});
const columns = [
  {
    name: "name",
    label: "Name",
    sortable: true
  },
  {
    name: "value",
    label: "Value",
    style: "white-space: normal; word-break: break-all;"
  }
];
</script>

<template>
    <l-page>
        <l-card>
            <l-list>
                <l-item label="Arch">{{ system.arch }}</l-item>
                <l-item label="OS">{{ system.os }}</l-item>
                <l-item label="CPUCores">{{ system.CPUCores }}</l-item>
                <l-item label="Hostname">{{ system.hostname }}</l-item>
                <l-item label="Memory Total">{{ system.memoryTotal }}</l-item>
                <l-item label="Memory Free">{{ system.memoryFree }}</l-item>
                <l-item label="Memory Available">{{ system.memoryAvailable }}</l-item>
            </l-list>
        </l-card>

        <l-table searchable :rows="system.server" :columns="columns" :rows-per-page-options="[0]"
            hide-pagination></l-table>
    </l-page>
</template>
