<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;">Untitled script</div>
<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
<span style="font-size:0.75rem;color:var(--paragraph);">1 Apr 2026</span>
<span style="font-size:0.75rem;color:var(--paragraph);">304 words</span>
</div>
</div>
<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": "Untitled script",
"date": "1 Apr 2026",
"wordCount": "304",
"template": null,
"status": null,
"statusBg": null,
"statusColor": null,
"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.