<header class="dashboard-header" style="position:fixed;top:0;left:0;right:0;background:#fff;border-bottom:1px solid var(--primary-light);padding:0 20px;height:56px;display:flex;align-items:center;z-index:20;">
<a href="#" style="display:flex;align-items:center;gap:8px;text-decoration:none;margin-right:auto;">
<img src="https://app.tubespanner.com/themes/custom/tubespanner_purple/images/logo.svg" alt="TubeSpanner" style="height:28px;" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
<strong style="display:none;font-family:'Satoshi';color:var(--primary-color);font-size:1.1rem;">TubeSpanner</strong>
</a>
<div style="display:flex;align-items:center;gap:8px;">
<button class="btn btn-primary" style="display:flex;align-items:center;gap:6px;font-size:0.875rem;padding:6px 14px;">
<span style="font-size:1rem;font-weight:300;">+</span> Create
<span style="border-left:1px solid rgba(255,255,255,0.4);margin-left:4px;padding-left:8px;font-size:0.7rem;">▼</span>
</button>
<div style="width:36px;height:36px;border-radius:50%;background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Satoshi';font-weight:700;font-size:13px;cursor:pointer;">FK</div>
</div>
</header>
<div class="dashaboard-main">
<div class="app-sidebar-wrapper">
<div class="app-sidebar" style="border-right:1px solid var(--primary-light);overflow-y:auto;">
<ul class="list-unstyled sidebar-list-item" style="margin:0;padding:6px 0;">
<li class="nav-item">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
<span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">Dashboard</span>
</a>
</li>
<li class="nav-item active">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid var(--primary-color);background:var(--primary-light);color:var(--primary-color);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:700;">
<span style="width:20px;height:20px;border-radius:4px;background:var(--primary-color);flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">Ideas</span>
<span style="font-size:0.6rem;color:var(--paragraph);">▼</span>
</a>
</li>
<li class="nav-item">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
<span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">Discover</span>
<span style="font-size:0.6rem;color:var(--paragraph);">▼</span>
</a>
</li>
<li class="nav-item">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
<span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">Plan</span>
<span style="font-size:0.6rem;color:var(--paragraph);">▼</span>
</a>
</li>
<li class="nav-item">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
<span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">Projects</span>
<span style="font-size:0.6rem;color:var(--paragraph);">▼</span>
</a>
</li>
<li class="nav-item">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
<span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">Growth</span>
<span style="font-size:0.6rem;color:var(--paragraph);">▼</span>
</a>
</li>
<li class="nav-item">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
<span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">Settings</span>
</a>
</li>
</ul>
<div style="border-top:1px solid var(--primary-light);padding:12px 14px;margin-top:auto;">
<div style="font-family:'Satoshi';font-size:0.8125rem;font-weight:700;color:var(--title);margin-bottom:2px;">Fluffy Kiwi</div>
<div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">Pro plan</div>
</div>
</div>
</div>
<div class="dashaboard-content" style="background:#f9fafb;overflow-y:auto;min-height:calc(100vh - 56px);">
<div style="padding:20px 24px;">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;">
<div style="flex:1;">
<h1 style="font-family:'Satoshi';font-size:1.25rem;font-weight:700;color:var(--title);margin:0 0 2px;">Script Library</h1>
<p style="font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);margin:0;">47 scripts</p>
</div>
<div style="display:flex;align-items:center;gap:8px;">
<div style="display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--primary-light);border-radius:6px;padding:7px 12px;min-width:220px;">
<span style="color:var(--paragraph);font-size:0.875rem;">🔍</span>
<input type="text" placeholder="Search scripts…" value="" style="border:none;outline:none;font-family:'Satoshi';font-size:0.875rem;color:var(--title);background:transparent;flex:1;width:100%;">
</div>
<select style="border:1px solid var(--primary-light);border-radius:6px;padding:7px 28px 7px 10px;font-family:'Satoshi';font-size:0.875rem;color:var(--title);background:#fff;cursor:pointer;">
<option>All templates</option>
<option>Educational</option>
<option>Listicle</option>
<option>Story</option>
</select>
<button class="btn btn-primary" style="font-size:0.875rem;padding:7px 16px;white-space:nowrap;">+ New Script</button>
</div>
</div>
<div class="card" style="overflow:hidden;margin-bottom:20px;">
<div style="display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--primary-light);background:#fafafa;">
<input type="checkbox" style="flex-shrink:0;">
<span style="flex:1;font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-transform:uppercase;letter-spacing:0.05em;">Script</span>
<span style="width:90px;font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-transform:uppercase;letter-spacing:0.05em;">Words</span>
<span style="width:100px;font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-transform:uppercase;letter-spacing:0.05em;">Date</span>
<span style="width:80px;font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-transform:uppercase;letter-spacing:0.05em;">Status</span>
<span style="width:80px;"></span>
</div>
<div style="display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--primary-light);background:#fff;">
<input type="checkbox" style="flex-shrink:0;">
<div style="flex:1;min-width:0;">
<div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;">10 Mistakes New YouTubers Make (And How to Fix Them)</div>
<span style="font-size:0.7rem;font-weight:600;color:var(--primary-color);background:var(--primary-light);padding:1px 7px;border-radius:10px;">Educational</span>
</div>
<span style="width:90px;font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);">1,842</span>
<span style="width:100px;font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);">2 Apr 2026</span>
<span style="width:80px;">
<span style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:2px 8px;border-radius:10px;background:#fef9ee;color:#b45309;">Draft</span>
</span>
<div style="width:80px;display:flex;gap:10px;">
<a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--primary-color);text-decoration:none;">Open</a>
<a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-decoration:none;">Delete</a>
</div>
</div>
<div style="display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--primary-light);background:var(--primary-light);">
<input type="checkbox" checked style="flex-shrink:0;">
<div style="flex:1;min-width:0;">
<div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;">Why Your Thumbnails Aren't Getting Clicks</div>
<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>
<span style="width:90px;font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);">2,104</span>
<span style="width:100px;font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);">28 Mar 2026</span>
<span style="width:80px;">
<span style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:2px 8px;border-radius:10px;background:#f0fdf4;color:#15803d;">Published</span>
</span>
<div style="width:80px;display:flex;gap:10px;">
<a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--primary-color);text-decoration:none;">Open</a>
<a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-decoration:none;">Delete</a>
</div>
</div>
<div style="display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--primary-light);background:var(--primary-light);">
<input type="checkbox" checked style="flex-shrink:0;">
<div style="flex:1;min-width:0;">
<div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;">How I Grew From 0 to 10K Subscribers in 6 Months</div>
<span style="font-size:0.7rem;font-weight:600;color:var(--primary-color);background:var(--primary-light);padding:1px 7px;border-radius:10px;">Story</span>
</div>
<span style="width:90px;font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);">3,210</span>
<span style="width:100px;font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);">21 Mar 2026</span>
<span style="width:80px;">
<span style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:2px 8px;border-radius:10px;background:#f0fdf4;color:#15803d;">Published</span>
</span>
<div style="width:80px;display:flex;gap:10px;">
<a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--primary-color);text-decoration:none;">Open</a>
<a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-decoration:none;">Delete</a>
</div>
</div>
<div style="display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--primary-light);background:#fff;">
<input type="checkbox" style="flex-shrink:0;">
<div style="flex:1;min-width:0;">
<div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;">The Best Camera Gear for Beginner YouTubers 2026</div>
<span style="font-size:0.7rem;font-weight:600;color:var(--primary-color);background:var(--primary-light);padding:1px 7px;border-radius:10px;">Educational</span>
</div>
<span style="width:90px;font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);">1,560</span>
<span style="width:100px;font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);">14 Mar 2026</span>
<span style="width:80px;">
<span style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:2px 8px;border-radius:10px;background:#fef9ee;color:#b45309;">Draft</span>
</span>
<div style="width:80px;display:flex;gap:10px;">
<a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--primary-color);text-decoration:none;">Open</a>
<a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-decoration:none;">Delete</a>
</div>
</div>
<div style="display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--primary-light);background:#fff;">
<input type="checkbox" style="flex-shrink:0;">
<div style="flex:1;min-width:0;">
<div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;">Untitled script</div>
</div>
<span style="width:90px;font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);">304</span>
<span style="width:100px;font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);">1 Apr 2026</span>
<span style="width:80px;">
<span style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:2px 8px;border-radius:10px;background:#fef9ee;color:#b45309;">Draft</span>
</span>
<div style="width:80px;display:flex;gap:10px;">
<a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--primary-color);text-decoration:none;">Open</a>
<a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-decoration:none;">Delete</a>
</div>
</div>
</div>
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;">
<span style="font-family:'Satoshi';font-size:0.8rem;color:var(--paragraph);">Showing 1–10 of 47 scripts</span>
<nav style="display:inline-flex;align-items:center;gap:4px;">
<button style="height:32px;padding:0 10px;border-radius:5px;border:1px solid var(--primary-light);background:#fff;font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);cursor:pointer;">‹ Prev</button>
<button style="width:32px;height:32px;border-radius:5px;border:1px solid var(--primary-color);background:var(--primary-color);font-family:'Satoshi';font-size:0.8125rem;color:#fff;cursor:pointer;font-weight:700;">1</button>
<button style="width:32px;height:32px;border-radius:5px;border:1px solid var(--primary-light);background:#fff;font-family:'Satoshi';font-size:0.8125rem;color:var(--title);cursor:pointer;font-weight:400;">2</button>
<button style="width:32px;height:32px;border-radius:5px;border:1px solid var(--primary-light);background:#fff;font-family:'Satoshi';font-size:0.8125rem;color:var(--title);cursor:pointer;font-weight:400;">3</button>
<button style="width:32px;height:32px;border-radius:5px;border:1px solid var(--primary-light);background:#fff;font-family:'Satoshi';font-size:0.8125rem;color:var(--title);cursor:pointer;font-weight:400;">4</button>
<button style="width:32px;height:32px;border-radius:5px;border:1px solid var(--primary-light);background:#fff;font-family:'Satoshi';font-size:0.8125rem;color:var(--title);cursor:pointer;font-weight:400;">5</button>
<button style="height:32px;padding:0 10px;border-radius:5px;border:1px solid var(--primary-light);background:#fff;font-family:'Satoshi';font-size:0.8125rem;color:var(--title);cursor:pointer;">Next ›</button>
</nav>
</div>
</div>
</div>
</div>
{{! Header is position:fixed, dashaboard-main compensates with margin-top:56px }}
<header class="dashboard-header" style="position:fixed;top:0;left:0;right:0;background:#fff;border-bottom:1px solid var(--primary-light);padding:0 20px;height:56px;display:flex;align-items:center;z-index:20;">
<a href="#" style="display:flex;align-items:center;gap:8px;text-decoration:none;margin-right:auto;">
<img src="https://app.tubespanner.com/themes/custom/tubespanner_purple/images/logo.svg" alt="TubeSpanner" style="height:28px;" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
<strong style="display:none;font-family:'Satoshi';color:var(--primary-color);font-size:1.1rem;">TubeSpanner</strong>
</a>
<div style="display:flex;align-items:center;gap:8px;">
<button class="btn btn-primary" style="display:flex;align-items:center;gap:6px;font-size:0.875rem;padding:6px 14px;">
<span style="font-size:1rem;font-weight:300;">+</span> Create
<span style="border-left:1px solid rgba(255,255,255,0.4);margin-left:4px;padding-left:8px;font-size:0.7rem;">▼</span>
</button>
<div style="width:36px;height:36px;border-radius:50%;background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Satoshi';font-weight:700;font-size:13px;cursor:pointer;">{{userInitials}}</div>
</div>
</header>
<div class="dashaboard-main">
{{! Sidebar }}
<div class="app-sidebar-wrapper">
<div class="app-sidebar" style="border-right:1px solid var(--primary-light);overflow-y:auto;">
<ul class="list-unstyled sidebar-list-item" style="margin:0;padding:6px 0;">
{{#each navGroups}}
<li class="nav-item{{#if this.active}} active{{/if}}">
<a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid {{#if this.active}}var(--primary-color){{else}}transparent{{/if}};background:{{#if this.active}}var(--primary-light){{else}}transparent{{/if}};color:{{#if this.active}}var(--primary-color){{else}}var(--title){{/if}};text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:{{#if this.active}}700{{else}}500{{/if}};">
<span style="width:20px;height:20px;border-radius:4px;background:{{#if this.active}}var(--primary-color){{else}}#e5e7eb{{/if}};flex-shrink:0;margin-right:10px;display:inline-block;"></span>
<span style="flex:1;">{{this.label}}</span>
{{#if this.expandable}}<span style="font-size:0.6rem;color:var(--paragraph);">▼</span>{{/if}}
</a>
</li>
{{/each}}
</ul>
<div style="border-top:1px solid var(--primary-light);padding:12px 14px;margin-top:auto;">
<div style="font-family:'Satoshi';font-size:0.8125rem;font-weight:700;color:var(--title);margin-bottom:2px;">{{userName}}</div>
<div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">{{usageLabel}}</div>
</div>
</div>
</div>
{{! Main content }}
<div class="dashaboard-content" style="background:#f9fafb;overflow-y:auto;min-height:calc(100vh - 56px);">
<div style="padding:20px 24px;">
{{! Page header }}
<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;">
<div style="flex:1;">
<h1 style="font-family:'Satoshi';font-size:1.25rem;font-weight:700;color:var(--title);margin:0 0 2px;">Script Library</h1>
<p style="font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);margin:0;">{{scriptCount}} scripts</p>
</div>
<div style="display:flex;align-items:center;gap:8px;">
{{! Search }}
<div style="display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--primary-light);border-radius:6px;padding:7px 12px;min-width:220px;">
<span style="color:var(--paragraph);font-size:0.875rem;">🔍</span>
<input type="text" placeholder="Search scripts…" value="{{searchQuery}}" style="border:none;outline:none;font-family:'Satoshi';font-size:0.875rem;color:var(--title);background:transparent;flex:1;width:100%;">
</div>
{{! Filter }}
<select style="border:1px solid var(--primary-light);border-radius:6px;padding:7px 28px 7px 10px;font-family:'Satoshi';font-size:0.875rem;color:var(--title);background:#fff;cursor:pointer;">
<option>All templates</option>
<option>Educational</option>
<option>Listicle</option>
<option>Story</option>
</select>
{{! New script }}
<button class="btn btn-primary" style="font-size:0.875rem;padding:7px 16px;white-space:nowrap;">+ New Script</button>
</div>
</div>
{{! Bulk action bar (shown when items selected) }}
{{#if bulkSelected}}
<div style="display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--primary-light);border-radius:6px;padding:10px 16px;margin-bottom:16px;">
<span style="font-family:'Satoshi';font-size:0.875rem;font-weight:600;color:var(--title);">{{bulkSelected}} selected</span>
<button class="btn btn-danger" style="font-size:0.8125rem;padding:5px 14px;">Delete selected</button>
<button class="btn btn-light" style="font-size:0.8125rem;padding:5px 14px;">Deselect all</button>
</div>
{{/if}}
{{! Script list }}
<div class="card" style="overflow:hidden;margin-bottom:20px;">
{{! List header }}
<div style="display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--primary-light);background:#fafafa;">
<input type="checkbox" style="flex-shrink:0;">
<span style="flex:1;font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-transform:uppercase;letter-spacing:0.05em;">Script</span>
<span style="width:90px;font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-transform:uppercase;letter-spacing:0.05em;">Words</span>
<span style="width:100px;font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-transform:uppercase;letter-spacing:0.05em;">Date</span>
<span style="width:80px;font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-transform:uppercase;letter-spacing:0.05em;">Status</span>
<span style="width:80px;"></span>
</div>
{{! Script rows }}
{{#each scripts}}
<div style="display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--primary-light);background:{{#if this.selected}}var(--primary-light){{else}}#fff{{/if}};">
<input type="checkbox" {{#if this.selected}}checked{{/if}} style="flex-shrink:0;">
<div style="flex:1;min-width:0;">
<div style="font-family:'Satoshi';font-size:0.875rem;font-weight:700;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;">{{this.title}}</div>
{{#if this.template}}<span style="font-size:0.7rem;font-weight:600;color:var(--primary-color);background:var(--primary-light);padding:1px 7px;border-radius:10px;">{{this.template}}</span>{{/if}}
</div>
<span style="width:90px;font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);">{{this.wordCount}}</span>
<span style="width:100px;font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);">{{this.date}}</span>
<span style="width:80px;">
<span style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:2px 8px;border-radius:10px;background:{{this.statusBg}};color:{{this.statusColor}};">{{this.status}}</span>
</span>
<div style="width:80px;display:flex;gap:10px;">
<a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--primary-color);text-decoration:none;">Open</a>
<a href="#" style="font-family:'Satoshi';font-size:0.75rem;font-weight:700;color:var(--paragraph);text-decoration:none;">Delete</a>
</div>
</div>
{{/each}}
</div>
{{! Pagination }}
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;">
<span style="font-family:'Satoshi';font-size:0.8rem;color:var(--paragraph);">Showing {{showingFrom}}–{{showingTo}} of {{scriptCount}} scripts</span>
<nav style="display:inline-flex;align-items:center;gap:4px;">
<button style="height:32px;padding:0 10px;border-radius:5px;border:1px solid var(--primary-light);background:#fff;font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);cursor:pointer;">‹ Prev</button>
{{#each pages}}
<button style="width:32px;height:32px;border-radius:5px;border:1px solid {{#if this.active}}var(--primary-color){{else}}var(--primary-light){{/if}};background:{{#if this.active}}var(--primary-color){{else}}#fff{{/if}};font-family:'Satoshi';font-size:0.8125rem;color:{{#if this.active}}#fff{{else}}var(--title){{/if}};cursor:pointer;font-weight:{{#if this.active}}700{{else}}400{{/if}};">{{this.label}}</button>
{{/each}}
<button style="height:32px;padding:0 10px;border-radius:5px;border:1px solid var(--primary-light);background:#fff;font-family:'Satoshi';font-size:0.8125rem;color:var(--title);cursor:pointer;">Next ›</button>
</nav>
</div>
</div>
</div>
</div>
{
"userInitials": "FK",
"userName": "Fluffy Kiwi",
"usageLabel": "Pro plan",
"searchQuery": "",
"scriptCount": 47,
"showingFrom": 1,
"showingTo": 10,
"bulkSelected": 0,
"navGroups": [
{
"label": "Dashboard",
"active": false
},
{
"label": "Ideas",
"active": true,
"expandable": true
},
{
"label": "Discover",
"active": false,
"expandable": true
},
{
"label": "Plan",
"active": false,
"expandable": true
},
{
"label": "Projects",
"active": false,
"expandable": true
},
{
"label": "Growth",
"active": false,
"expandable": true
},
{
"label": "Settings",
"active": false
}
],
"scripts": [
{
"title": "10 Mistakes New YouTubers Make (And How to Fix Them)",
"template": "Educational",
"wordCount": "1,842",
"date": "2 Apr 2026",
"status": "Draft",
"statusBg": "#fef9ee",
"statusColor": "#b45309",
"selected": false
},
{
"title": "Why Your Thumbnails Aren't Getting Clicks",
"template": "Listicle",
"wordCount": "2,104",
"date": "28 Mar 2026",
"status": "Published",
"statusBg": "#f0fdf4",
"statusColor": "#15803d",
"selected": true
},
{
"title": "How I Grew From 0 to 10K Subscribers in 6 Months",
"template": "Story",
"wordCount": "3,210",
"date": "21 Mar 2026",
"status": "Published",
"statusBg": "#f0fdf4",
"statusColor": "#15803d",
"selected": true
},
{
"title": "The Best Camera Gear for Beginner YouTubers 2026",
"template": "Educational",
"wordCount": "1,560",
"date": "14 Mar 2026",
"status": "Draft",
"statusBg": "#fef9ee",
"statusColor": "#b45309",
"selected": false
},
{
"title": "Untitled script",
"template": null,
"wordCount": "304",
"date": "1 Apr 2026",
"status": "Draft",
"statusBg": "#fef9ee",
"statusColor": "#b45309",
"selected": false
}
],
"pages": [
{
"label": "1",
"active": true
},
{
"label": "2",
"active": false
},
{
"label": "3",
"active": false
},
{
"label": "4",
"active": false
},
{
"label": "5",
"active": false
}
]
}
List view of all saved scripts for a channel. Supports search, template filtering, bulk selection and delete. Free: 1/mo, Core: 2/mo, Pro: 50/mo scripts. Appears in: /dashboard/script-library.