{{define "content"}}
{{$p := .Data.Profile}}
<h3 class="rule">Edit your profile</h3>
<p class="muted small">Disk usage {{size .Data.Used}}{{if .Data.Quota}} of {{size .Data.Quota}}{{end}}.</p>
<form method="post" action="/settings/avatar" enctype="multipart/form-data" class="avatarform" id="avatarform">
<div class="avatarbox">{{if $p.Avatar}}<img class="avatar" src="/~{{.User.Name}}/avatar?v={{$p.Avatar}}" alt="">{{end}}</div>
<div>
<label>Choose an avatar <input type="file" name="avatar" accept="image/png,image/jpeg,image/gif,image/webp" required></label>
<small>If the image is not square you can pick the crop below. It is resized to 256×256 and stored as PNG.</small>
<div class="cropper" hidden><canvas></canvas><input type="range" min="10" max="100" value="100"><small>Drag to move the square, scroll or slide to resize.</small></div>
<input type="hidden" name="x"><input type="hidden" name="y"><input type="hidden" name="size">
<div class="actions left"><button class="btn">Upload avatar ▸</button>{{if $p.Avatar}}<button class="btn danger" formaction="/settings/avatar/delete" formnovalidate>Remove</button>{{end}}</div>
</div>
</form>
<script src="/static/crop.js" defer></script>
<form method="post" action="/settings/profile" class="stack wide">
<div class="pair">
<label>Username <span class="muted">(you can't edit this)</span><input value="{{.User.Name}}" disabled></label>
<label>Name <input name="display" value="{{$p.Display}}" maxlength="100" placeholder="Shown on your profile"></label>
</div>
<div class="pair">
<label>Location <input name="location" value="{{$p.Location}}" maxlength="100"></label>
<label>Workplace <input name="workplace" value="{{$p.Workplace}}" maxlength="100"></label>
</div>
<label>URL <input name="website" value="{{$p.Website}}" maxlength="200" placeholder="https://"></label>
<label>Bio <textarea name="bio" rows="6" maxlength="4000" placeholder="Markdown supported">{{$p.Bio}}</textarea></label>
<div class="actions"><button class="btn primary">Save changes ▸</button></div>
</form>
{{end}}