{{define "title"}}Images · {{.Blog.Title}}{{end}}
{{define "content"}}
<h1>Images</h1>
<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>
    <button type="submit">Upload</button>
  </form>
</div>
<p class="muted">To put an image in a post, copy its Markdown line into the post text.</p>
<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}}