import { Icons } from './icons';

export function LoginModal() {
  return (
    <div class="wm-modal" x-show="modals.login" x-cloak {...{ 'x-transition.opacity.duration.300ms': '' }}>
      <div class="wm-modal-mask" data-close-modal="login"></div>
      <section class="wm-modal-card auth-card" role="dialog" aria-modal="true" aria-labelledby="login-title">
        <button class="modal-close" type="button" data-close-modal="login" aria-label="关闭">{Icons.close()}</button>
        <h2 id="login-title">登录微记</h2>
        <form data-auth-form="login">
          <label>
            <span>用户名或邮箱</span>
            <input name="identifier" autocomplete="username" required />
          </label>
          <label>
            <span>密码</span>
            <input name="password" type="password" autocomplete="current-password" required />
          </label>
          <button class="primary-button" type="submit">登录</button>
        </form>
        <p class="auth-switch">还没有账号？<button type="button" data-switch-modal="register">注册</button></p>
      </section>
    </div>
  );
}
