<main class="hk-auth-page">
    <section class="hk-auth-shell" aria-labelledby="signup-title">
        @if (verificationSent()) {
        <div class="hk-auth-card">
            <header class="hk-auth-header">
                <i class="pi pi-envelope text-4xl text-primary-500"></i>
                <h1 class="hk-auth-title">{{ "signup.verifyTitle" | transloco }}</h1>
                <p class="hk-auth-subtitle">{{ "signup.verifySubtitle" | transloco : { email: submittedEmail() } }}</p>
            </header>
        </div>
        } @else {
        <div class="hk-auth-card">
            <header class="hk-auth-header">
                <app-brand size="large"></app-brand>
                <h1 id="signup-title" class="hk-auth-title">{{ "signup.title" | transloco }}</h1>
                <p class="hk-auth-subtitle">{{ "signup.subtitle" | transloco }}</p>
            </header>

            <form (submit)="onSubmit($event)" class="hk-auth-form" novalidate>
                @if (errorMessage(); as errorMessageKey) {
                <div class="hk-auth-alert hk-auth-alert-error" role="alert" aria-live="assertive">
                    <i class="pi pi-exclamation-circle mt-0.5" aria-hidden="true"></i>
                    <span class="text-sm font-medium">{{ errorMessageKey | transloco }}</span>
                </div>
                }

                <div class="hk-auth-field">
                    <label for="email" class="hk-auth-field-label">
                        {{ "common.emailAddress" | transloco }}
                        <span class="api-client-required-asterisk" aria-hidden="true">*</span>
                    </label>
                    <input
                        pInputText
                        id="email"
                        type="email"
                        inputmode="email"
                        autocapitalize="none"
                        spellcheck="false"
                        [formControl]="signupForm.email().control()"
                        class="w-full"
                        autocomplete="email"
                        [attr.aria-invalid]="signupForm.email().touched() && signupForm.email().invalid() ? true : null"
                        [attr.aria-describedby]="signupForm.email().touched() && signupForm.email().invalid() ? 'signup-email-error' : null"
                        [placeholder]="'signup.emailPlaceholder' | transloco"
                    />
                    @if (signupForm.email().touched() && signupForm.email().invalid()) {
                    <small id="signup-email-error" class="hk-auth-field-error" role="status">{{ "login.emailInvalid" | transloco }}</small>
                    }
                </div>

                <div class="hk-auth-field">
                    <label for="password" class="hk-auth-field-label">
                        {{ "common.password" | transloco }}
                        <span class="api-client-required-asterisk" aria-hidden="true">*</span>
                    </label>
                    <p-password
                        id="password"
                        [formControl]="signupForm.password().control()"
                        [toggleMask]="true"
                        class="w-full"
                        inputclass="w-full"
                        [feedback]="false"
                        [attr.aria-invalid]="signupForm.password().touched() && signupForm.password().invalid() ? true : null"
                        [attr.aria-describedby]="'signup-password-help'"
                    ></p-password>
                    <p id="signup-password-help" class="hk-auth-field-help">{{ "password.reset.minimumLength" | transloco }}</p>
                    @if (signupForm.password().touched() && signupForm.password().invalid()) {
                    <small class="hk-auth-field-error" role="status">{{ "password.reset.minimumLength" | transloco }}</small>
                    }
                </div>

                <div class="hk-auth-field">
                    <label for="teamName" class="hk-auth-field-label">
                        {{ "signup.teamNameLabel" | transloco }}
                        <span class="api-client-required-asterisk" aria-hidden="true">*</span>
                    </label>
                    <input
                        pInputText
                        id="teamName"
                        [formControl]="signupForm.teamName().control()"
                        class="w-full"
                        autocomplete="organization"
                        [attr.aria-invalid]="signupForm.teamName().touched() && signupForm.teamName().invalid() ? true : null"
                        [attr.aria-describedby]="signupForm.teamName().touched() && signupForm.teamName().invalid() ? 'signup-team-error' : null"
                        [placeholder]="'signup.teamNamePlaceholder' | transloco"
                    />
                    @if (signupForm.teamName().touched() && signupForm.teamName().invalid()) {
                    <small id="signup-team-error" class="hk-auth-field-error" role="status">{{ "signup.teamNameRequired" | transloco }}</small>
                    }
                </div>

                <div class="hk-auth-field">
                    <div class="flex items-start gap-2">
                        <p-checkbox [formControl]="signupForm.acceptedTos().control()" [binary]="true" inputId="acceptedTos" />
                        <label for="acceptedTos" class="text-sm">
                            {{ "signup.tosLabel" | transloco }}
                            <a href="https://hitkeep.com/legal/terms-of-service/" target="_blank" rel="noopener" class="hk-auth-link">{{ "signup.tosLink" | transloco }}</a>
                            {{ "signup.tosAnd" | transloco }}
                            <a href="https://hitkeep.com/legal/privacy-policy/" target="_blank" rel="noopener" class="hk-auth-link">{{ "signup.privacyLink" | transloco }}</a>.
                        </label>
                    </div>
                    @if (signupForm.acceptedTos().touched() && signupForm.acceptedTos().invalid()) {
                    <small class="hk-auth-field-error" role="status">{{ "signup.tosRequired" | transloco }}</small>
                    }
                </div>

                <p-button [label]="'signup.submit' | transloco" type="submit" [loading]="isLoading()" [disabled]="isLoading() || signupForm().invalid()" class="w-full"> </p-button>
            </form>
        </div>
        }

        <footer class="hk-auth-footer">
            <p class="hk-auth-footer-text">
                <span>{{ "signup.haveAccount" | transloco }}</span>
                <a routerLink="/login" class="hk-auth-link">{{ "signup.signInAction" | transloco }}</a>
            </p>
            <p class="hk-auth-footer-text">
                <span>{{ "signup.otherJurisdictionPrompt" | transloco }}</span>
                <a [href]="jurisdictionHref(alternateJurisdiction())" class="hk-auth-link" (click)="trackRegionSwitchClick(alternateJurisdiction())">
                    {{ "signup.otherJurisdictionAction" | transloco : { jurisdiction: ("signup.jurisdictions." + alternateJurisdiction().toLowerCase()) | transloco } }}
                </a>
            </p>
            <p class="hk-auth-footer-text">
                <a href="https://hitkeep.com/guides/installation/binary/" class="hk-auth-link" target="_blank" rel="noopener">{{ "signup.selfHostLink" | transloco }}</a>
            </p>
            <p class="hk-auth-footer-text">
                <span aria-hidden="true">&copy;</span>
                <span>{{ currentYear }} </span>
                <span>{{ "login.footerRights" | transloco }}</span>
            </p>
        </footer>
    </section>
</main>
