{% extends "base.html" %}
{% block title %}Browser app · Pastable{% endblock %}
{% block gui_nav %}aria-current="page"{% endblock %}
{% block content %}
<div class="workspace-heading">
    <div>
        <p class="eyebrow">YOUR SHARING WORKSPACE</p>
        <h1>Pastes, links &amp; secrets.</h1>
        <p class="muted">A little space for things you want to pass along.</p>
    </div>
    <span id="session-label" class="badge">Anonymous</span>
</div>

<details id="account" class="card account">
    <summary>Account <span class="muted">· optional</span></summary>
    <form id="login-form">
        <p class="muted">Sign in to manage your shares. A new username creates an account.</p>
        <div class="form-grid">
            <label>Username<input id="username" autocomplete="username" required pattern="[^:]+" maxlength="128"></label>
            <label>Password<input id="password" type="password" autocomplete="current-password" required></label>
        </div>
        <div class="actions">
            <button type="submit">Sign in / create account</button>
            <button id="logout" type="button" class="secondary" hidden>Sign out</button>
        </div>
        <p class="hint">Your credentials stay in memory for this page only.</p>
    </form>
</details>

<p id="status" class="status" role="status" aria-live="polite" tabindex="-1" hidden></p>

<nav class="workspace-tabs" aria-label="Workspace">
    <a href="#compose" data-panel="compose" aria-current="page">Create a share</a>
    <a href="#collection" data-panel="collection">My collection <span id="note-count" class="count">0</span></a>
    <a href="#open" data-panel="open">Open a share</a>
</nav>

<section id="compose" class="panel" aria-labelledby="editor-title">
    <div class="editor-layout">
        <div class="card">
            <div class="section-heading">
                <h2 id="editor-title">Create a share</h2>
                <button id="new-note" type="button" class="secondary" hidden>Cancel editing</button>
            </div>
            <form id="editor-form">
                <div class="form-grid">
                    <label>What are you sharing?
                        <select id="kind"><option value="note">Text or code</option><option value="url">Short link</option></select>
                    </label>
                    <label>Custom ID <span class="muted">· optional</span>
                        <input id="custom-id" placeholder="Generate one for me" pattern="[^/]+" autocomplete="off">
                    </label>
                </div>
                <label><span id="content-label">Your text or code</span>
                    <textarea id="content" rows="15" spellcheck="false" placeholder="Paste something worth sharing…" required></textarea>
                </label>
                <div id="language-field">
                    <label>Language <span class="muted">· optional</span>
                        <select id="language">
                            <option value="">Auto detect</option>
                            <option value="text">Plain text</option>
                            {% for language in languages %}
                            <option value="{{ language }}">{{ language }}</option>
                            {% endfor %}
                        </select>
                    </label>
                </div>
                <p id="edit-hint" class="hint" hidden></p>
                <div class="actions editor-actions">
                    <button id="save" type="submit">Create share</button>
                    <span id="ownership-hint" class="hint">Shared anonymously.</span>
                </div>
            </form>
        </div>
        <aside class="card options" aria-labelledby="options-title">
            <p class="eyebrow">MAKE IT YOURS</p>
            <h2 id="options-title">Share settings</h2>
            <label>Expires after <span class="muted">· seconds</span>
                <input id="expires" form="editor-form" type="number" min="0" step="1" placeholder="Never">
            </label>
            <label>Maximum views
                <input id="max-views" form="editor-form" type="number" min="1" step="1" placeholder="Unlimited">
            </label>
            <label id="once-field" class="check-label">
                <input id="once" form="editor-form" type="checkbox"> One-time secret
            </label>
            <p class="hint">One-time shares disappear after their first read. A link's views count its redirects.</p>
            <hr>
            <p class="hint">If a custom ID is taken, you'll get a fresh one. Always use the link returned after saving.</p>
        </aside>
    </div>
    <section id="share-result" class="card result" aria-labelledby="result-title" hidden>
        <p class="eyebrow">READY TO SHARE</p>
        <h2 id="result-title">Your link</h2>
        <div class="copy-row">
            <input id="share-url" aria-label="Share URL" readonly>
            <button id="copy-url" type="button" class="secondary">Copy link</button>
        </div>
        <p><a id="share-link" target="_blank" rel="noopener noreferrer">Open share ↗</a> <span class="hint">Opening counts as a view.</span></p>
    </section>
</section>

<section id="collection" class="panel card" aria-labelledby="collection-title" hidden>
    <div class="section-heading">
        <div><h2 id="collection-title">My collection</h2><p class="hint">Editing here does not count as a view.</p></div>
        <button id="refresh" type="button" class="secondary">Refresh</button>
    </div>
    <label class="search-label">Filter shares<input id="search" type="search" placeholder="Find by ID, content or language…"></label>
    <div id="collection-empty" class="empty-state">Sign in to see and manage your shares.</div>
    <div id="collection-table" class="table-scroll" hidden>
        <table>
            <thead><tr><th scope="col">Share</th><th scope="col">Content</th><th scope="col">Views</th><th scope="col">Created</th><th scope="col">Updated</th><th scope="col">Expires</th><th scope="col">Actions</th></tr></thead>
            <tbody id="note-rows"></tbody>
        </table>
    </div>
</section>

<section id="open" class="panel card" aria-labelledby="open-title" hidden>
    <h2 id="open-title">Open a share</h2>
    <p class="muted">Have an ID or a Pastable link? Open it here.</p>
    <form id="open-form">
        <label>ID or share URL<input id="open-id" placeholder="my-paste or a full share URL" required autocomplete="off"></label>
        <div class="form-grid">
            <label>Type<select id="open-kind"><option value="note">Text or code</option><option value="url">Short link</option></select></label>
            <label id="format-field">Display<select id="open-format"><option value="html">Syntax highlighted</option><option value="plain">Plain text</option></select></label>
        </div>
        <button type="submit" id="open-submit">Open paste</button>
        <p class="hint">Opening a paste or following a link counts as a view. Short links open in a new tab.</p>
    </form>
    <div id="preview" class="preview" aria-live="polite" hidden></div>
</section>
<noscript><p class="status">Enable JavaScript to use the browser app. The HTTP API remains available.</p></noscript>
<script src="/static/gui.js" defer></script>
{% endblock %}