{{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"><img class="avatar" src="/~{{.User.Name}}/avatar?v={{$p.Avatar}}" alt=""></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?v={{$.Version}}" defer></script>
<h3 class="rule">Email</h3>
<form method="post" action="/settings/email" class="stack wide">
<label>Email address{{if .Data.Account.Email}}{{if .Data.Account.Verified}} <span class="muted">(verified)</span>{{else}} <span class="muted">(not verified yet)</span>{{end}}{{end}} <input name="email" type="email" value="{{.Data.Account.Email}}" placeholder="you@example.org"></label>
<small>Used for password resets and notifications about your repositories and pull requests. Never shown publicly.{{if not .Data.Mail}} Mail is not configured on this server yet, so verification cannot be sent.{{end}}</small>
{{if .Data.Sent}}<p class="notice">Verification mail sent, open the link in it to confirm.</p>{{end}}
<div class="actions left"><button class="btn primary">{{if .Data.Account.Verified}}Change email ▸{{else}}Save and send verification ▸{{end}}</button></div>
</form>
<form method="post" action="/settings/notify" class="stack wide">
<label class="check"><input type="checkbox" name="notify"{{if .Data.Account.Notify}} checked{{end}}> Email me about pull requests, reviews and issues on my repositories</label>
<div class="actions left"><button class="btn">Save ▸</button></div>
</form>
<h3 class="rule">Profile</h3>
<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>
<fieldset class="links"><legend>URLs</legend>{{range $i, $l := $p.LinkSlots}}<input name="website" value="{{$l}}" maxlength="200" placeholder="https://" aria-label="Link">{{end}}</fieldset>
<label>Bio <textarea name="bio" rows="6" maxlength="4000" placeholder="Markdown supported, paste or drop images to attach them" data-md>{{$p.Bio}}</textarea></label>
<div class="actions"><button class="btn primary">Save changes ▸</button></div>
</form>
{{end}}