{% include "wizards/partials/step_nav.html" %}

<div class="wizard-step">
    <h2 class="subtitle-h2">Create account</h2>
    <p class="step-description">Choose a username, enter your email, and set a password.</p>

    <form hx-post="/join/step/account"
          hx-target="#wizard-step" hx-swap="innerHTML">
        <div class="form-group">
            <label for="wiz-username">Username</label>
            <input type="text" id="wiz-username" name="username" required
                   placeholder="username" autocomplete="off"
                   hx-post="/api/validate/username"
                   hx-trigger="keyup changed delay:500ms"
                   hx-target="#username-status"
                   hx-indicator="#username-spinner">
            <div class="hint">Your public url: makenot.work/u/<span id="username-preview">username</span></div>
            <span id="username-spinner" class="htmx-indicator username-spinner">Checking...</span>
            <span id="username-status"></span>
        </div>

        <div class="form-group">
            <label for="wiz-email">Email</label>
            <input type="email" id="wiz-email" name="email" required
                   placeholder="you@example.com" autocomplete="email">
            <div class="hint">Used for account recovery and notifications</div>
        </div>

        <div class="form-group">
            <label for="wiz-password">Password</label>
            <input type="password" id="wiz-password" name="password" required
                   placeholder="--------" minlength="8" autocomplete="new-password">
            <div class="hint">Minimum 8 characters</div>
        </div>

        {% if let Some(code) = invite_code %}
        <input type="hidden" name="invite_code" value="{{ code }}">
        {% endif %}

        <div class="wizard-actions">
            <a href="/" class="btn-secondary">Cancel</a>
            <button type="submit" class="btn-primary">Create Account</button>
        </div>
    </form>

    <div class="foot-link foot-link--centered">
        Already have an account? <a href="/login">Log in</a>
    </div>
</div>