<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>備品一覧 | 備品管理システム</title>
    <style>
        body { font-family: "Noto Sans CJK JP", "Hiragino Sans", sans-serif; margin: 24px; color: #333; }
        h1 { font-size: 20px; border-bottom: 2px solid #8a1f2d; padding-bottom: 8px; }
        form { margin: 16px 0; }
        input[type="text"] { padding: 6px 10px; width: 240px; border: 1px solid #bbb; border-radius: 4px; }
        button { padding: 6px 16px; border: none; border-radius: 4px; background: #8a1f2d; color: #fff; cursor: pointer; }
        table { border-collapse: collapse; width: 100%; table-layout: auto; }
        th, td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; overflow-wrap: anywhere; }
        th { background: #f5f0f0; }
        .low-stock { color: #8a1f2d; font-weight: bold; }
        a { color: #8a1f2d; }
    </style>
</head>
<body>
    <h1>備品一覧</h1>

    <form method="get" action="/equipments">
        <input type="text" name="keyword" th:value="${keyword}" placeholder="備品名で検索">
        <button type="submit">検索</button>
    </form>

    <table>
        <thead>
            <tr>
                <th>備品コード</th>
                <th>備品名</th>
                <th>カテゴリ</th>
                <th>在庫数</th>
                <th>保管場所</th>
                <th>購入日</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="eq : ${equipments}">
                <td th:text="${eq.code}">EQ-0001</td>
                <td>
                    <a th:href="@{/equipments/{id}(id=${eq.id})}" th:text="${eq.name}">備品名</a>
                </td>
                <td th:text="${eq.category}">カテゴリ</td>
                <td>
                    <span th:text="${eq.stock}">0</span>
                    <span class="low-stock" th:if="${lowStockFlags[eq.id]}">（要補充）</span>
                </td>
                <td th:text="${eq.location}">保管場所</td>
                <td th:text="${purchaseDates[eq.id]}">2024/01/01</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
