{% extends "base.html" %}
{% block title %}Create Account — PassKeeper{% endblock %}
{% block body_class %}auth-page{% endblock %}

{% block body %}
<div class="auth-container">
  <div class="auth-card">
    <div class="auth-logo">
      <span class="logo-icon">🔒</span>
      <span class="logo-text">PassKeeper</span>
    </div>

    <h1 class="auth-title">Create account</h1>

    <div class="notice-info">
      <strong>Important:</strong> Your master password encrypts all your data.
      It is <em>never sent to our servers</em>. If you forget it, your vault cannot be recovered.
    </div>

    <form id="register-form" novalidate>
      <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" id="email" name="email" required
               autocomplete="email" placeholder="you@example.com">
      </div>
      <div class="form-group">
        <label for="password">Master password <span class="hint">(min. 12 characters)</span></label>
        <div class="input-with-toggle">
          <input type="password" id="password" name="password" required
                 autocomplete="new-password" minlength="12" placeholder="Create a strong master password">
          <button type="button" class="btn-show-pass" id="toggle-reg-pass" aria-label="Toggle password visibility">👁</button>
        </div>
        <div class="password-strength" id="strength-bar"></div>
      </div>
      <div class="form-group">
        <label for="confirm_password">Confirm master password</label>
        <input type="password" id="confirm_password" name="confirm_password" required
               autocomplete="new-password" placeholder="Repeat master password">
      </div>
      <button type="submit" class="btn-primary btn-full" data-loading-text="Creating account…">
        Create account
      </button>
    </form>

    <p class="auth-footer">
      Already have an account? <a href="/login">Sign in</a>
    </p>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/crypto.js') }}"></script>
<script src="{{ url_for('static', filename='js/auth.js') }}"></script>
{% endblock %}