{{template "head" .}}
{{template "topbar" .}}
<div class="deck">
  <div class="pane-l-col">
    <div class="float pane-l-head">
      <div class="editor-head">
        <div class="editor-head-title">
          <input id="title" placeholder="Title">
        </div>
        <div class="editor-head-settings">
        <select id="language">
          <option value="">auto</option>
          <option>go</option><option>python</option><option>javascript</option><option>typescript</option>
          <option>rust</option><option>c</option><option>cpp</option><option>java</option><option>csharp</option>
          <option>bash</option><option>sql</option><option>yaml</option><option>json</option>
          <option>html</option><option>css</option><option>xml</option><option>php</option>
          <option>ruby</option><option>perl</option><option>lua</option><option>dockerfile</option>
          <option>toml</option><option>ini</option><option>diff</option>
          <option>markdown</option><option>text</option>
        </select>
        <button class="btn btn-icon" id="reguess" title="Re-detect language" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><polyline points="21 3 21 9 15 9"/></svg></button>
        <button type="button" class="btn btn-icon wrap-toggle" id="wrap-toggle" title="Toggle line wrap" aria-pressed="false">Wrap</button>
        </div>
      </div>
    </div>
    <div class="float editor-wrap">
      <div class="gutter" id="gutter">1</div>
      <textarea class="editor" id="content" placeholder="Paste your code, text, or notes here…" spellcheck="false"></textarea>
      <img id="file-preview" class="file-preview hidden" alt="File preview">
    </div>
    <div class="actionbar">
      <span class="hint">Ctrl+Enter to create</span>
      <div class="spacer spacer-flex"></div>
      <button class="btn" id="create">Create</button>
    </div>
    <div class="jumpnav hidden" id="jumpnav" data-jump-scroll="#content">
      <button type="button" class="btn jump-btn" data-jump="top">Top</button>
      <button type="button" class="btn jump-btn" data-jump="bottom">Bottom</button>
    </div>
  </div>

  <div class="pane-r">
    <div class="float side-section">
      <h3>Expiry</h3>
      <div class="seg">
        <label><input type="radio" name="exp" value=""> Never</label>
        <label><input type="radio" name="exp" value="1h"> 1 hour</label>
        <label><input type="radio" name="exp" value="24h"> 1 day</label>
        <label><input type="radio" name="exp" value="168h" checked> 1 week</label>
        <label><input type="radio" name="exp" value="720h"> 30 days</label>
        <label><input type="radio" name="exp" value="custom"> Custom</label>
      </div>
      <div class="pw-row submenu hidden" id="customexp-row">
        <div class="exp-group">
          <input type="number" class="num-input" id="expnum" min="1" placeholder="90" aria-label="Custom expiry amount">
          <select id="expunit" class="unit-select">
            <option value="m">minutes</option>
            <option value="h" selected>hours</option>
            <option value="d">days</option>
            <option value="w">weeks</option>
            <option value="mo">months</option>
          </select>
        </div>
        <div class="hint danger-hint hidden" id="customexp-err"></div>
      </div>
    </div>
    <div class="float side-section">
      <h3>Protection</h3>
      <div class="protect">
        <label class="toggle"><input type="checkbox" id="haspw"> Password lock</label>
        <div class="pw-row hidden" id="pwrow"><div class="pw-field"><input type="password" id="password" placeholder="Password" autocomplete="new-password"><button type="button" class="reveal" id="pwreveal" title="Show password" tabindex="-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/><line class="eye-slash" x1="4" y1="4" x2="20" y2="20"/></svg></button></div></div>
        <label class="toggle"><input type="checkbox" id="burn"> Burn after read</label>
        <div class="pw-row submenu hidden" id="burnrow"><div class="exp-group readable-group"><label class="hint readable-label">Readable</label><input type="number" class="num-input" id="burnreads" min="1" value="1" aria-label="Times readable"><label class="hint readable-label">times</label></div></div>
        <label class="toggle"><input type="checkbox" id="unlisted"> Unlisted</label>
      </div>
    </div>
    <div class="float side-section">
      <h3>Attachment</h3>
      <div class="dropzone" id="dropzone" title="Paste (Ctrl+V), drop a file here, or click to browse">
        Drop a file here, press Ctrl+V, or click to browse
      </div>
      <input type="file" id="file-input" class="file-input" aria-label="Choose a file">
      <div id="file-chip-slot"></div>
      <div class="hint hint-lg hidden mt6" id="file-text-note">File pastes ignore the text editor (one file per paste)</div>
    </div>
    <div class="float side-section">
      <h3>Custom URL</h3>
      <input type="text" id="custom" class="custom-input" placeholder="my-snippet">
    </div>
    <div class="float side-section hidden" id="result-card">
      <h3>Result</h3>
      <div class="hint wrap-normal" id="result">empty</div>
    </div>
  </div>
</div>
<script src="/static/new.js" defer></script>
<script src="/static/jump.js" defer></script>
{{template "foot" .}}