{{define "title"}}Images · {{.Blog.Title}}{{end}}
{{define "content"}}
<div class="pagehead">
  <h1>Images</h1>
  <p class="lead muted">Images are stored with your blog. Put one in a post with <em>Insert image</em> in the editor, or copy its line from below.</p>
</div>
<div class="card">
  <form method="post" action="/b/{{.Blog.Subdomain}}/images/upload" enctype="multipart/form-data">
    <input type="hidden" name="_csrf" value="{{.CSRF}}">
    <label>Upload an image <span class="muted">(PNG, JPEG, GIF or WebP)</span><br><input type="file" name="file" accept="image/*" required></label>
    <p class="actionrow"><button type="submit">Upload</button></p>
  </form>
</div>
<div class="gallery">
{{range .Data.images}}
  <div class="card thumb">
    <a href="/media/{{.ID}}" target="_blank"><img src="/media/{{.ID}}" alt="{{.Filename}}"></a>
    <div class="meta">{{.Filename}} <span class="muted">({{kb .Size}})</span></div>
    <input class="copy" readonly value="![{{.Filename}}](/media/{{.ID}})" onclick="this.select()">
    <form method="post" action="/b/{{$.Blog.Subdomain}}/images/{{.ID}}/delete" class="inline"><input type="hidden" name="_csrf" value="{{$.CSRF}}"><button class="mini danger">delete</button></form>
  </div>
{{else}}<p class="muted">No images yet.</p>{{end}}
</div>
{{end}}