<template>
  <!-- go away eslint -->
  <div />
  <!-- I don't want to localize this -->
  <!--
  <div>
    <div v-if="user" class="mx-auto max-w-2xl lg:mx-0">
      <h2
        class="mt-2 text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
      >
        Hello, {{ user.displayName }}!
      </h2>
      <p
        class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
      >
        Welcome to your Drop account. Here you can view and manage your account
        information.
      </p>
    </div>

    <div v-if="user" class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2">
      <div
        class="overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm transition-all duration-200 hover:shadow-lg hover:shadow-zinc-900/50"
      >
        <div class="p-6">
          <h3 class="text-base font-semibold text-zinc-100">
            Account Information
          </h3>
          <dl class="mt-4 space-y-4">
            <div class="flex justify-between">
              <dt class="text-sm font-medium text-zinc-400">Username</dt>
              <dd class="text-sm text-zinc-100">{{ user.username }}</dd>
            </div>
            <div class="flex justify-between">
              <dt class="text-sm font-medium text-zinc-400">Email</dt>
              <dd class="text-sm text-zinc-100">{{ user.email }}</dd>
            </div>
            <div class="flex justify-between">
              <dt class="text-sm font-medium text-zinc-400">Account Type</dt>
              <dd>
                <span
                  :class="[
                    'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset',
                    user.admin
                      ? 'bg-blue-400/10 text-blue-400 ring-blue-400/20'
                      : 'bg-zinc-400/10 text-zinc-400 ring-zinc-400/20',
                  ]"
                >
                  {{ user.admin ? "Administrator" : "Standard User" }}
                </span>
              </dd>
            </div>
          </dl>
        </div>
      </div>

      <div
        class="overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm transition-all duration-200 hover:shadow-lg hover:shadow-zinc-900/50"
      >
        <div class="p-6">
          <h3 class="text-base font-semibold text-zinc-100">Account Actions</h3>
          <div class="mt-4 space-y-3">
            <button
              type="button"
              class="w-full inline-flex items-center justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-[1.02] hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
            >
              Change Password
            </button>
            <button
              type="button"
              class="w-full inline-flex items-center justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-[1.02] hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
            >
              Update Email
            </button>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="flex items-center justify-center min-h-[200px]">
      <div class="text-zinc-400">Loading account information...</div>
    </div>
  </div>
  -->
</template>

<script setup lang="ts">
definePageMeta({
  layout: "default",
});

useHead({
  title: "Account",
});
</script>
