Schematics
SCHEMATICS
<section class="rise flex flex-wrap items-end justify-between gap-3">
    <h1 class="text-3xl font-medium tracking-tight md:text-4xl">Schematics</h1>
    <a href="/api/schematics/upload/"
       class="inline-flex h-9 items-center gap-1.5 rounded-full bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/85">
        <svg class="size-3.5" aria-hidden="true"><use href="#i-upload"/></svg>
        Upload
    </a>
</section>

<section class="rise rise-1 mt-6">
    <label class="ring-card relative flex h-10 w-full items-center gap-2 rounded-full bg-card px-3 transition-colors focus-within:bg-background focus-within:ring-2 focus-within:ring-ring/30 sm:max-w-md">
        <svg class="size-4 text-muted-foreground" aria-hidden="true"><use href="#i-search"/></svg>
        <input id="schem-filter"
               type="text"
               oninput="filterTable(this.value)"
               placeholder="Filter schematics..."
               class="h-full flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
               autocomplete="off">
    </label>
</section>

<section class="rise rise-2 ring-card mt-4 overflow-hidden rounded-2xl bg-card">
    <table id="schemList" class="w-full text-sm">
        <thead class="border-b border-border/60 bg-muted/40">
            <tr>
                <th scope="col" class="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground">Name</th>
                <th scope="col" class="px-4 py-2.5 text-right text-xs font-medium text-muted-foreground">Size</th>
                <th scope="col" class="w-8"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-border/60" translate="no">
${schematics}
        </tbody>
    </table>
</section>

<script>
    const schemList = document.getElementById('schemList').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    function filterTable(query) {
        const q = (query || '').toLowerCase();
        for (let i = 0; i < schemList.length; i++) {
            const name = (schemList[i].getAttribute('data-name') || '').toLowerCase();
            schemList[i].style.display = !q || name.includes(q) ? '' : 'none';
        }
    }
</script>