{{define "notifications/fragments/item"}}
  <a href="{{ template "notificationUrl" . }}"
     onclick="if(!event.target.closest('button'))navigator.sendBeacon('/notifications/{{ .ID }}/read')"
     class="block no-underline hover:no-underline group">
    <div
      class="
        w-full mx-auto dark:text-white px-2 md:px-6 py-4
        {{ if not .Read }}bg-indigo-50/50 dark:bg-indigo-950/20 hover:bg-gray-100/50 dark:hover:bg-gray-700/50{{ else }}bg-white dark:bg-gray-800 hover:bg-gray-100/50 dark:hover:bg-gray-700/50{{ end }}
        grid grid-cols-[auto_1fr_auto] gap-x-4 gap-y-1 items-center
        ">
      {{/* row 1, col 1: icon */}}
      <div class="row-start-1 {{ template "notificationIconColor" . }}">{{ i (.Icon) "size-4" }}</div>
      {{/* row 1, col 2: header */}}
      <div class="row-start-1 flex items-center gap-1.5 text-sm min-w-0 overflow-hidden">
        {{- if not .Read }}
          {{ template "repo/fragments/colorBall" (dict "color" "#4338ca" "classes" "shrink-0 dark:hidden") }}
          {{ template "repo/fragments/colorBall" (dict "color" "#6366f1" "classes" "shrink-0 hidden dark:block") }}
        {{- end -}}
        {{- template "notificationHeader" . -}}
      </div>
      {{/* row 1, col 3: timestamp normally, button on hover */}}
      <div class="row-start-1 relative flex items-center justify-end">
        <span class="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap md:group-hover:invisible">{{ template "repo/fragments/shortTime" .Created }}</span>
        {{ if .Read }}
          <button
            hx-post="/notifications/{{ .ID }}/unread"
            hx-target="closest a"
            hx-swap="outerHTML"
            class="hidden md:group-hover:flex absolute inset-0 items-center justify-end p-0 text-gray-400 dark:text-gray-500 hover:text-gray-600"
            title="Mark as unread"
            onclick="event.preventDefault()">
            {{ i "mail" "size-4" }}
          </button>
        {{ else }}
          <button
            hx-post="/notifications/{{ .ID }}/read"
            hx-target="closest a"
            hx-swap="outerHTML"
            class="hidden md:group-hover:flex absolute inset-0 items-center justify-end p-0 text-gray-400 dark:text-gray-500 hover:text-gray-600"
            title="Mark as read"
            onclick="event.preventDefault()">
            {{ i "mail-open" "size-4" }}
          </button>
        {{ end }}
      </div>
      {{/* row 2, col 1: #N */}}
      {{ template "notificationNumber" . }}
      {{/* row 2, col 2: title */}}
      {{ template "notificationSummary" . }}
    </div>
  </a>
{{end}}

{{ define "notificationIconColor" }}
  {{ if or (eq .Type "issue_created") (eq .Type "issue_reopen") }}text-green-600 dark:text-green-500
  {{ else if or (eq .Type "pull_created") (eq .Type "pull_reopen") }}text-green-600 dark:text-green-500
  {{ else if eq .Type "pull_merged" }}text-purple-600 dark:text-purple-500
  {{ else if eq .Type "pull_closed" }}text-red-600 dark:text-red-500
  {{ else if eq .Type "user_mentioned" }}text-blue-500 dark:text-blue-400
  {{ else if eq .Type "repo_starred" }}text-yellow-500 dark:text-yellow-600
  {{ else if or (eq .Type "issue_assigned") (eq .Type "pull_assigned") }} text-blue-500 dark:text-blue-400
  {{ else }}text-gray-500 dark:text-gray-400
  {{ end }}
{{ end }}

{{ define "notificationNumber" }}
  {{ if .Issue }}
    <span class="row-start-2 col-start-1 text-sm text-gray-500 dark:text-gray-400 font-medium text-center">#{{ .Issue.IssueId }}</span>
  {{ else if .Pull }}
    <span class="row-start-2 col-start-1 text-sm text-gray-500 dark:text-gray-400 font-medium text-center">#{{ .Pull.PullId }}</span>
  {{ end }}
{{ end }}

{{ define "notificationHeader" }}
  {{ $repoOwner := "" }}
  {{ $repoName := "" }}
  {{ if .Repo }}
    {{ $repoOwner = resolve .Repo.Did }}
    {{ $repoName = .Repo.Name }}
  {{ end }}

  {{ $textStyle := "text-gray-700 dark:text-gray-300" }}
  {{ $subjectStyle := "text-gray-800 dark:text-gray-200" }}
  {{ $repo := printf "%s/%s" $repoOwner $repoName }}
  <span class="shrink-0 flex items-center gap-1">{{ template "user/fragments/picHandle" .ActorDid }}</span>
  <span class="truncate">
  {{ if eq .Type "repo_starred" }}
    <span class="{{ $textStyle }}">starred</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
  {{ else if eq .Type "issue_created" }}
    <span class="{{ $textStyle }}">opened an issue on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
  {{ else if eq .Type "issue_commented" }}
    <span class="{{ $textStyle }}">commented on an issue on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
  {{ else if eq .Type "issue_closed" }}
    <span class="{{ $textStyle }}">closed an issue on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
  {{ else if eq .Type "issue_reopen" }}
    <span class="{{ $textStyle }}">reopened an issue on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
  {{ else if eq .Type "pull_created" }}
    <span class="{{ $textStyle }}">created a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
  {{ else if eq .Type "pull_commented" }}
    <span class="{{ $textStyle }}">commented on a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
  {{ else if eq .Type "pull_merged" }}
    <span class="{{ $textStyle }}">merged a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
  {{ else if eq .Type "pull_closed" }}
    <span class="{{ $textStyle }}">closed a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
  {{ else if eq .Type "pull_reopen" }}
    <span class="{{ $textStyle }}">reopened a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
  {{ else if eq .Type "followed" }}
    <span class="{{ $textStyle }}">followed you</span>
  {{ else if eq .Type "user_mentioned" }}
    {{ if .Issue }}
      <span class="{{ $textStyle }}">mentioned you on an issue in</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
    {{ else if .Pull }}
      <span class="{{ $textStyle }}">mentioned you on a pull request in</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
    {{ else }}
      <span class="{{ $textStyle }}">mentioned you in</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
    {{ end }}
  {{ else if eq .Type "issue_assigned" }}
    <span class="{{ $textStyle }}">assigned you to an issue on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
  {{ else if eq .Type "issue_unassigned" }}
    <span class="{{ $textStyle }}">unassigned you from an issue on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
  {{ else if eq .Type "pull_assigned" }}
    <span class="{{ $textStyle }}">assigned you to a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
  {{ else if eq .Type "pull_unassigned" }}
    <span class="{{ $textStyle }}">unassigned you from a PR on</span> <span class="{{ $subjectStyle }}">{{ $repo }}</span>
  {{ end }}
  </span>
{{ end }}

{{ define "notificationSummary" }}
  {{ if .Issue }}
    <div class="row-start-2 col-start-2 text-sm text-gray-700 dark:text-gray-300 truncate">{{ .Issue.Title }}</div>
  {{ else if .Pull }}
    <div class="row-start-2 col-start-2 text-sm text-gray-700 dark:text-gray-300 truncate">{{ .Pull.Title }}</div>
  {{ end }}
{{ end }}

{{ define "notificationUrl" }}
  {{ $url := "" }}
  {{ if eq .Type "repo_starred" }}
    {{$url = printf "/%s/%s" (resolve .Repo.Did) .Repo.Slug}}
  {{ else if .Issue }}
    {{$url = printf "/%s/%s/issues/%d" (resolve .Repo.Did) .Repo.Slug .Issue.IssueId}}
  {{ else if .Pull }}
    {{$url = printf "/%s/%s/pulls/%d" (resolve .Repo.Did) .Repo.Slug .Pull.PullId}}
  {{ else if eq .Type "followed" }}
    {{$url = printf "/%s" (resolve .ActorDid)}}
  {{ else }}
  {{ end }}

  {{ $url }}
{{ end }}