{# Experience flow content — step progress + inner surface
   Contract: ~/.claude/skills/ux-architect/components/experience-shell.md (UX-072)
   v0.62 CSS refactor: inline Tailwind → semantic .dz-experience-* /
   .dz-steps-* family (components/fragments.css) and .dz-button primitives
   for the form submit. Step state tone now driven by .is-completed /
   .is-current modifier classes on the <li> rather than per-element class
   ternaries. #}
{% from 'macros/form_field.html' import render_field %}
{% from 'macros/experience_transition.html' import experience_transition_button %}

<div data-dz-experience="{{ experience.name }}" class="dz-experience">
  {# Title #}
  <h2 class="dz-experience-title">{{ experience.title }}</h2>

  {# Progress indicator — reuses the existing .dz-steps / .dz-steps-circle
     family from fragments/steps_indicator.html. `.is-completed` marker
     applies to both completed AND current steps so they share the brand
     fill (matches the steps_indicator position-based convention). #}
  {% if experience.steps | length > 1 %}
  <ol class="dz-steps">
    {% for step in experience.steps %}
    <li class="dz-steps-item{% if not loop.last %} is-not-last{% endif %}"
        data-dz-exp-step="{{ step.name }}"
        {% if step.is_current %}aria-current="step"{% endif %}>
      <div class="dz-steps-row">
        <span class="dz-steps-circle{% if step.is_completed or step.is_current %} is-completed{% endif %}">{{ loop.index }}</span>
        <span class="dz-steps-label{% if step.is_completed or step.is_current %} is-completed{% endif %}">{{ step.title }}</span>
      </div>
      {% if not loop.last %}
      <div class="dz-steps-connector{% if step.is_completed %} is-completed{% endif %}"></div>
      {% endif %}
    </li>
    {% endfor %}
  </ol>
  {% endif %}

  {# Step content #}
  <div class="dz-experience-step" data-dz-exp-current="{{ experience.current_step }}">
    {% if experience.page_context %}
      {% set ctx = experience.page_context %}

      {# Form step: render the form with action rewritten to experience endpoint #}
      {% if ctx.form %}
        <div class="dz-experience-form-shell">
          <form data-dazzle-form="{{ ctx.form.entity_name }}"
                data-dazzle-form-mode="{{ ctx.form.mode }}"
                hx-{{ "put" if ctx.form.method == "put" else "post" }}="{{ ctx.form.action_url }}"
                hx-target="body"
                hx-swap="innerHTML"
                hx-target-422="#form-errors"
                hx-target-5*="#form-errors"
                hx-headers='{"Content-Type": "application/json"}'
                hx-ext="json-enc"
                class="dz-experience-form-body">

            <div id="form-errors">
              {% include 'fragments/form_errors.html' %}
            </div>

            {% if ctx.form.sections %}
              {# Wizard sections within a step #}
              {% include 'fragments/form_stepper.html' with context %}
              {% for section in ctx.form.sections %}
              <div class="dz-wizard-stage" data-dz-stage="{{ loop.index0 }}"
                   {% if not loop.first %}style="display:none"{% endif %}>
                <h3 class="dz-experience-stage-title">{{ section.title }}</h3>
                {% for field in section.fields %}
                  {{ render_field(field, ctx.form.initial_values) }}
                {% endfor %}
              </div>
              {% endfor %}
            {% else %}
              {% for field in ctx.form.fields %}
                {{ render_field(field, ctx.form.initial_values) }}
              {% endfor %}
            {% endif %}

            {# Form submit + navigation buttons #}
            <div class="dz-experience-actions">
              <button type="submit" class="dz-button dz-button-primary"
                      data-loading-class="loading"
                      data-loading-disable>
                {% if ctx.form.mode == "edit" %}Save & Continue{% else %}Submit{% endif %}
              </button>
              {% for tr in experience.transitions %}
                {% if tr.event != 'success' %}
                  {{ experience_transition_button(tr) }}
                {% endif %}
              {% endfor %}
            </div>
          </form>
        </div>

      {# Detail/view step #}
      {% elif ctx.detail %}
        {% include 'components/detail_view.html' %}
        {# Transition buttons — hx-post picks up CSRF header via base.html htmx:configRequest listener. #}
        {% if experience.transitions %}
        <div class="dz-experience-actions">
          {% for tr in experience.transitions %}
            {{ experience_transition_button(tr) }}
          {% endfor %}
        </div>
        {% endif %}

      {# Table/list step #}
      {% elif ctx.table %}
        {% include 'components/filterable_table.html' %}
        {% if experience.transitions %}
        <div class="dz-experience-actions">
          {% for tr in experience.transitions %}
            {{ experience_transition_button(tr) }}
          {% endfor %}
        </div>
        {% endif %}

      {% else %}
        <div class="dz-experience-ready" role="alert">
          <span>This step is ready.</span>
        </div>
        {% if experience.transitions %}
        <div class="dz-experience-actions">
          {% for tr in experience.transitions %}
            {{ experience_transition_button(tr) }}
          {% endfor %}
        </div>
        {% endif %}
      {% endif %}

    {% else %}
      {# Non-surface step (process/integration) — placeholder #}
      <div class="dz-experience-placeholder">
        <div class="dz-experience-placeholder-title">Step in progress</div>
        <p class="dz-experience-placeholder-body">This step is being processed. Please wait or continue.</p>
      </div>
      {% if experience.transitions %}
      <div class="dz-experience-actions dz-experience-actions-centered">
        {% for tr in experience.transitions %}
          {{ experience_transition_button(tr) }}
        {% endfor %}
      </div>
      {% endif %}
    {% endif %}
  </div>
</div>