- 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.Raw | fromJson }}
        <a href="{{ .url }}" target="_blank" class="service-row">
          <div class="service-icon-container">
            <img src="{{ .icon }}" class="service-icon" alt="" />
          </div>
          <span class="service-name">{{ .title }}</span>
        </a>
      {{ end }}
    </div>