- type: custom-api
  title: Uptime Status
  title-url: ${UPTIME_KUMA_URL}
  hide-header: true
  url: ${UPTIME_KUMA_URL}/api/status-page/${UPTIME_KUMA_STATUS_SLUG}
  subrequests:
    heartbeats:
      url: ${UPTIME_KUMA_URL}/api/status-page/heartbeat/${UPTIME_KUMA_STATUS_SLUG}
  cache: 5m
  template: |
    {{ $hb := .Subrequest "heartbeats" }}

    {{ if not (.JSON.Exists "publicGroupList") }}
      <p class="color-negative">Error reading response</p>
    {{ else if eq (len (.JSON.Array "publicGroupList")) 0 }}
      <p>No monitors found</p>
    {{ else }}
      <div class="uptime-list">
        <style>
          .uptime-item {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 16px;
            padding: 16px;
            border-bottom: 1px solid var(--color-widget-content-border);
            align-items: center;
          }
          .uptime-item:last-child {
            border-bottom: none;
          }
          .monitor-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.05);
          }
          .monitor-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .monitor-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
          }
          .monitor-name {
            font-weight: 800;
            color: var(--color-highlight);
            font-size: 1.25rem;
            text-decoration: none;
          }
          .monitor-meta {
            display: flex;
            gap: 8px;
            font-size: 0.85rem;
            color: var(--color-subdue);
            font-family: var(--font-family-mono);
          }
          .status-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
          }
        </style>

        {{ range .JSON.Array "publicGroupList" }}
          {{ range .Array "monitorList" }}
            {{ $id := .String "id" }}
            {{ $name := .String "name" }}
            {{ $hbPath := concat "heartbeatList." $id }}
            {{ $hbArray := $hb.JSON.Array $hbPath }}
            
            {{ $latest := "" }}
            {{ range $hbArray }}{{ $latest = . }}{{ end }}

            <div class="uptime-item">
              <div class="monitor-icon">               
                {{ if eq $name "AvEmy" }} <img src="https://icon.horse/icon/aveminakarabudak.com" alt="" />
                {{ else if eq $name "ayris.tech" }} <img src="https://icon.horse/icon/ayris.tech" alt="" />
                {{ else if eq $name "AyrisApart" }} <img src="https://icon.horse/icon/ayrisapart.com" alt="" />
                {{ else if eq $name "irisiptv.online" }} <img src="https://icon.horse/icon/irisiptv.online" alt="" />
                {{ else if eq $name "screencapr.com" }} <img src="https://icon.horse/icon/screencapr.com" alt="" />
                {{ else if eq $name "Portainer" }} <img src="https://icon.horse/icon/portainer.io" alt="" />
                {{ else if eq $name "Backrest" }} <img src="https://icon.horse/icon/grest.dev" alt="" />
                {{ else }}
                  <svg fill="currentColor" viewBox="0 0 24 24" width="24" height="24"><path d="M21 16.5C21 16.88 20.79 17.21 20.47 17.38L12.57 21.82C12.41 21.94 12.21 22 12 22C11.79 22 11.59 21.94 11.43 21.82L3.53 17.38C3.21 17.21 3 16.88 3 16.5V7.5C3 7.12 3.21 6.79 3.53 6.62L11.43 2.18C11.59 2.06 11.79 2 12 2C12.21 2 12.41 2.06 12.57 2.18L20.47 6.62C20.79 6.79 21 7.12 21 7.5V16.5Z"/></svg>
                {{ end }}
              </div>

              <div class="monitor-info">
                <a class="monitor-name" href="${UPTIME_KUMA_URL}/dashboard/{{ $id }}" target="_blank">
                  {{ $name }}
                </a>
                <div class="monitor-meta">
                  {{ if $latest }}
                    {{ if eq ($latest.String "status") "1" }}
                      <span class="color-positive">OK</span>
                      <span>•</span>
                      <span>{{ $latest.Int "ping" }}ms</span>
                    {{ else }}
                      <span class="color-negative">DOWN</span>
                      {{ if $latest.Exists "msg" }}
                        <span>•</span>
                        <span class="size-tiny">{{ $latest.String "msg" }}</span>
                      {{ end }}
                    {{ end }}
                  {{ else }}
                    <span class="color-subdue">No data</span>
                  {{ end }}
                </div>
              </div>

              <div class="status-icon">
                {{ if $latest }}
                  {{ if eq ($latest.String "status") "1" }}
                    <svg fill="var(--color-positive)" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"></path>
                    </svg>
                  {{ else }}
                    <svg fill="var(--color-negative)" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"></path>
                    </svg>
                  {{ end }}
                {{ else }}
                  <svg fill="var(--color-subdue)" viewBox="0 0 20 20">
                    <path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm0-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm-.75-8a.75.75 0 0 1 1.5 0v3a.75.75 0 0 1-1.5 0V8zm.75 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                  </svg>
                {{ end }}
              </div>
            </div>
          {{ end }}
        {{ end }}
      </div>
    {{ end }}