pages:
  - name: Home
    width: slim
    hide-desktop-navigation: true
    center-vertically: true 
    head-widgets:
      - type: search
        search-engine: duckduckgo
        bangs:
          - title: YouTube
            shortcut: "!yt"
            url: https://www.youtube.com/results?search_query={QUERY}

    columns:
#      - size: small
#        widgets:
#          - type: calendar
#            first-day-of-week: monday
#
#
#          - type: weather
#            location: Dubai, United Arab Emirates
#            units: metric # alternatively "imperial"
#            hour-format: 12h # alternatively "24h"
#
#          - type: twitch-channels
#            channels:
#              - hasanabi
#              - f1nn5ter
#              - ickystreams
#              - EJ_SA


      - size: full
        widgets:



          - type: monitor
            cache: 1m
            title: Services Monitor
            sites:
              - title: Jellyfin
                url: https://jellyfin.grokkingstuff.org
                icon: /assets/jellyfin-logo.png
              - title: Gitea
                url: https://gitea.grokkingstuff.org
                icon: /assets/gitea-logo.png
              - title: Immich
                url: https://immich.yourdomain.com
                icon: /assets/immich-logo.png
              - title: AdGuard Home
                url: https://adguard.yourdomain.com
                icon: /assets/adguard-logo.png
              - title: Vaultwarden
                url: https://vault.yourdomain.com
                icon: /assets/vaultwarden-logo.png


          - type: custom-api
            title: Tailscale Devices
            title-url: https://login.tailscale.com/admin/machines
            url: https://api.tailscale.com/api/v2/tailnet/-/devices
            headers:
              Authorization: Bearer tskey-api-k8dNQqtLD721CNTRL-moEnDQk5SjK5RVGH8tW5gKyadpquiS8pe 
            cache: 10m
            template: |
              {{/* User Variables */}}
              {{/* Set to true if you'd like an indicator for online devices */}}
              {{ $enableOnlineIndicator := false }}
          
              <style>
                .device-info-container {
                  position: relative;
                  overflow: hidden;
                  height: 1.5em;
                }
          
                .device-info {
                  display: flex;
                  transition: transform 0.2s ease, opacity 0.2s ease;
                }

                .device-ip {
                  position: absolute;
                  top: 0;
                  left: 0;
                  transform: translateY(-100%);
                  opacity: 0;
                  transition: transform 0.2s ease, opacity 0.2s ease;
                }

                .device-info-container:hover .device-info {
                  transform: translateY(100%);
                  opacity: 0;
                }
          
                .device-info-container:hover .device-ip {
                  transform: translateY(0);
                  opacity: 1;
                }

                .update-indicator {
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background-color: var(--color-primary);
                  display: inline-block;
                  margin-left: 4px;
                  vertical-align: middle;
                }

                .offline-indicator {
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background-color: var(--color-negative);
                  display: inline-block;
                  margin-left: 4px;
                  vertical-align: middle;
                }
          
                .online-indicator {
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background-color: var(--color-positive);
                  display: inline-block;
                  margin-left: 4px;
                  vertical-align: middle;
                }

                .device-name-container {
                  display: flex;
                  align-items: center;
                  gap: 8px;
                }
          
                .indicators-container {
                  display: flex;
                  align-items: center;
                  gap: 4px;
                }
              </style>
              <ul class="list list-gap-10 collapsible-container" data-collapse-after="4">
                {{ range .JSON.Array "devices" }}
                <li>
                  <div class="flex items-center gap-10">
                    <div class="device-name-container grow">
                     <span class="size-h4 block text-truncate color-primary">
                        {{ findMatch "^([^.]+)" (.String "name") }}
                      </span>
                      <div class="indicators-container">
                        {{ if (.Bool "updateAvailable") }}
                        <span class="update-indicator" data-popover-type="text" data-popover-text="Update Available"></span>
                        {{ end }}
          
                        {{ $lastSeen := .String "lastSeen" | parseTime "rfc3339" }}
                        {{ if not ($lastSeen.After (offsetNow "-10s")) }}
                        {{ $lastSeenTimezoned := $lastSeen.In now.Location }}
                        <span class="offline-indicator" data-popover-type="text"
                          data-popover-text="Offline - Last seen {{ $lastSeenTimezoned.Format " Jan 2 3:04pm" }}"></span>
                        {{ else if $enableOnlineIndicator }}
                          <span class="online-indicator" data-popover-type="text" data-popover-text="Online"></span>
                        {{ end }}
                      </div>
                    </div>
                  </div>
                  <div class="device-info-container">
                    <ul class="list-horizontal-text device-info">
                      <li>{{ .String "os" }}</li>
                      <li>{{ .String "user" }}</li>
                    </ul>
                    <div class="device-ip">
                      {{ .String "addresses.0"}}
                    </div>
                  </div>
                </li>
                {{ end }}
              </ul>

#          - type: group
#            widgets:
#              - type: hacker-news
#              - type: lobsters

#          - type: videos
#            channels:
#              - UCXuqSBlHAE6Xw-yeJA0Tunw # Linus Tech Tips
#              - UCR-DXc1voovS8nhAvccRZhg # Jeff Geerling
#              - UCsBjURrPoezykLs9EqgamOA # Fireship
#              - UCBJycsmduvYEL83R_U4JriQ # Marques Brownlee
#              - UCHnyfMqiRRG1u-2MsSQLbXA # Veritasium


#      - size: small
#        widgets:
#
#          - type: markets
#            markets:
#              - symbol: SPY
#                name: S&P 500
#              - symbol: BTC-USD
#                name: Bitcoin
#              - symbol: NVDA
#                name: NVIDIA
#              - symbol: AAPL
#                name: Apple
#              - symbol: MSFT
#                name: Microsoft
#
#          - type: releases
#            cache: 1d
#            # Without authentication the Github API allows for up to 60 requests per hour. You can create a
#            # read-only token from your Github account settings and use it here to increase the limit.
#            # token: ...
#            repositories:
#              - glanceapp/glance
#              - go-gitea/gitea
#              - immich-app/immich
#              - syncthing/syncthing


theme:
  light: true
  background-color: 220 23 95
  contrast-multiplier: 1.0
  primary-color: 220 91 54
  positive-color: 109 58 40
  negative-color: 347 87 44

  # Add more pages here:
  # - name: Your page name
  #   columns:
  #     - size: small
  #       widgets:
  #         # Add widgets here

  #     - size: full
  #       widgets:
  #         # Add widgets here

  #     - size: small
  #       widgets:
  #         # Add widgets here