- type: custom-api
  title: Raindrop Latest Links
  hide-header: true
  cache: 1h
  url: https://api.raindrop.io/rest/v1/raindrops/0?perpage=50
  headers: { Authorization: "Bearer ${RAINDROP_TOKEN}" }
  template: |
    {{ if .JSON.Bool "result" }}
      <div class="raindrop-list">
        <style>
          .raindrop-item {
            display: flex;
            gap: 16px;
            padding: 16px;
            border-bottom: 1px solid var(--color-widget-content-border);
            align-items: center;
          }
          .raindrop-item:last-child {
            border-bottom: none;
          }
          .raindrop-cover-container {
            width: 48px;
            height: 48px;
            flex-shrink: 0;

            overflow: hidden;
            background: rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .raindrop-cover {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .raindrop-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
          }
          .raindrop-title {
            font-weight: 800;
            color: var(--color-highlight);
            font-size: 1.2rem;
            text-decoration: none;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.2;
          }
          .raindrop-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 0.85rem;
            color: var(--color-subdue);
            font-family: var(--font-family-mono);
          }
          .tag-badge {
            color: var(--color-primary);
            font-weight: 700;
          }
        </style>

        <ul class="list collapsible-container" data-collapse-after="10">
          {{ range .JSON.Array "items" }}
            <li class="raindrop-item">
              <div class="raindrop-cover-container">
                {{ $cover := .String "cover" }}
                {{ if $cover }}
                  <img src="{{ $cover }}" class="raindrop-cover" alt="" />
                {{ else }}
                  <svg fill="currentColor" viewBox="0 0 24 24" width="24" height="24"><path d="M4.75 3.5a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5zM9 13l3-3 3 3M8 15v-2h8v2H8z"/></svg>
                {{ end }}
              </div>

              <div class="raindrop-info">
                <a href="{{ .String "link" }}" target="_blank" class="raindrop-title">
                  {{ .String "title" }}
                </a>
                <div class="raindrop-meta">
                  <span class="color-primary">#{{ .String "domain" }}</span>
                  <span>•</span>
                  <span {{ .String "created" | parseRelativeTime "rfc3339" }}></span>
                  {{ $tags := .Array "tags" }}
                  {{ if $tags }}
                    <span>•</span>
                    <span class="tag-badge">#{{ (index $tags 0).String "" }}</span>
                  {{ end }}
                </div>
              </div>
            </li>
          {{ end }}
        </ul>
      </div>
    {{ else }}
      <div class="color-negative padding-10 text-center">
        No bookmarks found or API error.
      </div>
    {{ end }}