```
<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;

/* @var $this yii\web\View */
/* @var $model app\models\forms\CartUpdateForm */
/* @var $products array */

?>

<?php $form = ActiveForm::begin([
    'id' => 'cart-update-form',
    'action' => ['/cart/index'],
    'options' => ['method' => 'post'],
]); ?>

<div class="container my-2">
<div class="row justify-content-center">
<div class="col-lg-10 col-md-10 col-sm-12">

<style>
img.product-img
{
    width: 120px;
    height: auto;
}
.cart-item
{
    border-bottom: 1px solid #dee2e6;/* border */
}
.cart-item:last-child
{
    border-bottom: none;/* no border on last */
}

@media (max-width: 767.98px)
{
    img.product-img
    {
        width: 100px;
        height: auto;
    }
    .d-md-none
    {
        display: block !important;
    }
    .d-none.d-md-block
    {
        display: none !important;
    }
}
@media (min-width: 768px)
{
    .d-md-none
    {
        display: none !important;
    }
    .d-none.d-md-block
    {
        display: block !important;
    }
}
</style>

<!----------------------------------------------------------------------- desktop and tablet -->
<div class="d-none d-md-block">
<table class="table table-hover align-middle">
<thead>
<tr>
<th scope="col"><!-- image --></th>
<th scope="col">Item</th>
<th scope="col">Price</th>
<th scope="col" style="width:120px;">Quantity</th>
<th scope="col">Total</th>
<th><!-- action --></th>
</tr>
</thead>

<tbody>

<?php foreach ($model->items as $index => $item):
    $pid = $item['productId'];
    $product = $products[$pid] ?? null;
    if (!$product) continue;
    
    $availableQty = $product->availableQuantity ?? 100;
    $unitPrice = isset($product->price) ? $product->price : 0;
    $quantity = $item['quantity'];
    $totalPrice = $unitPrice * $quantity;
?>
<tr>

<th scope="row">
    <img src="<?= Html::encode($product->imageUrl ?? '/img/default-product.png') ?>" alt="<?= Html::encode($product->title) ?>" class="product-img" />
</th>

<td><?= Html::encode($product->title) ?></td>
<td>$<?= number_format($unitPrice, 2) ?></td>
<td>
    <?= $form->field($model, "items[$index][quantity]", ['template' => "{input}\n{error}"])
        ->input('number', [
            'min' => 1,
            'max' => $availableQty,
            'class' => 'form-control square',
            'style' => 'max-width: 5rem;',
            'value' => $quantity,
        ])->label(false) ?>
    <?= Html::activeHiddenInput($model, "items[$index][productId]", ['value' => $pid]) ?>
</td>
<td>$<?= number_format($totalPrice, 2) ?></td>

<td>
    <a href="#" class="btn btn-outline-danger btn-remove-item square" data-product-id="<?= Html::encode($pid) ?>">Remove</a>
</td>

</tr>
<?php endforeach; ?>

</tbody>

</table>
</div><!-- .d-none .d-md-block -->
<!----------------------------------------------------------------------- desktop and tablet -->


<!----------------------------------------------------------------------- mobile cards -->
<div class="d-md-none">
<div class="card border-0 border-bottom square">
<!-- <div class="card-header"> Your Shopping Cart</div> -->
<div class="card-body">

<?php foreach ($model->items as $index => $item):
    $pid = $item['productId'];
    $product = $products[$pid] ?? null;
    if (!$product) continue;
    
    $availableQty = $product->availableQuantity ?? 100;
    $unitPrice = isset($product->price) ? $product->price : 0;
    $quantity = $item['quantity'];
    $totalPrice = $unitPrice * $quantity;
?>
<!--------------------------------- item -->
<div class="cart-item">
<div class="d-flex align-items-center">

<div class="me-3 flex-shrink-0">
    <img src="<?= Html::encode($product->imageUrl ?? '/img/default-product.png') ?>" alt="<?= Html::encode($product->title) ?>" class="img-fluid product-img" />
</div><!-- .me-3 .flex-shrink-0 -->

<div class="flex-grow-1">
    <h6 class="mb-1"><?= Html::encode($product->title) ?></h6>
    <div class="mb-2"><strong>Price:</strong> $<?= number_format($unitPrice, 2) ?></div>

    <div class="d-flex align-items-center gap-2">
        <label for="quantity-<?= $index ?>" class="form-label mb-0" style="min-width: 60px;">Quantity:</label>
        <?= Html::activeHiddenInput($model, "items[$index][productId]", ['value' => $pid]) ?>
        <?= $form->field($model, "items[$index][quantity]", ['template' => "{input}\n{error}"])
            ->input('number', [
                'id' => "quantity-$index",
                'min' => 1,
                'max' => $availableQty,
                'class' => 'form-control',
                'style' => 'max-width: 5rem;',
                'value' => $quantity,
            ])->label(false) ?>
    </div><!-- .mb-2 .d-flex .align-items-center .gap-2 -->

    <div><strong>Total:</strong> $<?= number_format($totalPrice, 2) ?></div>
</div><!-- .flex-grow-1 -->
</div><!-- .d-flex .align-items-center -->

<a href="#" class="btn btn-outline-danger btn-remove-item w-100 mt-3 square" data-product-id="<?= Html::encode($pid) ?>">Remove</a>

</div><!-- .cart-item -->
<!--------------------------------- item -->
<?php endforeach; ?>

</div><!-- .card-body -->
</div><!-- .card -->
</div><!-- .d-md-none -->
<!----------------------------------------------------------------------- mobile cards -->



<ul class="nav flex-column flex-md-row justify-content-md-end gap-2 px-0 mt-4">
<!-- Checkout: mobile order 1 (first), desktop order 2 (second) -->
<li class="nav-item flex-grow-1 flex-md-grow-0 order-1 order-md-2">
    <a href="/cart/purchase" class="btn btn-success w-100 w-md-auto square">Checkout</a>
</li>

<!-- Update Cart: mobile order 2 (second), desktop order 1 (first) -->
<li class="nav-item flex-grow-1 flex-md-grow-0 order-2 order-md-1">
    <?= Html::submitButton('Update Cart', ['class' => 'btn btn-outline-secondary w-100 w-md-auto square']) ?>
</li>
</ul>

</div><!-- .col-lg-10 .col-md-10 .col-sm-12-->
</div><!-- .row .justify-content-center -->
</div><!-- .container .my-2 -->

<div class="text-center" style="margin:1em 1em">
<small class="text-muted">All payments and transactions are powered by <a href="https://stripe.com/">stripe</a></small>
</div>

<?php ActiveForm::end(); ?>
```

is it smart to loop the same foreach twice?