@extends('layout')
@includes('includes/small-feature')
<div class="container mx-auto px-8 py-8 md:py-16">
    <div class="flex justify-between items-center">
        <h1 class="text-3xl font-bold">
            Items
        </h1>
        @if($canManage)
            <a href="{{ $createAction }}" class="bg-indigo-500 rounded-lg p-2 text-white">
                Add item
            </a>
        @endif
    </div>

    @if(count($items) === 0)
        <p class="text-gray-500 my-4">No items yet.</p>
    @endif

    <ul class="my-4 space-y-2">
        @foreach($items as $item)
            <li class="
                rounded-lg p-4 flex justify-between items-center
                @if($item->isLowStock) bg-red-50 @endif
                @if(!$item->isLowStock) bg-gray-50 @endif
            ">
                <a href="{{ $item->route }}" class="font-bold underline">
                    {{ $item->sku }} &mdash; {{ $item->name }}
                </a>
                <span class="@if($item->isLowStock) text-red-500 @endif">
                    {{ $item->totalQuantity }} units
                </span>
            </li>
        @endforeach
    </ul>
</div>