{% extends "base.html" %}

{% block title %}Join - Makenot.work{% endblock %}
{% block body_attrs %} class="padded-page"{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/wizard.css">
{% endblock %}

{% block content %}
    <div class="wizard-layout">
        <aside class="wizard-sidebar">
            <h2 class="subtitle-h2">Join</h2>
            {% include "wizards/partials/step_nav.html" %}
        </aside>

        <div class="wizard-content" id="wizard-step">
            <div class="wizard-step">
                <h2 class="subtitle-h2">Create account</h2>
                <p class="step-description">Makenot.work is a 0% fee platform where creators sell directly to fans. Sign up to browse, buy, or sell your own work.</p>

                {% if let Some(code) = invite_code %}
                <div class="info-box mb-4">
                    You were invited -- no pitch required. Just create your account.
                </div>
                {% endif %}

                <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>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script src="/static/wizard.js"></script>
<script>
(function() {
    var input = document.getElementById('wiz-username');
    if (input) {
        input.addEventListener('input', function() {
            var preview = document.getElementById('username-preview');
            if (preview) preview.textContent = this.value || 'username';
        });
    }
})();
</script>
{% endblock %}