<h4 class="ui top attached header">
	{{ctx.Locale.Tr "settings.manage_openid"}}
</h4>
<div class="ui attached segment">
	<div class="flex-list">
		<div class="flex-item">
			{{ctx.Locale.Tr "settings.openid_desc"}}
		</div>
		{{range .OpenIDs}}
			<div class="flex-item tw-items-center">
				<div class="flex-item-leading">
					{{svg "fontawesome-openid" 20}}
				</div>
				<div class="flex-item-main">
					<div class="flex-item-title">{{.URI}}</div>
				</div>
				<div class="flex-item-trailing">
					<form action="{{AppSubUrl}}/user/settings/security/openid/toggle_visibility" method="post">
						{{$.CsrfTokenHtml}}
						<input name="id" type="hidden" value="{{.ID}}">
						{{if .Show}}
							<button class="ui tiny button">
							{{svg "octicon-eye" 16 "icon"}}
							{{ctx.Locale.Tr "settings.hide_openid"}}
							</button>
						{{else}}
							<button class="ui tiny button">
							{{svg "octicon-eye-closed" 16 "icon"}}
							{{ctx.Locale.Tr "settings.show_openid"}}
							</button>
						{{end}}
					</form>
					<button class="ui red tiny button delete-button" data-modal-id="delete-openid" data-url="{{AppSubUrl}}/user/settings/security/openid/delete" data-id="{{.ID}}">
						{{ctx.Locale.Tr "settings.delete_key"}}
					</button>
				</div>
			</div>
		{{end}}
	</div>
</div>
<div class="ui bottom attached segment">
	<form class="ui form" action="{{AppSubUrl}}/user/settings/security/openid" method="post">
		{{.CsrfTokenHtml}}
		<div class="required field {{if .Err_OpenID}}error{{end}}">
			<label for="openid">{{ctx.Locale.Tr "settings.add_new_openid"}}</label>
			<input id="openid" name="openid" type="text" required>
		</div>
		<button class="ui primary button">
			{{ctx.Locale.Tr "settings.add_openid"}}
		</button>
	</form>

	<div class="ui g-modal-confirm delete modal" id="delete-openid">
		<div class="header">
			{{svg "octicon-trash"}}
			{{ctx.Locale.Tr "settings.openid_deletion"}}
		</div>
		<div class="content">
			<p>{{ctx.Locale.Tr "settings.openid_deletion_desc"}}</p>
		</div>
		{{template "base/modal_actions_confirm" .}}
	</div>
</div>
