{{ define "content" }}
<link rel="stylesheet" href="/static/css/blob.css">
<script src="/static/js/time.js" defer></script>
{{if and .loggedIn (eq .Gist.User.ID .user.ID)}}
<div class="owner-actions">
    <a href="/gist/{{.Gist.ID}}/edit" id="edit">Edit.</a>
    <form action="/gist/{{.Gist.ID}}/delete" method="post" class="non-chalant">
        {{.csrfField}}
        <button type="submit" id="delete" error>DELETE.</button>
    </form>
</div>
{{end}}
<div class="blob">
    <div class="title">
        <span><a href="/~{{.Gist.User.Handle}}">~{{.Gist.User.Handle}}</a> - {{.Gist.Title}}</span>
        <time class="local-time" datetime="{{ .CreatedAtUTC }}" class="right">{{ .CreatedAtUTC }}</time>
    </div>
    <pre><code>{{range SplitLines .Gist.Content}}<span>{{.}}</span>{{end}}</code></pre>
</div>

<style>
    .owner-actions {
        display: flex;
        flex-direction: row;
        gap: var(--gap);
        margin-bottom: var(--gap);

        #edit {
            background-color: var(--warning);
            color: var(--bg-col);
            padding: var(--gap);
        }

        #delete {
            padding: var(--gap);
            width: min-content;
        }
    }
</style>

{{ end }}