TubeSpanner Style Guide

Script Library: Bulk selection active 

<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;">&#9660;</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);">&#9660;</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);">&#9660;</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);">&#9660;</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);">&#9660;</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);">&#9660;</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 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);">2 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>

            <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&#x27;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>

            <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;">&#9660;</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);">&#9660;</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": 2,
  "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
    }
  ],
  "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.