<ion-content class="ion-padding">
    <div class="modal-content">
        <ion-icon name="close-outline" class="close-button" (click)="dismiss()"></ion-icon>

        <div class="header">
            <div class="logo">
                <img src="assets/img/logo2.png" alt="Logo">
            </div>
            <h1>{{ isSignup ? '创建新账号' : '欢迎回来' }}</h1>
            <p>{{ isSignup ? '加入我们，开启你的学习之旅' : '登录你的账号，继续你的学习计划' }}</p>
        </div>

        <div class="form-group">
            <ion-item [class.ion-invalid]="errorMessage && !username">
                <ion-icon slot="start" name="person-outline"></ion-icon>
                <ion-label position="stacked">用户名</ion-label>
                <ion-input type="text" [(ngModel)]="username" placeholder="请输入3-20位字母、数字、下划线或中文"
                    (ionFocus)="errorMessage = ''">
                </ion-input>
            </ion-item>

            <ion-item [class.ion-invalid]="errorMessage && !password">
                <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
                <ion-label position="stacked">密码</ion-label>
                <ion-input type="password" [(ngModel)]="password" placeholder="请输入6-20位字母、数字或下划线"
                    (ionFocus)="errorMessage = ''">
                </ion-input>
            </ion-item>

            @if(isSignup) {
            <ion-item [class.ion-invalid]="errorMessage && !password2">
                <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
                <ion-label position="stacked">确认密码</ion-label>
                <ion-input type="password" [(ngModel)]="password2" placeholder="请再次输入密码" (ionFocus)="errorMessage = ''">
                </ion-input>
            </ion-item>
            }

            @if(errorMessage) {
            <div class="error-message">
                {{ errorMessage }}
            </div>
            }
        </div>
        <div class="action-buttons">
            <ion-button expand="block" class="submit-button" (click)="submit()">
                {{ isSignup ? '注册' : '登录' }}
            </ion-button>
            <ion-button fill="clear" class="switch-button" (click)="toggleMode()">
                {{ isSignup ? '已有账号？点击登录' : '没有账号？立即注册' }}
            </ion-button>
        </div>
        <div class="divider">其他登录方式</div>

        <div class="social-login">
            <div class="social-button">
                <img src="assets/img/login_icon.png" alt="微信登录">
                <span>微信登录</span>
            </div>
            <div class="social-button">
                <img src="assets/img/login_icon2.png" alt="QQ登录">
                <span>QQ登录</span>
            </div>
        </div>
    </div>
</ion-content>