{% extends "base.html" %}
{% block title %}Join Us — GoldBuy{% endblock %}
{% block container_class %}container-auth{% endblock %}

{% block content %}
<section class="auth-card">
    <div class="auth-badge">&#9670;</div>
    <h1>Create your account</h1>
    <p class="auth-sub">Sell faster with pre-filled details and track every item you submit.</p>

    <form method="post">
        {{ csrf_field() }}
        <div class="form-row">
            <label for="name">Your name</label>
            <input type="text" id="name" name="name" required maxlength="100"
                   autocomplete="name"
                   value="{{ form.get('name', '') }}" placeholder="e.g. Edwin Oduor">
        </div>
        <div class="form-row">
            <label for="email">Email address</label>
            <input type="email" id="email" name="email" required maxlength="120"
                   autocomplete="email"
                   value="{{ form.get('email', '') }}" placeholder="you@example.com">
        </div>
        <div class="form-row">
            <label for="phone">Phone number</label>
            <input type="tel" id="phone" name="phone" required maxlength="20"
                   autocomplete="tel"
                   value="{{ form.get('phone', '') }}" placeholder="e.g. 0712 345 678">
        </div>
        <div class="form-grid">
            <div class="form-row">
                <label for="password">Password <span class="hint">(6+ characters)</span></label>
                <div class="pw-field">
                    <input type="password" id="password" name="password" required
                           minlength="6" autocomplete="new-password" placeholder="Password">
                    <button type="button" class="pw-toggle">Show</button>
                </div>
            </div>
            <div class="form-row">
                <label for="confirm">Repeat password</label>
                <div class="pw-field">
                    <input type="password" id="confirm" name="confirm" required
                           minlength="6" autocomplete="new-password" placeholder="Repeat">
                    <button type="button" class="pw-toggle">Show</button>
                </div>
            </div>
        </div>
        <button type="submit" class="btn-auth">Create my account</button>
    </form>

    <div class="auth-divider">Already a member?</div>
    <p class="auth-alt"><a href="{{ url_for('login') }}">Log in to your account</a></p>
</section>
{% endblock %}