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

<div class="wizard-step">
    <h2 class="subtitle-h2">Profile</h2>
    <p class="step-description">Add a display name and bio. You can always change these later.</p>

    <form hx-post="/join/step/profile"
          hx-target="#wizard-step" hx-swap="innerHTML">
        <div class="form-group">
            <label for="wiz-displayname">Display Name</label>
            <input type="text" id="wiz-displayname" name="display_name"
                   placeholder="How your name appears publicly" autocomplete="off">
            <div class="hint">Defaults to your username if left empty</div>
        </div>

        <div class="form-group">
            <label for="wiz-bio">Bio</label>
            <textarea id="wiz-bio" name="bio" rows="4"
                      placeholder="Tell people about yourself..."></textarea>
        </div>

        <div class="wizard-actions">
            <button type="button" class="btn-secondary"
                    hx-get="/join/step/complete"
                    hx-target="#wizard-step" hx-swap="innerHTML">Skip</button>
            <button type="submit" class="btn-primary">Continue</button>
        </div>
    </form>
</div>