<script setup lang="ts">
const links = [
  [
    {
      label: 'Состояние вендотеков',
      icon: 'i-heroicons-credit-card',
      to: '/vtk'
    },
    { label: 'Офис', to: '/vtk/office' },
    { label: 'Парк', to: '/vtk/park' },
  ],
  [
    {
      label: 'Вебхуки битрикса',
      icon: 'i-heroicons-clipboard-document-list',
      to: '/bx'
    },
    { label: 'Gitea', to: '/bx/gitea' },
    { label: 'Tg', to: '/bx/tg' },
  ],
  [
    {
      label: 'Инвентаризация',
      icon: 'i-heroicons-archive-box',
      to: '/inventory'
    }
  ]
]
</script>

<template>
  <div class="container grid gap-4 grid-cols-2 lg:grid-cols-4">
    <div class="col-span-4">
      <div class="px-2 text-xl flex gap-4 align-center justify-between">
        <h1 class="text-2xl font-extrabold">svs-tech.pro</h1>
        <div class="flex gap-4">
          <a href="https://git.svs-tech.pro/" label="git" target="_blank">
            <UIcon name="i-simple-icons-git" dynamic />
          </a>
          <a href="https://bitwarden.svs-tech.pro/" label="bitwarden" target="_blank">
            <UIcon name="i-simple-icons-bitwarden" dynamic />
          </a>
          <a href="https://crm.svs-tech.pro/" label="crm" target="_blank">Битрикс24</a>
        </div>
      </div>
    </div>
    <div class="col-span-4 lg:col-span-1">
      <UVerticalNavigation :links="links" />
    </div>
    <div class="col-span-4 lg:col-span-3">
      <NuxtPage />
    </div>
  </div>
</template>