{{ define "title" }}{{ .Tab }} settings{{ end }}

{{ define "content" }}
  <div class="p-6">
    <p class="text-xl font-bold dark:text-white">Settings</p>
  </div>
  <div class="bg-white dark:bg-gray-800 p-6 rounded w-full mx-auto drop-shadow-sm dark:text-white">
    <section class="grid grid-cols-1 md:grid-cols-4 gap-6">
      <div class="col-span-1">
        {{ template "user/settings/fragments/sidebar" . }}
      </div>
      <div class="col-span-1 md:col-span-3 flex flex-col gap-6">
        {{ template "profile" . }}
        {{ template "punchcard" . }}
      </div>
    </section>
  </div>
{{ end }}

{{ define "profile" }}
  <div>
    <h2 class="text-sm uppercase font-bold">Profile</h2>
    <p class="text-gray-500 dark:text-gray-400 pb-2">
      Your account information from your AT Protocol identity.
    </p>
    <div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700">
      <div class="flex flex-col gap-1 p-4">
        <span class="text-sm text-gray-500 dark:text-gray-400">Handle</span>
        <span class="font-bold">{{ resolve .LoggedInUser.Did }}</span>
      </div>
      <div class="flex flex-col gap-1 p-4">
        <span class="text-sm text-gray-500 dark:text-gray-400">Decentralized Identifier (DID)</span>
        <span class="font-mono font-bold">{{ .LoggedInUser.Did }}</span>
      </div>
      <div class="flex flex-col gap-1 p-4">
        <span class="text-sm text-gray-500 dark:text-gray-400">Personal Data Server (PDS)</span>
        <span class="font-bold">{{ .LoggedInUser.Pds }}</span>
      </div>
    </div>
  </div>
{{ end }}

{{ define "punchcard" }}
  <div>
    <h2 class="text-sm uppercase font-bold">Punchcard</h2>
    <p class="text-gray-500 dark:text-gray-400 pb-2 ">
      Configure punchcard visibility and preferences.
    </p>
    <form hx-post="/profile/punchcard" hx-trigger="change" hx-swap="none" class="flex flex-col gap-2">
      <div class="flex items-center gap-2">
        <input type="checkbox" id="hideMine" name="hideMine" value="on" {{ if eq true $.PunchcardPreference.HideMine }}checked{{ end }}>
        <label for="hideMine" class="my-0 py-0 normal-case font-normal">Hide mine</label>
      </div>
      <div class="flex items-center gap-2">
        <input type="checkbox" id="hideOthers" name="hideOthers" value="on" {{ if eq true $.PunchcardPreference.HideOthers }}checked{{ end }}>
        <label for="hideOthers" class="my-0 py-0 normal-case font-normal">Hide others from me</label>
      </div>
    </form>
  </div>
{{ end }}