@props([
    'lineIndex' => 0,
    'variantId' => null,
    'readonly' => false,
])

@php
    $accordionId = 'uomAccordion' . $lineIndex;
@endphp

<div class="multi-uom-accordion small" data-uom-accordion data-line-index="{{ $lineIndex }}">
    <div class="accordion accordion-flush border rounded" id="uomAccWrap_{{ $lineIndex }}" style="background: #f9fafb;">
        <div class="accordion-item border-0" style="background: transparent;">
            <h2 class="accordion-header" id="uomAccHead_{{ $lineIndex }}">
                <button class="accordion-button collapsed py-1 px-2 fw-semibold uom-accordion-toggle" 
                        type="button" 
                        data-bs-toggle="collapse" 
                        data-bs-target="#uomAccBody_{{ $lineIndex }}" 
                        aria-expanded="false" 
                        aria-controls="uomAccBody_{{ $lineIndex }}" 
                        style="background: transparent; font-size: 0.8rem; min-height: 32px;">
                    <i class="fas fa-cube me-1"></i>
                    <span class="small uom-summary-text">UOM Qty</span>
                </button>
            </h2>
            <div id="uomAccBody_{{ $lineIndex }}" class="accordion-collapse collapse" data-bs-parent="#uomAccWrap_{{ $lineIndex }}">
                <div class="accordion-body p-2 bg-white">
                    <div class="uom-inline-placeholder text-muted small text-center py-2">
                        <i class="fas fa-info-circle me-1"></i>Select variant first
                    </div>
                    <div class="multi-uom-inline d-flex flex-column gap-1" style="display:none;"></div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" class="uom-data-json" name="lines[{{ $lineIndex }}][uom_data]">
</div>