{{define "notifications/fragments/item"}}
  <div 
    class="
      w-full mx-auto rounded drop-shadow-sm dark:text-white bg-white dark:bg-gray-800 px-2 md:px-6 py-4 transition-colors 
      {{if not .Read}}bg-blue-50 dark:bg-blue-900/20 border border-blue-500 dark:border-sky-800{{end}}
      flex gap-2 items-center
      "
    >

    {{ template "notificationIcon" . }}
    <div class="flex-1 w-full flex flex-col gap-1">
      <span>{{ template "notificationHeader" . }}</span>
      <span class="text-sm text-gray-500 dark:text-gray-400">{{ template "notificationSummary" . }}</span>
    </div>

  </div>
{{end}}

{{ define "notificationIcon" }}
  <div class="flex-shrink-0 max-h-full w-16 h-16 relative">
    <img class="object-cover rounded-full p-2" src="{{ fullAvatar .ActorDid }}" />
    <div class="absolute border-2 border-white dark:border-gray-800 bg-gray-200 dark:bg-gray-700 bottom-1 right-1 rounded-full p-2 flex items-center justify-center z-10">
      {{ i .Icon "size-3 text-black dark:text-white" }}
    </div>
  </div>
{{ end }}

{{ define "notificationHeader" }}
  {{ $actor := resolve .ActorDid }}

  <span class="text-black dark:text-white w-fit">{{ $actor }}</span>
  {{ if eq .Type "repo_starred" }}
    starred <span class="text-black dark:text-white">{{ resolve .Repo.Did }}/{{ .Repo.Name }}</span>
  {{ else if eq .Type "issue_created" }}
    opened an issue
  {{ else if eq .Type "issue_commented" }}
    commented on an issue
  {{ else if eq .Type "issue_closed" }}
    closed an issue
  {{ else if eq .Type "pull_created" }}
    created a pull request
  {{ else if eq .Type "pull_commented" }}
    commented on a pull request
  {{ else if eq .Type "pull_merged" }}
    merged a pull request
  {{ else if eq .Type "pull_closed" }}
    closed a pull request
  {{ else if eq .Type "followed" }}
    followed you
  {{ else }}
  {{ end }}
{{ end }}

{{ define "notificationSummary" }}
  {{ if eq .Type "repo_starred" }}
    <!-- no summary -->
  {{ else if .Issue }}
    #{{.Issue.IssueId}} {{.Issue.Title}} on {{resolve .Repo.Did}}/{{.Repo.Name}}
  {{ else if .Pull }}
    #{{.Pull.PullId}} {{.Pull.Title}} on {{resolve .Repo.Did}}/{{.Repo.Name}}
  {{ else if eq .Type "followed" }}
    <!-- no summary -->
  {{ else }}
  {{ end }}
{{ end }}

{{define "issueNotification"}}
{{$url := printf "/%s/%s/issues/%d" (resolve .Repo.Did) .Repo.Name .Issue.IssueId}}
<a
  href="{{$url}}"
  class="block no-underline hover:no-underline text-inherit -m-3 p-3"
>
  <div class="flex items-center justify-between">
    <div class="min-w-0 flex-1">
      <!-- First line: icon + actor action -->
      <div class="flex items-center gap-2 text-gray-900 dark:text-white">
        {{if eq .Type "issue_created"}}
          <span class="text-green-600 dark:text-green-500">
            {{ i "circle-dot" "w-4 h-4" }}
          </span>
        {{else if eq .Type "issue_commented"}}
          <span class="text-gray-500 dark:text-gray-400">
            {{ i "message-circle" "w-4 h-4" }}
          </span>
        {{else if eq .Type "issue_closed"}}
          <span class="text-gray-500 dark:text-gray-400">
            {{ i "ban" "w-4 h-4" }}
          </span>
        {{end}}
        {{template "user/fragments/picHandle" .ActorDid}}
        {{if eq .Type "issue_created"}}
          <span class="text-gray-500 dark:text-gray-400">opened issue</span>
        {{else if eq .Type "issue_commented"}}
          <span class="text-gray-500 dark:text-gray-400">commented on issue</span>
        {{else if eq .Type "issue_closed"}}
          <span class="text-gray-500 dark:text-gray-400">closed issue</span>
        {{end}}
        {{if not .Read}}
          <div class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0 ml-1"></div>
        {{end}}
      </div>

      <div class="text-sm text-gray-600 dark:text-gray-400 mt-0.5 ml-6 flex items-center gap-1">
        <span class="text-gray-500 dark:text-gray-400">#{{.Issue.IssueId}}</span>
        <span class="text-gray-900 dark:text-white truncate">{{.Issue.Title}}</span>
        <span>on</span>
        <span class="font-medium text-gray-900 dark:text-white">{{resolve .Repo.Did}}/{{.Repo.Name}}</span>
      </div>
    </div>

    <div class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0 ml-2">
      {{ template "repo/fragments/time" .Created }}
    </div>
  </div>
</a>
{{end}}

{{define "pullNotification"}}
{{$url := printf "/%s/%s/pulls/%d" (resolve .Repo.Did) .Repo.Name .Pull.PullId}}
<a
  href="{{$url}}"
  class="block no-underline hover:no-underline text-inherit -m-3 p-3"
>
  <div class="flex items-center justify-between">
    <div class="min-w-0 flex-1">
      <div class="flex items-center gap-2 text-gray-900 dark:text-white">
        {{if eq .Type "pull_created"}}
          <span class="text-green-600 dark:text-green-500">
            {{ i "git-pull-request-create" "w-4 h-4" }}
          </span>
        {{else if eq .Type "pull_commented"}}
          <span class="text-gray-500 dark:text-gray-400">
            {{ i "message-circle" "w-4 h-4" }}
          </span>
        {{else if eq .Type "pull_merged"}}
          <span class="text-purple-600 dark:text-purple-500">
            {{ i "git-merge" "w-4 h-4" }}
          </span>
        {{else if eq .Type "pull_closed"}}
          <span class="text-red-600 dark:text-red-500">
            {{ i "git-pull-request-closed" "w-4 h-4" }}
          </span>
        {{end}}
        {{template "user/fragments/picHandle" (resolve .ActorDid)}}
        {{if eq .Type "pull_created"}}
          <span class="text-gray-500 dark:text-gray-400">opened pull request</span>
        {{else if eq .Type "pull_commented"}}
          <span class="text-gray-500 dark:text-gray-400">commented on pull request</span>
        {{else if eq .Type "pull_merged"}}
          <span class="text-gray-500 dark:text-gray-400">merged pull request</span>
        {{else if eq .Type "pull_closed"}}
          <span class="text-gray-500 dark:text-gray-400">closed pull request</span>
        {{end}}
        {{if not .Read}}
          <div class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0 ml-1"></div>
        {{end}}
      </div>

      <div class="text-sm text-gray-600 dark:text-gray-400 mt-0.5 ml-6 flex items-center gap-1">
        <span class="text-gray-500 dark:text-gray-400">#{{.Pull.PullId}}</span>
        <span class="text-gray-900 dark:text-white truncate">{{.Pull.Title}}</span>
        <span>on</span>
        <span class="font-medium text-gray-900 dark:text-white">{{resolve .Repo.Did}}/{{.Repo.Name}}</span>
      </div>
    </div>

    <div class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0 ml-2">
      {{ template "repo/fragments/time" .Created }}
    </div>
  </div>
</a>
{{end}}

{{define "repoNotification"}}
{{$url := printf "/%s/%s" (resolve .Repo.Did) .Repo.Name}}
<a
  href="{{$url}}"
  class="block no-underline hover:no-underline text-inherit -m-3 p-3"
>
  <div class="flex items-center justify-between">
    <div class="flex items-center gap-2 min-w-0 flex-1">
      <span class="text-yellow-500 dark:text-yellow-400">
        {{ i "star" "w-4 h-4" }}
      </span>

      <div class="min-w-0 flex-1">
        <!-- Single line for stars: actor action subject -->
        <div class="flex items-center gap-1 text-gray-900 dark:text-white">
          {{template "user/fragments/picHandle" (resolve .ActorDid)}}
          <span class="text-gray-500 dark:text-gray-400">starred</span>
          <span class="font-medium">{{resolve .Repo.Did}}/{{.Repo.Name}}</span>
          {{if not .Read}}
            <div class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0 ml-1"></div>
          {{end}}
        </div>
      </div>
    </div>

    <div class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0 ml-2">
      {{ template "repo/fragments/time" .Created }}
    </div>
  </div>
</a>
{{end}}

{{define "followNotification"}}
{{$url := printf "/%s" (resolve .ActorDid)}}
<a
  href="{{$url}}"
  class="block no-underline hover:no-underline text-inherit -m-3 p-3"
>
  <div class="flex items-center justify-between">
    <div class="flex items-center gap-2 min-w-0 flex-1">
      <span class="text-blue-600 dark:text-blue-400">
        {{ i "user-plus" "w-4 h-4" }}
      </span>

      <div class="min-w-0 flex-1">
        <div class="flex items-center gap-1 text-gray-900 dark:text-white">
          {{template "user/fragments/picHandle" (resolve .ActorDid)}}
          <span class="text-gray-500 dark:text-gray-400">followed you</span>
          {{if not .Read}}
            <div class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0 ml-1"></div>
          {{end}}
        </div>
      </div>
    </div>

    <div class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0 ml-2">
      {{ template "repo/fragments/time" .Created }}
    </div>
  </div>
</a>
{{end}}

{{define "genericNotification"}}
<a
  href="#"
  class="block no-underline hover:no-underline text-inherit -m-3 p-3"
>
  <div class="flex items-center justify-between">
    <div class="flex items-center gap-2 min-w-0 flex-1">
      <span class="{{if not .Read}}text-blue-600 dark:text-blue-400{{else}}text-gray-500 dark:text-gray-400{{end}}">
        {{ i "bell" "w-4 h-4" }}
      </span>

      <div class="min-w-0 flex-1">
        <div class="flex items-center gap-1 text-gray-900 dark:text-white">
          <span>New notification</span>
          {{if not .Read}}
            <div class="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0 ml-1"></div>
          {{end}}
        </div>
      </div>
    </div>

    <div class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0 ml-2">
      {{ template "repo/fragments/time" .Created }}
    </div>
  </div>
</a>
{{end}}