{{ define "title" }}notifications{{ end }}

{{ define "content" }}
  <div class="px-6 py-4">
    <div class="flex items-center justify-between">
      <p class="text-xl font-bold dark:text-white">Notifications</p>
      <a href="/settings/notifications" class="flex items-center gap-2">
        {{ i "settings" "w-4 h-4" }}
        preferences
      </a>
    </div>
  </div>

  {{if .Notifications}}
    <div class="flex flex-col gap-2" id="notifications-list">
      {{range .Notifications}}
        {{template "notifications/fragments/item" .}}
      {{end}}
    </div>

  {{else}}
    <div class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
      <div class="text-center py-12">
        <div class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600">
          {{ i "bell-off" "w-16 h-16" }}
        </div>
        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No notifications</h3>
        <p class="text-gray-600 dark:text-gray-400">When you receive notifications, they'll appear here.</p>
      </div>
    </div>
  {{end}}

  {{ template "pagination" . }}
{{ end }}

{{ define "pagination" }}
  <div class="flex justify-end mt-4 gap-2">
      {{ if gt .Page.Offset 0 }}
         {{ $prev := .Page.Previous }}
          <a
              class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700"
              hx-boost="true"
              href = "/notifications?offset={{ $prev.Offset }}&limit={{ $prev.Limit }}"
          >
              {{ i "chevron-left" "w-4 h-4" }}
              previous
          </a>
      {{ else }}
          <div></div>
      {{ end }}

      {{ $next := .Page.Next }}
      {{ if lt $next.Offset .Total }}
         {{ $next := .Page.Next }}
          <a
              class="btn flex items-center gap-2 no-underline hover:no-underline dark:text-white dark:hover:bg-gray-700"
              hx-boost="true"
              href = "/notifications?offset={{ $next.Offset }}&limit={{ $next.Limit }}"
          >
              next
              {{ i "chevron-right" "w-4 h-4" }}
          </a>
      {{ end }}
  </div>
{{ end }}