{{--
    [#39388] Panel trái「操作ステップ」/「全5ステップ」của wizard PC接続 (C-04, E-036).

    Bước đã qua hiển thị ✓, bước đang đứng highlight, bước sau xám. Đây KHÔNG phải stepper
    onboarding 5 mốc (ようこそ / 事前確認 / …) — cái đó bị loại theo BR-C09 (QA-spec-009 = (A)).
--}}
<div class="cbv2-wiz__side cbv2-wiz-steps" key="side-steps">
    <div class="cbv2-wiz-steps__head">
        <lme-icon size="16" color="#878A92">
            <svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.5 2.5H11L15.5 7V17.5H4.5V2.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
                <path d="M11 2.5V7H15.5" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
            </svg>
        </lme-icon>
        <span class="cbv2-wiz-steps__title">操作ステップ</span>
    </div>
    <div class="cbv2-wiz-steps__count">全5ステップ</div>

    <div class="cbv2-wiz-steps__item" v-for="step in wizardSteps" :key="step.no"
         :class="{ 'is-active': connectStep === step.no, 'is-done': connectStep > step.no }">
        <span class="cbv2-wiz-steps__badge">
            <lme-icon v-if="connectStep > step.no" size="14" color="#FFFFFF">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 8.5L6.2 11.7L13 4.9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </lme-icon>
            <template v-else>@{{ step.no }}</template>
        </span>
        <span class="cbv2-wiz-steps__body">
            <span class="cbv2-wiz-steps__label">@{{ step.label }}</span>
            <span class="cbv2-wiz-steps__sub">@{{ step.sub }}</span>
        </span>
    </div>
</div>