<div class="ui attached segment">
	<div class="flex-list">
		<div class="flex-item">
			{{ctx.Locale.Tr "settings.oauth2_application_create_description"}}
		</div>
		{{range .Applications}}
			<div class="flex-item tw-items-center">
				<div class="flex-item-leading">
					{{svg "octicon-apps" 32}}
				</div>
				<div class="flex-item-main">
					<div class="flex-item-title">{{.Name}}</div>
					<div class="flex-item-body">
						{{ctx.Locale.Tr "settings.oauth2_client_id"}}
						<span class="ui label">{{.ClientID}}</span>
					</div>
				</div>
				{{$isBuiltin := and $.BuiltinApplications (index $.BuiltinApplications .ClientID)}}
				<div class="flex-item-trailing">
					{{if $isBuiltin}}
						<span class="ui basic label" data-tooltip-content="{{ctx.Locale.Tr "settings.oauth2_application_locked"}}">{{ctx.Locale.Tr "locked"}}</span>
					{{else}}
						<a href="{{$.Link}}/oauth2/{{.ID}}" class="ui primary tiny button">
							{{svg "octicon-pencil" 16 "tw-mr-1"}}
							{{ctx.Locale.Tr "settings.oauth2_application_edit"}}
						</a>
						<button class="ui red tiny button delete-button" data-modal-id="remove-gitea-oauth2-application"
								data-url="{{$.Link}}/oauth2/{{.ID}}/delete">
							{{svg "octicon-trash" 16 "tw-mr-1"}}
							{{ctx.Locale.Tr "settings.delete_key"}}
						</button>
					{{end}}
				</div>
			</div>
		{{end}}
	</div>

	<div class="ui g-modal-confirm delete modal" id="remove-gitea-oauth2-application">
		<div class="header">
			{{svg "octicon-trash"}}
			{{ctx.Locale.Tr "settings.remove_oauth2_application"}}
		</div>
		<div class="content">
			<p>{{ctx.Locale.Tr "settings.oauth2_application_remove_description"}}</p>
		</div>
		{{template "base/modal_actions_confirm" .}}
	</div>
</div>

<div class="ui bottom attached segment">
	<details {{if .application_name}}open{{end}}>
		<summary><h4 class="ui header tw-inline-block tw-my-2">{{ctx.Locale.Tr "settings.create_oauth2_application"}}</h4></summary>
		<form class="ui form ignore-dirty" action="{{.Link}}/oauth2" method="post">
			<div class="field {{if .Err_AppName}}error{{end}}">
				<label for="application-name">{{ctx.Locale.Tr "settings.oauth2_application_name"}}</label>
				<input id="application-name" name="application_name" value="{{.application_name}}" required maxlength="255">
			</div>
			<div class="field {{if .Err_RedirectURI}}error{{end}}">
				<label for="redirect-uris">{{ctx.Locale.Tr "settings.oauth2_redirect_uris"}}</label>
				<textarea name="redirect_uris" id="redirect-uris"></textarea>
			</div>
			<div class="field {{if .Err_ConfidentialClient}}error{{end}}">
				<div class="ui checkbox">
					<label>{{ctx.Locale.Tr "settings.oauth2_confidential_client"}}</label>
					<input class="disable-setting" type="checkbox" name="confidential_client" data-target="#skip-secondary-authorization" checked>
				</div>
			</div>
			<div class="field {{if .Err_SkipSecondaryAuthorization}}error{{end}} disabled" id="skip-secondary-authorization">
				<div class="ui checkbox">
					<label>{{ctx.Locale.Tr "settings.oauth2_skip_secondary_authorization"}}</label>
					<input type="checkbox" name="skip_secondary_authorization">
				</div>
			</div>
			<button class="ui primary button">
				{{ctx.Locale.Tr "settings.create_oauth2_application_button"}}
			</button>
		</form>
	</details>
</div>
