<div class="auth-container">
  <!-- 科幻风格装饰元素 -->
  <div class="decorator decorator-1"></div>
  <div class="decorator decorator-2"></div>
  
  <div class="auth-header">
    <h1 class="auth-title">企业登录</h1>
    <p class="auth-subtitle">欢迎回来，请使用您的凭证登录系统</p>
  </div>

  <!-- 错误消息 -->
  @if (errorMessage()) {
    <div class="message error-message">
      {{ errorMessage() }}
    </div>
  }

  <!-- 成功消息 -->
  @if (successMessage()) {
    <div class="message success-message">
      {{ successMessage() }}
    </div>
  }

  <form class="auth-form" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label for="username" class="form-label">企业凭证</label>
      <input
        type="text"
        id="username"
        [(ngModel)]="username"
        name="username"
        class="form-input"
        placeholder="输入您的企业凭证"
        required
      />
    </div>

    <div class="form-group">
      <label for="password" class="form-label">密码</label>
      <input
        type="password"
        id="password"
        [(ngModel)]="password"
        name="password"
        class="form-input"
        placeholder="输入您的密码"
        required
      />
    </div>

    <button type="submit" class="submit-btn" [disabled]="isLoading()">
      @if (isLoading()) {
        <span>登录中...</span>
      } @else {
        <span>登 录</span>
      }
    </button>
  </form>

  
</div>
