<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        
        <link
            rel="shortcut icon"
            href="favicon.svg"
            sizes="any"
            type="image/svg+xml"
        />
    <link rel="stylesheet" crossorigin href="../../layout-2shbnhzm.css"><script type="module" crossorigin src="../../layout-bcaa1gtp.js"></script></head>
    <body class="size-full flex flex-row bg-slate-100">
        <aside
            class="flex flex-col border-r border-slate-400 bg-slate-200 shadow-md"
        >
            <header
                class="bg-white text-black flex flex-row items-center justify-start h-12 px-4 py-2 border-b border-slate-400 shadow-md"
            >
                <img src="../../slidesk-qmhvnw8s.svg" class="w-8 h-8" alt="SliDesk Studio" />
                <p class="font-bold pl-4">Studio</p>
            </header>
            <section id="previews" class="grow overflow-y-scroll"></section>
        </aside>
        <main class="grow flex flex-col">
            <header
                class="h-12 bg-white border-b border-slate-400 shadow-md flex flex-row justify-between items-center px-2"
            >
                <label class="mx-2 text-xs text-black">
                    Classes:
                    <input
                        id="classes"
                        class="ml-2 border-b h-8 w-48 text-black"
                    />
                </label>
                <div>
                    <button
                        id="add-heading"
                        class="bg-blue-500 hover:bg-blue-600 text-white font-medium px-5 py-2 rounded-md transition-colors cursor-pointer disabled:opacity-25 disabled:cursor-default"
                        type="button"
                        disabled
                    >
                        <i class="ti ti-heading"></i>
                    </button>
                    <button
                        id="add-paragraph"
                        class="bg-blue-500 hover:bg-blue-600 text-white font-medium px-5 py-2 rounded-md transition-colors cursor-pointer disabled:opacity-25 disabled:cursor-default"
                        type="button"
                        disabled
                    >
                        <i class="ti ti-pilcrow"></i>
                    </button>
                    <button
                        id="add-image"
                        class="bg-blue-500 hover:bg-blue-600 text-white font-medium px-5 py-2 rounded-md transition-colors cursor-pointer disabled:opacity-25 disabled:cursor-default"
                        type="button"
                        disabled
                    >
                        <i class="ti ti-photo"></i>
                    </button>
                    <button
                        id="add-variable"
                        class="bg-blue-500 hover:bg-blue-600 text-white font-medium px-5 py-2 rounded-md transition-colors cursor-pointer disabled:opacity-25 disabled:cursor-default"
                        type="button"
                        disabled
                    >
                        <i class="ti ti-variable"></i>
                    </button>
                </div>
            </header>
            <section
                id="workbench"
                class="grow flex items-center justify-center shadow-lg"
            ></section>
            <footer
                class="h-12 bg-white border-t border-slate-400 shadow-md text-xs flex flex-row justify-between items-center px-2"
            >
                <button
                    id="toggle-notes"
                    class="bg-blue-500 hover:bg-blue-600 text-white font-medium px-5 py-2 rounded-md transition-colors cursor-pointer disabled:opacity-25 disabled:cursor-default"
                    type="button"
                    disabled
                >
                    <i class="ti ti-pencil"></i>
                    Notes
                </button>
            </footer>
        </main>
        <div
            id="image-modal"
            class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50 text-black"
        >
            <div class="bg-white rounded-lg p-6 min-w-[400px] shadow-xl">
                <p class="text-lg font-bold mb-4">Insert Image</p>
                <input
                    id="img-src"
                    class="w-full mb-2"
                    type="file"
                    accept="image/*"
                />
                <div class="flex gap-2 mb-2">
                    <input
                        id="img-width"
                        class="w-1/2 border rounded px-2 py-1"
                        placeholder="Width"
                    />
                    <input
                        id="img-height"
                        class="w-1/2 border rounded px-2 py-1"
                        placeholder="Height"
                    />
                </div>
                <input
                    id="img-alt"
                    class="w-full border rounded px-2 py-1 mb-2"
                    placeholder="Alt text"
                />
                <input
                    id="img-caption"
                    class="w-full border rounded px-2 py-1 mb-2"
                    placeholder="Caption"
                />
                <label class="flex items-center gap-2 mb-4 text-sm">
                    <input id="img-hide-caption" type="checkbox" />
                    Hide caption
                </label>
                <div class="flex justify-end gap-2">
                    <button
                        id="img-cancel"
                        class="px-4 py-2 rounded bg-slate-200 hover:bg-slate-300 cursor-pointer"
                    >
                        Cancel
                    </button>
                    <button
                        id="img-insert"
                        class="px-4 py-2 rounded bg-blue-500 hover:bg-blue-600 text-white cursor-pointer"
                    >
                        Insert
                    </button>
                </div>
            </div>
        </div>
        <div
            id="var-modal"
            class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50 text-black"
        >
            <div class="bg-white rounded-lg p-6 min-w-[320px] shadow-xl">
                <p class="text-lg font-bold mb-4">Insert Variable</p>
                <select
                    id="var-select"
                    class="w-full border rounded px-2 py-1 mb-3"
                >
                    <option value="">-- Select existing --</option>
                </select>
                <input
                    id="var-input"
                    class="w-full border rounded px-2 py-1 mb-4"
                    placeholder="Or type a new variable name"
                />
                <div class="flex justify-end gap-2">
                    <button
                        id="var-cancel"
                        class="px-4 py-2 rounded bg-slate-200 hover:bg-slate-300 cursor-pointer"
                    >
                        Cancel
                    </button>
                    <button
                        id="var-insert"
                        class="px-4 py-2 rounded bg-blue-500 hover:bg-blue-600 text-white cursor-pointer"
                    >
                        Insert
                    </button>
                </div>
            </div>
        </div>
        
    </body>
</html>
