{{ define "content" }}
<nav id="nav">
    <div class="nav-left">
        <a href="/" class="title">pastebin</a>
        <a href="https://github.com/skidoodle/pastebin" class="nav-btn secondary source-link" target="_blank"
            rel="noopener">Source</a>
    </div>
    <div class="nav-right">
        {{ if .IsPreview }}
        <div id="metadata">
            <a href="/" class="nav-btn secondary">New</a>
            <a href="/raw/{{ .ID }}" class="nav-btn secondary">Raw</a>
            <span class="meta-item">{{ .TimeAgo }}</span>
            <span class="meta-separator">/</span>
            <span class="meta-item">{{ .LineCount }} lines</span>
        </div>
        {{ else }}
        <button id="save-button" class="nav-btn primary" onclick="document.getElementById('paste-form').submit()">Save
            Paste</button>
        {{ end }}
    </div>
</nav>

<main>
    {{ if .IsPreview }}
    <div id="paste-content" class="content-wrapper" style="--digits: {{ .GutterSize }};">
        <div id="line-numbers" class="line-numbers" aria-hidden="true"></div>
        <pre><code id="code-block" data-line-count="{{ .LineCount }}">{{ .Content }}</code></pre>
    </div>
    {{ else }}
    <div class="content-wrapper">
        {{ if .Error }}
        <div class="error-banner">
            {{ .Error }}
        </div>
        {{ end }}
        <form id="paste-form" action="/" method="post">
            <label for="content-editor" class="sr-only">Paste Content</label>
            <textarea id="content-editor" name="content" placeholder="Paste something interesting here..." autofocus
                autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">{{ .Content }}</textarea>
        </form>
    </div>
    {{ end }}
    <script src="/static/script.js"></script>
</main>
{{ end }}