{{define "content"}}
{{$p := .Data.Profile}}
{{$o := .Data.Org}}
<h3 class="rule">Edit <a href="/~{{$o.Name}}">~{{$o.Name}}</a></h3>
<form method="post" action="/settings/avatar" enctype="multipart/form-data" class="avatarform" id="avatarform">
<input type="hidden" name="org" value="{{$o.Name}}">
<div class="avatarbox org"><img class="avatar" src="/~{{$o.Name}}/avatar?v={{$p.Avatar}}" alt=""></div>
<div>
<label>Choose a picture <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 picture ▸</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">Profile</h3>
<form method="post" action="/settings/profile" class="stack wide">
<input type="hidden" name="org" value="{{$o.Name}}">
<div class="pair">
<label>Handle <span class="muted">(you can't edit this)</span><input value="{{$o.Name}}" disabled></label>
<label>Name <input name="display" value="{{$p.Display}}" maxlength="100" placeholder="Shown on the organization page"></label>
</div>
<div class="pair">
<label>Location <input name="location" value="{{$p.Location}}" maxlength="100"></label>
<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>
</div>
<label>Bio <textarea name="bio" rows="5" 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>
<h3 class="rule">Members</h3>
<p class="muted small">Members can push to, configure and create repositories under ~{{$o.Name}}, and edit this page.</p>
<ul class="memberlist">{{range .Data.Members}}<li><a href="/~{{.Name}}">{{with .Profile.Display}}{{.}} {{end}}<span class="muted">~{{.Name}}</span></a><form method="post" action="/~{{$o.Name}}/members"><input type="hidden" name="name" value="{{.Name}}"><button class="btn danger small" name="remove" value="1">Remove</button></form></li>{{end}}</ul>
<form method="post" action="/~{{$o.Name}}/members" class="inline">
<input name="name" placeholder="username" required> <button class="btn">Add member ▸</button>
</form>
{{end}}