<script lang="ts">
  import { domains } from '$lib/domains.svelte';
</script>

<svelte:head>
  <title>Dashboard | HexName - Free, uncomplicated DNS management</title>
  <meta property="og:title" content="Dashboard | HexName - Free, uncomplicated DNS management">
  <meta name="twitter:title" content="Dashboard | HexName - Free, uncomplicated DNS management">
  <meta name="description" content="Register our premium domains and manage DNS and DynDNS - so you can focus on what truly matters.">
  <meta property="og:description" content="Register our premium domains and manage DNS and DynDNS - so you can focus on what truly matters.">
  <meta name="twitter:description" content="Register our premium domains and manage DNS and DynDNS - so you can focus on what truly matters.">
  <meta name="robots" content="noindex, nofollow">
</svelte:head>

<div class="flex flex-col items-center justify-center w-full p-4">
  <h2 class="text-3xl font-semibold max-w-2xl py-8">
    Your domains
  </h2>

  <div class="w-full mx-35 max-w-md rounded-box border border-base-content/10 bg-base-100">
    <table class="w-full table nth-2:bg-base-100 nth-4:bg-base-200">
      <thead>
        <tr>
          <th>Name</th>
        </tr>
      </thead>

      <tbody>
        {#if domains.loadingSubdomains}
          <tr>
            <td colspan="6" class="text-center text-base-content/60">
              Loading records…
            </td>
          </tr>
        {:else if domains.loadingFailed}
          <tr>
            <td colspan="6" class="text-center text-error">
              An error occured while loading your domains. Please refresh the page.
            </td>
          </tr>
        {:else if domains.subdomains.length === 0}
          <tr>
            <td colspan="6" class="text-center text-base-content/60">
              No domains found. Register your first domain <a href="/dashboard/register-domain">here</a>!
            </td>
          </tr>
        {:else}
          {#each domains.subdomains as sub}
            <tr>
              <td class="p-1 pl-1">
                <a href="/dashboard/{sub.id}">
                  <div class="p-2 w-full h-full">
                    {sub.name}.{sub.domain}
                  </div>
                </a>
              </td>
            </tr>
          {/each}
        {/if}
      </tbody>
    </table>
  </div>
</div>
