- type: custom-api
  title: Services
  hide-header: true
  cache: 1m
  url: ${SERVICES_JSON_URL}
  template: |
    <div class="services-list">
      <style>
        .service-row {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 16px;
          border-bottom: 1px solid var(--color-widget-content-border);
          text-decoration: none;
        }
        .service-row:last-child { border-bottom: none; }
        .service-icon-container {
          width: 48px; height: 48px; flex-shrink: 0;
          border-radius: 50%; overflow: hidden;
          background: rgba(255, 255, 255, 0.05);
          display: flex; align-items: center; justify-content: center;
        }
        .service-icon { width: 100%; height: 100%; object-fit: cover; }
        .service-name { font-weight: 800; color: var(--color-highlight); font-size: 1.25rem; }
      </style>

      {{ range .JSON.Array "" }}
        <a href="{{ .String "url" }}" target="_blank" class="service-row">
          <div class="service-icon-container">
            <img src="{{ .String "icon" }}" class="service-icon" alt="" />
          </div>
          <span class="service-name">{{ .String "title" }}</span>
        </a>
      {{ end }}
    </div>