{{define "title"}}{{t "Images"}} · {{.Blog.Title}}{{end}}
{{define "content"}}
<div class="pagehead">
  <h1>{{t "Images"}}</h1>
  <p class="lead muted">{{t "Images are stored with your blog. Put one in a post with"}} <em>{{t "Insert image"}}</em> {{t "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>{{t "Upload an image"}} <span class="muted">({{t "PNG, JPEG, GIF, WebP or ICO"}})</span><br><input type="file" name="file" accept="image/*" required></label>
    <p class="actionrow"><button type="submit">{{t "Upload"}}</button></p>
  </form>
</div>
<div class="gallery">
{{range .Data.images}}
  <div class="card thumb">
    <a href="/b/{{$.Blog.Subdomain}}/media/{{.ID}}" target="_blank"><img src="/b/{{$.Blog.Subdomain}}/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">{{t "delete"}}</button></form>
  </div>
{{else}}<p class="muted">{{t "No images yet."}}</p>{{end}}
</div>
{{end}}