<div class="card" style="display:flex;align-items:center;gap:14px;padding:14px 16px;font-family:'Satoshi',sans-serif;">

    <div style="width:52px;height:52px;flex-shrink:0;border-radius:6px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;overflow:hidden;">
        <div style="width:24px;height:4px;background:var(--primary-color);border-radius:2px;box-shadow:0 6px 0 var(--primary-color), 0 -6px 0 var(--primary-color);opacity:0.5;"></div>
    </div>

    <div style="flex:1;min-width:0;">
        <div style="font-size:0.875rem;font-weight:700;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;">Why Your Thumbnails Aren&#x27;t Getting Clicks</div>
        <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
            <span style="font-size:0.75rem;color:var(--paragraph);">28 Mar 2026</span>
            <span style="font-size:0.75rem;color:var(--paragraph);">2,104 words</span>
            <span style="font-size:0.7rem;font-weight:600;color:var(--primary-color);background:var(--primary-light);padding:1px 7px;border-radius:10px;">Listicle</span>
        </div>
    </div>

    <span style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:3px 8px;border-radius:10px;flex-shrink:0;background:#f0fdf4;color:#15803d;">Published</span>

    <div style="display:flex;align-items:center;gap:8px;flex-shrink:0;">
        <a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--primary-color);text-decoration:none;">Open</a>
        <span style="color:#ddd;">|</span>
        <a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-decoration:none;">Delete</a>
    </div>

</div>
<div class="card" style="display:flex;align-items:center;gap:14px;padding:14px 16px;font-family:'Satoshi',sans-serif;">

  {{! Thumbnail / type indicator }}
  <div style="width:52px;height:52px;flex-shrink:0;border-radius:6px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;overflow:hidden;">
    {{#if thumbnail}}
      <img src="{{thumbnail}}" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
    {{else}}
      <div style="width:24px;height:4px;background:var(--primary-color);border-radius:2px;box-shadow:0 6px 0 var(--primary-color), 0 -6px 0 var(--primary-color);opacity:0.5;"></div>
    {{/if}}
  </div>

  {{! Meta }}
  <div style="flex:1;min-width:0;">
    <div style="font-size:0.875rem;font-weight:700;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px;">{{title}}</div>
    <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
      <span style="font-size:0.75rem;color:var(--paragraph);">{{date}}</span>
      {{#if wordCount}}<span style="font-size:0.75rem;color:var(--paragraph);">{{wordCount}} words</span>{{/if}}
      {{#if template}}<span style="font-size:0.7rem;font-weight:600;color:var(--primary-color);background:var(--primary-light);padding:1px 7px;border-radius:10px;">{{template}}</span>{{/if}}
    </div>
  </div>

  {{! Status badge }}
  {{#if status}}
  <span style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:3px 8px;border-radius:10px;flex-shrink:0;background:{{statusBg}};color:{{statusColor}};">{{status}}</span>
  {{/if}}

  {{! Actions }}
  <div style="display:flex;align-items:center;gap:8px;flex-shrink:0;">
    <a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--primary-color);text-decoration:none;">Open</a>
    <span style="color:#ddd;">|</span>
    <a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-decoration:none;">Delete</a>
  </div>

</div>
{
  "title": "Why Your Thumbnails Aren't Getting Clicks",
  "date": "28 Mar 2026",
  "wordCount": "2,104",
  "template": "Listicle",
  "status": "Published",
  "statusBg": "#f0fdf4",
  "statusColor": "#15803d",
  "thumbnail": null
}

List item representing a saved script in the Script Library. Supports bulk selection (checkbox added by the library layout). Appears in: Script Library, Script Generator history panel.