{{ 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 relative w-full mx-auto drop-shadow-sm dark:text-white">
    <section class="w-full 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 "notificationSettings" . }}
      </div>
    </section>
  </div>
{{ end }}

{{ define "notificationSettings" }}
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
    <div class="col-span-1 md:col-span-2">
      <h2 class="text-sm pb-2 uppercase font-bold">Notification Preferences</h2>
      <p class="text-gray-500 dark:text-gray-400">
        Choose which notifications you want to receive when activity happens on your repositories and profile.
      </p>
    </div>
  </div>

  <form hx-put="/settings/notifications" hx-swap="none" class="flex flex-col gap-6">

    <div class="flex flex-col rounded border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700 w-full">
      <div class="flex items-center justify-between p-2">
        <div class="flex items-center gap-2">
          <div class="flex flex-col gap-1">
            <span class="font-bold">Repository starred</span>
            <div class="flex text-sm items-center gap-1 text-gray-500 dark:text-gray-400">
              <span>When someone stars your repository.</span>
            </div>
          </div>
        </div>
        <label class="flex items-center gap-2">
          <input type="checkbox" name="repo_starred" {{if .Preferences.RepoStarred}}checked{{end}}>
        </label>
      </div>

      <div class="flex items-center justify-between p-2">
        <div class="flex items-center gap-2">
          <div class="flex flex-col gap-1">
            <span class="font-bold">New issues</span>
            <div class="flex text-sm items-center gap-1 text-gray-500 dark:text-gray-400">
              <span>When someone creates an issue on your repository.</span>
            </div>
          </div>
        </div>
        <label class="flex items-center gap-2">
          <input type="checkbox" name="issue_created" {{if .Preferences.IssueCreated}}checked{{end}}>
        </label>
      </div>

      <div class="flex items-center justify-between p-2">
        <div class="flex items-center gap-2">
          <div class="flex flex-col gap-1">
            <span class="font-bold">Issue comments</span>
            <div class="flex text-sm items-center gap-1 text-gray-500 dark:text-gray-400">
              <span>When someone comments on an issue you're involved with.</span>
            </div>
          </div>
        </div>
        <label class="flex items-center gap-2">
          <input type="checkbox" name="issue_commented" {{if .Preferences.IssueCommented}}checked{{end}}>
        </label>
      </div>

      <div class="flex items-center justify-between p-2">
        <div class="flex items-center gap-2">
          <div class="flex flex-col gap-1">
            <span class="font-bold">Issue closed</span>
            <div class="flex text-sm items-center gap-1 text-gray-500 dark:text-gray-400">
              <span>When an issue on your repository is closed.</span>
            </div>
          </div>
        </div>
        <label class="flex items-center gap-2">
          <input type="checkbox" name="issue_closed" {{if .Preferences.IssueClosed}}checked{{end}}>
        </label>
      </div>

      <div class="flex items-center justify-between p-2">
        <div class="flex items-center gap-2">
          <div class="flex flex-col gap-1">
            <span class="font-bold">New pull requests</span>
            <div class="flex text-sm items-center gap-1 text-gray-500 dark:text-gray-400">
              <span>When someone creates a pull request on your repository.</span>
            </div>
          </div>
        </div>
        <label class="flex items-center gap-2">
          <input type="checkbox" name="pull_created" {{if .Preferences.PullCreated}}checked{{end}}>
        </label>
      </div>

      <div class="flex items-center justify-between p-2">
        <div class="flex items-center gap-2">
          <div class="flex flex-col gap-1">
            <span class="font-bold">Pull request comments</span>
            <div class="flex text-sm items-center gap-1 text-gray-500 dark:text-gray-400">
              <span>When someone comments on a pull request you're involved with.</span>
            </div>
          </div>
        </div>
        <label class="flex items-center gap-2">
          <input type="checkbox" name="pull_commented" {{if .Preferences.PullCommented}}checked{{end}}>
        </label>
      </div>

      <div class="flex items-center justify-between p-2">
        <div class="flex items-center gap-2">
          <div class="flex flex-col gap-1">
            <span class="font-bold">Pull request merged</span>
            <div class="flex text-sm items-center gap-1 text-gray-500 dark:text-gray-400">
              <span>When your pull request is merged.</span>
            </div>
          </div>
        </div>
        <label class="flex items-center gap-2">
          <input type="checkbox" name="pull_merged" {{if .Preferences.PullMerged}}checked{{end}}>
        </label>
      </div>

      <div class="flex items-center justify-between p-2">
        <div class="flex items-center gap-2">
          <div class="flex flex-col gap-1">
            <span class="font-bold">New followers</span>
            <div class="flex text-sm items-center gap-1 text-gray-500 dark:text-gray-400">
              <span>When someone follows you.</span>
            </div>
          </div>
        </div>
        <label class="flex items-center gap-2">
          <input type="checkbox" name="followed" {{if .Preferences.Followed}}checked{{end}}>
        </label>
      </div>

      <div class="flex items-center justify-between p-2">
        <div class="flex items-center gap-2">
          <div class="flex flex-col gap-1">
            <span class="font-bold">Mentions</span>
            <div class="flex text-sm items-center gap-1 text-gray-500 dark:text-gray-400">
              <span>When someone mentions you.</span>
            </div>
          </div>
        </div>
        <label class="flex items-center gap-2">
          <input type="checkbox" name="user_mentioned" {{if .Preferences.UserMentioned}}checked{{end}}>
        </label>
      </div>

      <div class="flex items-center justify-between p-2">
        <div class="flex items-center gap-2">
          <div class="flex flex-col gap-1">
            <span class="font-bold">Email notifications</span>
            <div class="flex text-sm items-center gap-1 text-gray-500 dark:text-gray-400">
              <span>Receive notifications via email in addition to in-app notifications.</span>
            </div>
          </div>
        </div>
        <label class="flex items-center gap-2">
          <input type="checkbox" name="email_notifications" {{if .Preferences.EmailNotifications}}checked{{end}}>
        </label>
      </div>
    </div>

    <div class="flex justify-end pt-2">
      <button
        type="submit"
        class="btn-create flex items-center gap-2 group"
      >
        {{ i "save" "w-4 h-4" }}
        save
        {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
      </button>
    </div>
    <div id="settings-notifications-success"></div>

    <div id="settings-notifications-error" class="error"></div>
  </form>
{{ end }}