{% extends "base.html" %}

{% block title %}註冊帳號 - 暫規系統{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-md-6 col-lg-5">
    <h2 class="text-center mb-4">建立新帳號</h2>

    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
          <div class="alert alert-{{ category or 'danger' }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    <div class="card">
      <div class="card-body">
        <form method="post">
          <div class="mb-3">
            <label for="username" class="form-label">帳號</label>
            <input type="text" class="form-control" id="username" name="username"
                   placeholder="請輸入帳號" value="{{ username or '' }}" required>
            <div class="form-text">建議以公司信箱為帳號，避免重複。</div>
          </div>
          <div class="mb-3">
            <label for="name" class="form-label">姓名</label>
            <input type="text" class="form-control" id="name" name="name"
                   placeholder="請輸入姓名" value="{{ name or '' }}" required>
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">密碼</label>
            <input type="password" class="form-control" id="password" name="password" required>
            <div class="form-text">密碼需至少 6 碼。</div>
          </div>
          <div class="mb-3">
            <label for="confirm_password" class="form-label">確認密碼</label>
            <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
          </div>
          <div class="d-flex justify-content-between align-items-center">
            <button type="submit" class="btn btn-success">註冊</button>
            <a href="{{ url_for('auth.login') }}" class="btn btn-link">回登入頁</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}