{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings organization")}}
	<div class="user-setting-content">
		<h4 class="ui top attached header">
			{{.locale.Tr "settings.orgs"}}
			{{if .SignedUser.CanCreateOrganization}}
			<div class="ui right">
				<a class="ui primary tiny button" href="{{AppSubUrl}}/org/create">{{.locale.Tr "admin.orgs.new_orga"}}</a>
			</div>
			{{end}}
		</h4>
		<div class="ui attached segment orgs">
			{{if .Orgs}}
				<div class="ui middle aligned divided list">
					{{range .Orgs}}
					<div class="item">
						<div class="right floated content">
							<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}}">{{$.locale.Tr "org.members.leave"}}
								</button>
							</form>
						</div>
						{{avatar $.Context . 28 "mini"}}
						<div class="content">
								<a href="{{.HomeLink}}">{{.Name}}</a>
						</div>
					</div>
					{{end}}
				</div>
				{{template "base/paginate" .}}
			{{else}}
				{{.locale.Tr "settings.orgs_none"}}
			{{end}}
		</div>
	</div>

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

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