{{define "components_list.html"}}
{{if .Components}}
<div class="bg-white rounded-lg shadow overflow-hidden">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Артикул</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Категория</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Описание</th>
                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Цена</th>
                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-24"></th>
            </tr>
        </thead>
        <tbody class="divide-y">
            {{range .Components}}
            <tr class="hover:bg-gray-50">
                <td class="px-4 py-3 text-sm font-medium font-mono">{{.LotName}}</td>
                <td class="px-4 py-3 text-sm">
                    <span class="px-2 py-1 text-xs rounded bg-gray-100">{{.Category}}</span>
                </td>
                <td class="px-4 py-3 text-sm text-gray-500 max-w-md truncate">{{.Description}}</td>
                <td class="px-4 py-3 text-sm text-right font-medium">
                    {{if .CurrentPrice}}
                        ${{printf "%.2f" (deref .CurrentPrice)}}
                    {{else}}
                        <span class="text-gray-400">—</span>
                    {{end}}
                </td>
                <td class="px-4 py-3 text-center">
                    {{if .CurrentPrice}}
                    <button onclick="addToCart('{{jsesc .LotName}}', {{deref .CurrentPrice}}, '{{jsesc .Description}}')"
                            class="px-3 py-1 bg-orange-600 text-white text-xs rounded hover:bg-orange-700">
                        + Добавить
                    </button>
                    {{else}}
                    <span class="text-gray-400 text-xs">Нет цены</span>
                    {{end}}
                </td>
            </tr>
            {{end}}
        </tbody>
    </table>
</div>

<p class="text-center text-sm text-gray-500 mt-4">Найдено: {{.Total}}</p>

{{else}}
<div class="bg-white rounded-lg shadow p-8 text-center text-gray-500">
    Компоненты не найдены
</div>
{{end}}
{{end}}