{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings organization")}}
	<div class="user-setting-content">
		<h4 class="ui top attached header">
			{{ctx.Locale.Tr "settings.orgs"}}
			{{if .SignedUser.CanCreateOrganization}}
			<div class="ui right">
				<a class="ui primary tiny button" href="{{AppSubUrl}}/org/create">{{ctx.Locale.Tr "admin.orgs.new_orga"}}</a>
			</div>
			{{end}}
		</h4>
		<div class="ui attached segment orgs">
			{{if .Orgs}}
				<div class="flex-list">
					{{range .Orgs}}
					<div class="flex-item">
						<div class="flex-item-leading">
							{{ctx.AvatarUtils.Avatar . 28 "mini"}}
						</div>
						<div class="flex-item-main">
							<div class="flex-item-title">{{template "shared/user/name" .}}</div>
							<div class="flex-text-body">
								{{.Description}}
							</div>
						</div>
						<div class="flex-item-trailing">
							<form>
								{{$.CsrfTokenHtml}}
								<button class="ui red button delete-button" data-modal-id="leave-organization"
												data-url="{{.OrganisationLink}}/members/action/leave" data-datauid="{{$.SignedUser.ID}}"
												data-name="{{$.SignedUser.DisplayName}}"
												data-data-organization-name="{{.DisplayName}}">{{ctx.Locale.Tr "org.members.leave"}}
								</button>
							</form>
						</div>
					</div>
					{{end}}
				</div>
				{{template "base/paginate" .}}
			{{else}}
				{{ctx.Locale.Tr "settings.orgs_none"}}
			{{end}}
		</div>
	</div>

<div class="ui g-modal-confirm delete modal" id="leave-organization">
	<div class="header">
		{{ctx.Locale.Tr "org.members.leave"}}
	</div>
	<div class="content">
		<p>{{ctx.Locale.Tr "org.members.leave.detail" (`<span class="dataOrganizationName"></span>`|SafeHTML)}}</p>
	</div>
	{{template "base/modal_actions_confirm" .}}
</div>

{{template "user/settings/layout_footer" .}}