<!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; }
        table { border-collapse: collapse; margin-top: 16px; }
        th, td { border: 1px solid #ddd; padding: 8px 16px; text-align: left; overflow-wrap: anywhere; }
        th { background: #f5f0f0; width: 140px; }
        .low-stock { color: #8a1f2d; font-weight: bold; }
        form { margin-top: 24px; }
        input[type="number"] { padding: 6px 10px; width: 80px; border: 1px solid #bbb; border-radius: 4px; }
        button { padding: 6px 16px; border: none; border-radius: 4px; background: #8a1f2d; color: #fff; cursor: pointer; }
        a { color: #8a1f2d; }
    </style>
</head>
<body>
    <h1 th:text="${equipment.name}">備品名</h1>

    <table>
        <tr><th>備品コード</th><td th:text="${equipment.code}">EQ-0001</td></tr>
        <tr><th>カテゴリ</th><td th:text="${equipment.category}">カテゴリ</td></tr>
        <tr>
            <th>在庫数</th>
            <td>
                <span th:text="${equipment.stock}">0</span>
                <span class="low-stock" th:if="${lowStock}">（要補充）</span>
            </td>
        </tr>
        <tr><th>保管場所</th><td th:text="${equipment.location}">保管場所</td></tr>
        <tr><th>購入日</th><td th:text="${purchaseDate}">2024-01-01</td></tr>
        <tr><th>備考（要約）</th><td th:text="${noteSummary}">備考</td></tr>
    </table>

    <form method="post" th:action="@{/equipments/{id}/lend(id=${equipment.id})}">
        <label>貸出数 <input type="number" name="quantity" value="1"></label>
        <button type="submit">貸し出す</button>
    </form>

    <p><a href="/equipments">一覧へ戻る</a></p>
</body>
</html>
