{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user link-account">
	<div class="ui middle very relaxed page grid">
		<div class="column">
			<div class="ui tab active"
				data-tab="auth-link-signup-tab">

				<div class="ui container column fluid icon">
					<h4 class="ui top attached header center">
						Blender Projects <span style="opacity: .5" class="px-3">{{svg "octicon-arrow-both"}}</span>
						Blender ID
					</h4>
					<div class="ui attached segment center">
						<form class="ui form" action="{{.SignUpLink}}" method="post">
							{{.CsrfTokenHtml}}

							{{template "base/alert" .}}

							<div class="my-4">
								<p>
									Your username is <strong>{{.user_name}}</strong>,
									and your email is <strong>{{.email}}</strong>
								</p>
								<p>
									Press <strong>"Complete Registration"</strong> to continue.
								</p>
							</div>

							<div hidden class="disabled required inline field {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeRegister))}}error{{end}}">
								<label for="user_name">{{.locale.Tr "username"}}</label>
								<input id="user_name" type="text" name="user_name" value="{{.user_name}}" required style="opacity: var(--opacity-disabled)">
							</div>
							<div hidden class="disabled required inline field {{if .Err_Email}}error{{end}}">
								<label for="email">{{.locale.Tr "email"}}</label>
								<input id="email" name="email" type="email" value="{{.email}}" required style="opacity: var(--opacity-disabled)">
							</div>

							<div class="inline field">
								<button class="ui green button">
									<span class="pr-2">{{svg "octicon-check"}}</span>
									Complete Registration
								</button>
							</div>

						</form>
					</div>
				</div>

			</div>
		</div>
	</div>
</div>

{{template "base/footer" .}}