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

{% block title %}New Item - 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 %}
    {% include "partials/site_header.html" %}

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

        <div class="wizard-content" id="wizard-step">
            <div class="wizard-step">
                <h2 class="subtitle-h2">Choose Type</h2>
                <p class="step-description">What kind of content are you creating?</p>

                <form hx-post="/dashboard/project/{{ project_slug }}/new-item/step/type"
                      hx-target="#wizard-step" hx-swap="innerHTML">
                    <div class="type-grid type-grid-large">
                    {% for (value, label, desc) in item_type_cards %}
                        <label class="card--selectable">
                            <input type="radio" name="item_type" value="{{ value }}"
                                   {% if loop.first %}checked{% endif %}>
                            <span class="card--selectable-inner">
                                <span class="card--selectable-label">{{ label }}</span>
                                <span class="card--selectable-desc">{{ desc }}</span>
                            </span>
                        </label>
                    {% endfor %}
                    </div>

                    <div class="wizard-actions">
                        <a href="/dashboard/project/{{ project_slug }}" class="btn-secondary">Cancel</a>
                        <button type="submit" class="btn-primary">Continue</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script src="/static/wizard.js"></script>
{% endblock %}