{{-- Item cards with ADD + / quantity stepper. Needs: $items, $picked [id => qty]. Optional $form (form id the inputs belong to). --}}
<ul class="items">
    @foreach ($items as $it)
        @php
            $qty = (int) ($picked[$it->id] ?? 0);
            $max = $it->remaining === null ? 10000 : $it->remaining;
            $funded = $it->is_funded;
            if ($qty > $max) { $qty = $max; }
        @endphp
        <li class="item @if ($qty > 0) is-chosen @endif @if ($funded) is-funded @endif" data-item data-price="{{ $it->unit_price }}" data-max="{{ $max }}" data-name="{{ $it->name }}">
            <div class="item__media">
                @if ($it->thumb_url)
                    <img src="{{ $it->thumb_url }}" alt="" width="320" height="320" loading="lazy" decoding="async">
                @else
                    <span class="item__ph" aria-hidden="true"><svg class="i i--xl"><use href="#i-gift"/></svg></span>
                @endif
            </div>
            <h3 class="item__name">{{ $it->name }}</h3>
            @if ($it->target_qty)
                <p class="item__qty">{{ $it->obtained_qty }} of {{ number_format($it->target_qty) }} quantity obtained</p>
                <div class="progress progress--sm" role="progressbar" aria-label="{{ $it->name }} funded" aria-valuenow="{{ $it->progress }}" aria-valuemin="0" aria-valuemax="100"><span style="width: {{ $it->progress }}%"></span></div>
            @elseif ($it->obtained_qty > 0)
                <p class="item__qty">{{ number_format($it->obtained_qty) }} donated so far</p>
            @endif
            <p class="item__price"><strong>{{ \App\Support\Fmt::rupees($it->unit_price) }}</strong>/unit</p>

            @if ($funded)
                <p class="item__done"><svg class="i" aria-hidden="true"><use href="#i-check"/></svg>Fully funded</p>
            @else
                <button class="item__add" type="button" data-add>ADD +</button>
                <div class="item__step" role="group" aria-label="Quantity of {{ $it->name }}">
                    <button type="button" data-dec aria-label="One less {{ $it->name }}">&minus;</button>
                    <input type="number" name="items[{{ $it->id }}]" value="{{ $qty }}" min="0" max="{{ $max }}" inputmode="numeric"
                           aria-label="Quantity of {{ $it->name }}" @isset($form) form="{{ $form }}" @endisset>
                    <button type="button" data-inc aria-label="One more {{ $it->name }}">+</button>
                </div>
            @endif
        </li>
    @endforeach
</ul>