<!--pages/login/login.wxml-->
<view class="container">
  <!-- 背景装饰 -->
  <view class="bg-decoration">
    <view class="circle circle-1"></view>
    <view class="circle circle-2"></view>
    <view class="circle circle-3"></view>
  </view>

  <!-- 登录表单 -->
  <view class="login-form">
    <!-- Logo和标题 -->
    <view class="header-section">
      <view class="logo">
        <image src="/images/logo.png" class="logo-img" mode="aspectFit"></image>
      </view>
      <view class="title">政府监管系统</view>
      <view class="subtitle">智慧牧场管理平台</view>
    </view>

    <!-- 输入框区域 -->
    <view class="input-section">
      <view class="input-group">
        <view class="input-icon">👤</view>
        <input 
          class="input-field" 
          placeholder="请输入用户名"
          value="{{username}}"
          bindinput="onUsernameInput"
          maxlength="20"
        />
      </view>
      
      <view class="input-group">
        <view class="input-icon">🔒</view>
        <input 
          class="input-field" 
          placeholder="请输入密码"
          password="{{!showPassword}}"
          value="{{password}}"
          bindinput="onPasswordInput"
          maxlength="20"
        />
        <view class="password-toggle" bindtap="togglePassword">
          <text>{{showPassword ? '👁️' : '👁️‍🗨️'}}</text>
        </view>
      </view>
    </view>

    <!-- 登录按钮 -->
    <view class="button-section">
      <button 
        class="login-btn {{canLogin ? 'active' : 'disabled'}}" 
        bindtap="onLogin"
        disabled="{{!canLogin || loading}}"
      >
        <text wx:if="{{!loading}}">登录</text>
        <text wx:else>登录中...</text>
      </button>
    </view>

    <!-- 其他选项 -->
    <view class="options-section">
      <view class="remember-section">
        <checkbox-group bindchange="onRememberChange">
          <label class="checkbox-label">
            <checkbox value="remember" checked="{{rememberMe}}"/>
            <text class="checkbox-text">记住密码</text>
          </label>
        </checkbox-group>
      </view>
      
      <view class="forgot-password" bindtap="onForgotPassword">
        忘记密码？
      </view>
    </view>

    <!-- 版本信息 -->
    <view class="version-info">
      <text class="version-text">版本 v1.0.0</text>
    </view>
  </view>
</view>