<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" xmlns:uind="http://www.w3.org/1999/xhtml">
    <head th:replace="_fragments :: head('Job Cards')"></head>
    <body>
        <div class="container-fluid">
            <header class="row page-header" th:replace="_fragments :: page-header"></header>
            <main class="row page-main">
                <!-- sidebar starts -->
                <aside class="col-sm-2" th:replace="_job-card-sidebar :: sidebar"></aside>
                <!-- sidebar ends -->
                <!--header starts-->
                <div class="col-sm">
                    <div th:replace="_notices :: page-notices"></div>
                        <div class="mb-4 d-flex justify-content-between">
                            <h3>Job Cards</h3>
                            <a th:href="@{/job-cards/new}" class="btn btn-primary">Add New</a>
                        </div>
                    <div th:replace="_fragments :: table-loading-skeleton"></div>
                    <table th:if="${ #lists != null && #lists.size(cards) !=  0 }" class="table table-striped font-sm" data-table data-order="[[ 0, &quot;asc&quot; ]]">
                        <thead>
                            <tr>
                                <th>Code</th>
                                <th>Job Order</th>
                                <th>Status</th>
                                <th>Inventory Status</th>
                                <th>Customer</th>
                                <th>Lot Number</th>
                                <th>Purchase Order ID</th>
                                <th>Location Site</th>
                                <th>Added Date</th>
                                <th>Added By</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="card : ${cards}" th:object="${card}">
                                <td><a class="text-reset" th:href="@{'/job-cards/view/'  + *{id}}" th:text="*{code}"></a></td>
                                <td th:text="*{jobOrderId}"></td>
                                <td>
                                    <span class="badge font-sm" th:classappend="'badge-' + *{status}" th:if="*{status}" th:text="*{status}"></span>
                                    <span th:unless="*{status}">-</span>
                                </td>
                                <td>
                                    <span class="badge font-sm" th:classappend="'badge-' + *{inventoryStatus}" th:if="*{inventoryStatus}" th:text="*{inventoryStatus}"></span>
                                    <span th:unless="*{inventoryStatus}">-</span>
                                </td>
                                <td th:text="*{customer}"></td>
                                <td th:text="*{lotNumber}"></td>
                                <td th:text="*{purchaseOrderId}"></td>
                                <td>
                                    <th:block th:switch="*{locationSiteId}">
                                        <span th:each="location: ${locations}" th:case="${location.id}" th:text="${location.title}"></span>
                                    </th:block>
                                </td>
                                <td ctp:formatdatetime="*{createdAt}"></td>
                                <td th:text="*{createdBy}"></td>
                                <td>
                                    <th:block th:if="*{status == 'DRAFT'}">
                                    <a th:href="@{'/job-cards/edit/' + *{id}}" class="btn btn-sm btn-secondary" title="Edit">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    </th:block>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <h4 th:if="${#lists.size(cards) ==  0 }">No cards found.</h4>
                </div>
            </main>
        </div>
        <div th:replace="_fragments :: page-footer-scripts"></div>
    </body>
</html>