{{define "roles_editor"}}
<div id="roles-editor">
  <form hx-put="/accounts/{{.Account.UUID}}/roles"
        hx-target="#roles-editor"
        hx-swap="outerHTML">
    <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
    <div class="d-flex gap-1 align-center" style="flex-wrap:wrap;margin-bottom:.75rem">
      {{range .AllRoles}}
      <label style="display:flex;align-items:center;gap:.35rem;font-size:.875rem;cursor:pointer">
        <input type="checkbox" name="roles" value="{{.}}"
               {{if hasRole $.Roles .}}checked{{end}}>
        {{.}}
      </label>
      {{end}}
    </div>
    <div style="margin-bottom:.75rem">
      <label style="font-size:.875rem;font-weight:600;display:block;margin-bottom:.25rem">Custom role</label>
      <div class="d-flex gap-1">
        <input class="form-control" type="text" name="custom_role" placeholder="e.g. editor"
               style="max-width:200px;font-size:.875rem">
        <span class="text-muted text-small" style="align-self:center">(optional)</span>
      </div>
    </div>
    <button class="btn btn-sm btn-primary" type="submit">Save Roles</button>
  </form>
</div>
{{end}}