{% extends "base.html" %}
{% import "_sheet.html" as sheet %}

{% block title %}Join - Makenotwork{% endblock %}
{% block body_attrs %} class="{{ crate::shell::measure(crate::shell::Measure::Wide) }}"{% endblock %}

{% block head %}
{% call sheet::sheet("wizard.css") %}{% endcall %}
{% 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">Makenotwork 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-section">
                    You were invited: no pitch required. Just create your account.
                </div>
                {% endif %}

                {% if let Some(err) = error %}
                <div class="info-box info-box--error mb-section" role="alert">{{ err }}</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" value="{{ username }}"
                               {% if error_field.as_deref() == Some("username") %}aria-invalid="true"{% endif %}
                               aria-describedby="wiz-username-hint"
                               hx-post="/api/validate/username"
                               hx-trigger="keyup changed delay:500ms"
                               hx-target="#username-status"
                               hx-indicator="#username-spinner">
                        <div class="hint" id="wiz-username-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" value="{{ email }}"
                               {% if error_field.as_deref() == Some("email") %}aria-invalid="true"{% endif %}
                               aria-describedby="wiz-email-hint">
                        <div class="hint" id="wiz-email-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"
                               {% if error_field.as_deref() == Some("password") %}aria-invalid="true"{% endif %}
                               aria-describedby="wiz-password-hint">
                        <div class="hint" id="wiz-password-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 src="/static/wizard-join-inline.js?v=0623"></script>
{% endblock %}