- name: Home
  columns:
    - size: small
      widgets:
        - type: calendar
          first-day-of-week: sunday
        - type: clock # Added Clock widget
          hour-format: 12h # Assuming 12h based on weather widget preference
          timezones:
            - timezone: America/Los_Angeles # San Francisco uses this timezone
              label: San Francisco
            - timezone: America/New_York
              label: New York
            - timezone: Europe/London
              label: London
            - timezone: Europe/Amsterdam
              label: Amsterdam
            - timezone: Asia/Kolkata # New Delhi uses this timezone
              label: New Delhi
            - timezone: Asia/Tokyo
              label: Tokyo
        - type: custom-api
          title: Astronomy Picture of the Day
          cache: 1d
          url: https://api.nasa.gov/planetary/apod?api_key=${NASA_API_KEY}
          headers:
            Accept: application/json
          template: |
            {{- if eq (.JSON.String "media_type") "image" -}}
              <div style="display:flex; flex-direction:column; align-items:center; width:100%; padding:8px; box-sizing:border-box;">
                <!-- Clickable title -->
                <p class="color-primary" style="margin:0 0 8px; text-align:center;">
                  <a
                    href="https://apod.nasa.gov/apod/astropix.html"
                    target="_blank"
                    rel="noopener noreferrer"
                    style="color: inherit; text-decoration: none;"
                  >
                    {{ .JSON.String "title" }}
                  </a>
                </p>

                <!-- Image -->
                <img
                  src="{{ .JSON.String "url" }}"
                  alt="{{ .JSON.String "title" }}"
                  style="max-width:100%; height:auto; display:block; border-radius:4px;"
                />

                <!-- Explanation dropdown -->
                <details style="width:100%; margin-top:12px;">
                  <summary class="color-highlight size-h5" style="cursor:pointer;">
                      Show Explanation
                  </summary>
                  <p class="color-highlight size-h5" style="margin-top:8px; text-align:left; line-height:1.4;">
                    {{ .JSON.String "explanation" }}
                  </p>
                </details>
              </div>
            {{- else -}}
              <p class="color-negative" style="text-align:center;">
                No image available today.
              </p>
            {{- end }}

    - size: full
      widgets:
        - type: search
          search-engine: google
          bangs: # Added bangs section
            - title: YouTube
              shortcut: "!yt"
              url: https://www.youtube.com/results?search_query={QUERY}
            - title: Wikipedia
              shortcut: "!w"
              url: https://en.wikipedia.org/wiki/Special:Search?search={QUERY}
            - title: Amazon
              shortcut: "!a"
              url: https://www.amazon.com/s?k={QUERY}
            - title: Reddit
              shortcut: "!r"
              url: https://www.reddit.com/search/?q={QUERY}
            - title: GitHub
              shortcut: "!gh"
              url: https://github.com/search?q={QUERY}
        - type: bookmarks # Rewritten Quick Links widget
          title: Quick Links
          groups:
            - links:
                - title: Google
                  url: https://www.google.com/
                  icon: si:google
                - title: GMail
                  url: https://mail.google.com/
                  icon: si:gmail
                - title: GDrive
                  url: https://drive.google.com/
                  icon: si:googledrive
            - links:
                - title: GCal
                  url: https://calendar.google.com/
                  icon: si:googlecalendar
                - title: Youtube
                  url: https://www.youtube.com/
                  icon: si:youtube
                - title: Amazon
                  url: https://www.amazon.com/
                  icon: si:amazon
            - links:
                - title: Github
                  url: https://github.com/
                  icon: si:github
                - title: LinkedIn
                  url: https://www.linkedin.com/
                  icon: si:linkedin
                - title: Plex
                  url: "${PLEX_URL}/web/index.html#!/"
                  icon: si:plex
            - links:
                - title: MCSManager
                  url: http://panel.sirblob.co/
                  icon: mdi:server
                - title: Gitea
                  url: https://git.sirblob.co/
                  icon: si:gitea
                - title: Coder
                  url: "${CODER_APP_URL}"
                  icon: mdi:code-braces
                - title: Yamtrack
                  url: https://tbd.sirblob.co/
                  icon: mdi:bug
            - links:
                - title: qBittorrent
                  url: https://torr.sirblob.co/
                  icon: si:qbittorrent
                - title: Excalidraw
                  url: https://draw.sirblob.co/
                  icon: mdi:draw
                - title: Immich
                  url: https://immich.sirblob.co/
                  icon: si:immich
            - links:
                - title: Canvas
                  url: https://canvas.gmu.edu/
                  icon: si:instructure # Instructure is the company behind Canvas
                - title: Mason360
                  url: https://mason360.gmu.edu/
                  icon: mdi:school # Using a generic school icon
                - title: Nginx Proxy Manager # Added NPM
                  url: https://npm.sirblob.co/
                  icon: si:nginxproxymanager
                - title: OpenWeb (AI Chat)
                  url: https://openweb.sirblob.co/
                  icon: mdi:chat
                - title: Sea (Anime)
                  url: https://sea.sirblob.co/
                  icon: mdi:television

        - type: monitor
          cache: 1m
          title: My Services
          sites:
            - title: Plex
              url: "${PLEX_URL}/web/index.html#!/"
              icon: si:plex
            - title: Immich
              url: https://immich.sirblob.co
              icon: si:immich
            - title: MCSManager
              url: http://panel.sirblob.co/
              icon: mdi:server
            - title: Coder
              url: "${CODER_APP_URL}"
              icon: mdi:code-braces
            - title: Yamtrack
              url: https://tbd.sirblob.co/
              icon: mdi:bug
            - title: Excalidraw
              url: https://draw.sirblob.co/
              icon: mdi:draw
            - title: qBittorrent
              url: https://torr.sirblob.co/
              icon: si:qbittorrent
            - title: Gitea
              url: https://git.sirblob.co/
              icon: si:gitea
            - title: Nginx Proxy Manager # Added NPM
              url: https://npm.sirblob.co/
              icon: si:nginxproxymanager
            - title: OpenWeb (AI Chat)
              url: https://openweb.sirblob.co/
              icon: mdi:chat
            - title: Sea (Anime)
              url: https://sea.sirblob.co/
              icon: mdi:television

        - type: group
          widgets:
            - type: custom-api
              title: mason.sirblob.co
              cache: 30s
              url: https://api.mcstatus.io/v2/status/java/mason.sirblob.co
              template: &minecraft-widget-template |
                <div style="display:flex; align-items:center; gap:12px;">
                  <div style="width:40px; height:40px; flex-shrink:0;  border-radius:4px; display:flex; justify-content:center; align-items:center; overflow:hidden;">
                    {{ if .JSON.Bool "online" }}
                      <img src="{{ .JSON.String "icon" | safeURL }}" width="64" height="64" style="object-fit:contain;">
                    {{ else }}
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width:32px; height:32px; opacity:0.5;">
                        <path fill-rule="evenodd" d="M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.219a.75.75 0 0 0-1.06 0l-1.91 1.909.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.091a.75.75 0 0 0-1.06 0l-2.97 2.97ZM12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" clip-rule="evenodd" />
                      </svg>
                    {{ end }}
                  </div>
                  <div style="flex-grow:1; min-width:0;">
                    <a class="size-h4 block text-truncate color-highlight">
                      {{ .JSON.String "host" }}
                      {{ if .JSON.Bool "online" }}
                      <span style="width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-positive); display: inline-block; vertical-align: middle;" data-popover-type="text" data-popover-text="Online"></span>
                      {{ else }}
                      <span style="width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-negative); display: inline-block; vertical-align: middle;" data-popover-type="text" data-popover-text="Offline"></span>
                      {{ end }}
                    </a>
                    <ul class="list-horizontal-text">
                      <li>
                        {{ if .JSON.Bool "online" }}
                        <span>{{ .JSON.String "version.name_clean" }}</span>
                        {{ else }}
                        <span>Offline</span>
                        {{ end }}
                      </li>
                      {{ if .JSON.Bool "online" }}
                      <li data-popover-type="html">
                        <div data-popover-html>
                          {{ range .JSON.Array "players.list" }}{{ .String "name_clean" }}<br>{{ end }}
                        </div>
                        <p style="display:inline-flex;align-items:center;">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6" style="height:1em;vertical-align:middle;margin-right:0.5em;"><path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" /></svg>
                          {{ .JSON.Int "players.online" | formatNumber }}/{{ .JSON.Int "players.max" | formatNumber }} players
                        </p>
                      </li>
                      {{ else }}
                      <li>
                        <p style="display:inline-flex;align-items:center;">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6" style="height:1em;vertical-align:middle;margin-right:0.5em;opacity:0.5;"><path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" /></svg>
                          0 players
                        </p>
                      </li>
                      {{ end }}
                    </ul>
                  </div>
                </div>
            - type: custom-api
              title: cobble.sirblob.co
              cache: 30s
              url: https://api.mcstatus.io/v2/status/java/cobble.sirblob.co
              template: *minecraft-widget-template
            - type: custom-api
              title: cgc.sirblob.co
              cache: 30s
              url: https://api.mcstatus.io/v2/status/java/cgc.sirblob.co
              template: *minecraft-widget-template
            - type: custom-api
              title: presto.sirblob.co
              cache: 30s
              url: https://api.mcstatus.io/v2/status/java/presto.sirblob.co
              template: *minecraft-widget-template
            - type: custom-api
              title: event.sirblob.co
              cache: 30s
              url: https://api.mcstatus.io/v2/status/java/event.sirblob.co
              template: *minecraft-widget-template

        - type: custom-api
          title: LeetCode Daily Question
          cache: 6h
          url: https://leetcode.com/graphql
          method: POST
          headers:
            Accept: application/json
          body-type: json
          body:
            query: |
              query questionOfToday {
                activeDailyCodingChallengeQuestion {
                  link
                  question {
                    questionId
                    title
                    difficulty
                    topicTags {
                      name
                      slug
                    }
                  }
                }
              }
            operationName: questionOfToday
          template: |
            <div class="leetcode-card">
              <style>
                .leetcode-card {
                  max-width: 600px;
                  margin: 8px auto;
                  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                  transition: transform 0.2s ease, box-shadow 0.2s ease;
                }
                .leetcode-card h1 {
                  font-size: 24px;
                  margin: 0 0 16px;
                  line-height: 1.3;
                }
                .leetcode-card h1 a {
                  color: #8CAAEE;
                  text-decoration: none;
                  transition: color 0.2s ease;
                }
                .leetcode-card h1 a:hover {
                  color: #BAC8FF;
                  text-decoration: underline;
                }
                .leetcode-card p {
                  margin: 8px 0;
                  color: #C6D0F5;
                  font-size: 16px;
                }
                .leetcode-card .difficulty {
                  font-weight: 600;
                  color: #A5ADCE;
                }
                .leetcode-card .difficulty.Easy {
                  color: #A6D189;
                }
                .leetcode-card .difficulty.Medium {
                  color: #E5C890;
                }
                .leetcode-card .difficulty.Hard {
                  color: #E78284;
                }
                .leetcode-card .topics {
                  display: flex;
                  flex-wrap: wrap;
                  gap: 8px;
                  margin: 12px 0;
                }
                .leetcode-card .topic-tag {
                  background: #CA9EE6;
                  color: #303446;
                  padding: 4px 12px;
                  border-radius: 16px;
                  font-size: 14px;
                  font-weight: 500;
                  transition: transform 0.2s ease;
                }
                .leetcode-card .topic-tag:hover {
                  transform: scale(1.05);
                }
                .leetcode-card .premium {
                  color: #E78284;
                  font-weight: 600;
                  margin-top: 12px;
                }
                @media (max-width: 600px) {
                  .leetcode-card {
                    padding: 16px;
                    margin: 8px;
                  }
                  .leetcode-card h1 {
                    font-size: 20px;
                  }
                  .leetcode-card p {
                    font-size: 14px;
                  }
                  .leetcode-card .topic-tag {
                    font-size: 12px;
                    padding: 3px 10px;
                  }
                }
              </style>
              <h1>
                <a href="https://leetcode.com{{ .JSON.String "data.activeDailyCodingChallengeQuestion.link" }}" target="_blank">
                  {{ .JSON.String "data.activeDailyCodingChallengeQuestion.question.questionId" }} - {{ .JSON.String "data.activeDailyCodingChallengeQuestion.question.title" }}
                </a>
              </h1>
              <p class="difficulty {{ .JSON.String "data.activeDailyCodingChallengeQuestion.question.difficulty" }}"><strong>Difficulty:</strong> {{ .JSON.String "data.activeDailyCodingChallengeQuestion.question.difficulty" }}</p>
              <p><strong>Topics:</strong></p>
              <div class="topics">
                {{ if .JSON.Exists "data.activeDailyCodingChallengeQuestion.question.topicTags" }}
                  {{ range .JSON.Array "data.activeDailyCodingChallengeQuestion.question.topicTags" }}
                    <span class="topic-tag">{{ .String "name" }}</span>
                  {{ end }}
                {{ else }}
                  <span class="topic-tag">None</span>
                {{ end }}
              </div>
              {{ if .JSON.Bool "data.activeDailyCodingChallengeQuestion.question.paidOnly" }}
                <p class="premium">This is a Premium question</p>
              {{ end }}
            </div>

    - size: small
      widgets:
        - type: weather
          location: Great Falls, Virginia, United States
          units: imperial
          hour-format: 12h

        - type: custom-api
          title: Air Quality
          cache: 10m
          url: https://api.waqi.info/feed/geo:38.9979;-77.2894/?token=${AIR_TOKEN}
          template: |
            {{ $aqi := printf "%03s" (.JSON.String "data.aqi") }}
            {{ $aqiraw := .JSON.String "data.aqi" }}
            {{ $updated := .JSON.String "data.time.iso" }}
            {{ $humidity := .JSON.String "data.iaqi.h.v" }}
            {{ $ozone := .JSON.String "data.iaqi.o3.v" }}
            {{ $pm25 := .JSON.String "data.iaqi.pm25.v" }}
            {{ $pressure := .JSON.String "data.iaqi.p.v" }}

            <div class="flex justify-between">
              <div class="size-h5">
                {{ if le $aqi "050" }}
                  <div class="color-positive">Good air quality</div>
                {{ else if le $aqi "100" }}
                  <div class="color-primary">Moderate air quality</div>
                {{ else }}
                  <div class="color-negative">Bad air quality</div>
                {{ end }}
              </div>
            </div>

            <div class="color-highlight size-h2">AQI: {{ $aqiraw }}</div>
            <div style="border-bottom: 1px solid; margin-block: 10px;"></div>

            <div class="margin-block-2">
              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">

                <div>
                  <div class="size-h3 color-highlight">{{ $humidity }}%</div>
                  <div class="size-h6">HUMIDITY</div>
                </div>

                <div>
                  <div class="size-h3 color-highlight">{{ $ozone }} μg/m³</div>
                  <div class="size-h6">OZONE</div>
                </div>

                <div>
                  <div class="size-h3 color-highlight">{{ $pm25 }} μg/m³</div>
                  <div class="size-h6">PM2.5</div>
                </div>

                <div>
                  <div class="size-h3 color-highlight">{{ $pressure }} hPa</div>
                  <div class="size-h6">PRESSURE</div>
                </div>

              </div>

              <div class="size-h6" style="margin-top: 10px;">Last Updated at {{ slice $updated 11 16 }}</div>
            </div>

        - type: custom-api
          title: GitHub Repositories
          url: https://api.github.com/users/SirBlobby/repos
          cache: 30m
          parameters:
            affiliation: owner
            sort: updated
            visibility: all
          headers:
            Accept: application/vnd.github.v3+json
            User-Agent: Glance-Dashboard
          template: |
            <div class="github-repos">
              <ul class="list list-gap-14 collapsible-container" data-collapse-after="5">
                {{ range .JSON.Array "" }}
                  <li>
                    <a class="size-h3 color-primary" href="{{ .String "html_url" }}">{{ .String "full_name" }}</a>
                    <h3><a href="" target="_blank"></a></h3>
                    <p>{{ .String "description" }}</p>
                    <ul class="list-horizontal-text device-info">
                      <li data-popover-type="html"><div data-popover-html="">Last Update</div>{{ formatTime "DateOnly" ( parseTime "RFC3339" (.String "updated_at") ) }}</li>
                      <li data-popover-type="html"><div data-popover-html="">Visibility</div>{{ .String "visibility" }}</li>
                      <li data-popover-type="html"><div data-popover-html="">Stars</div>{{ .Int "stargazers_count" }}✩</li>
                      {{ if .String "language" }}
                      <li data-popover-type="html"><div data-popover-html="">Language</div>{{ .String "language" }}</li>
                      {{ end }}
                    </ul>
                  </li>
                {{ end }}
              </ul>
            </div>