<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
    <head th:fragment="head (title)">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="shortcut icon" href="../static/img/favicon.ico" th:href="@{/img/favicon.ico}">
        <link rel="stylesheet" th:href="@{/css/style.css}">
        <script th:src="@{/js/vendor/jquery-3.4.1.min.js}"></script>
        <script th:src="@{/js/vendor/bootstrap.bundle.js}"></script>
        <script th:src="@{/js/vendor/luxon.min.js}"></script>
        <script th:src="@{/js/vendor/datatables.min.js}"></script>
        <script th:src="@{/js/vendor/dataTables.fixedColumns.min.js}"></script>
        <script th:src="@{/js/vendor/jquery-ui.js}"></script>
        <script th:src="@{/js/vendor/vue.js}"></script>
        <script th:src="@{/js/vendor/select2.full.min.js}"></script>
        <script th:src="@{/js/vendor/bignumber.min.js}"></script>
        <script th:src="@{/js/vue-components.js}"></script>
        <script th:src="@{/js/utils.js}"></script>
        <title th:text="${#strings.concat(title, ' - CTP')}"></title>
    </head>
    <body>

        <header class="row page-header font-sm" th:fragment="page-header">
            <!--<editor-fold desc="Description">-->
            <div class="col-sm">
                <nav class="navbar navbar-expand-lg navbar-dark bg-dark " role="navigation">
                    <a class="navbar-brand text-white-50" th:href="@{/}">
                        <img th:src="@{/img/utopia-industries-white.svg}" class="page-header__logo" alt="Utopia Industries">
                    </a>
                    <ul class="navbar-nav">
                        <li class="nav-item" sec:authorize="hasAnyRole('ROLE_JOB_CARD', 'ROLE_ADMIN')">
                            <a th:href="@{/job-cards/}" class="nav-link"
                               th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards') ? 'active' : ''}">Job Cards</a>
                        </li>
                        <li class="nav-item" sec:authorize="hasAnyRole('ROLE_CUTTING', 'ROLE_ADMIN')">
                            <a th:href="@{/cutting/}" class="nav-link"
                               th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting') ? 'active' : ''}">Cutting</a>
                        </li>
                        <li class="nav-item" sec:authorize="hasAnyRole('ROLE_STITCHING', 'ROLE_ADMIN')">
                            <a th:href="@{/stitching/}" class="nav-link"
                               th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching') ? 'active' : ''}">Stitching</a>
                        </li>
                        <li class="nav-item" sec:authorize="hasAnyRole('ROLE_QUALITY_CONTROL', 'ROLE_ADMIN')">
                            <a th:href="@{/quality-control/}" class="nav-link"
                               th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control') ? 'active' : ''}">Quality Control</a>
                        </li>
                        <li class="nav-item" sec:authorize="hasAnyRole('ROLE_FINISHING', 'ROLE_ADMIN')">
                            <a th:href="@{/finishing/}" class="nav-link"
                               th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing') ? 'active' : ''}">Finishing</a>
                        </li>
                        <li class="nav-item" sec:authorize="hasAnyRole('ROLE_PACKAGING', 'ROLE_ADMIN')">
                            <a th:href="@{/packaging/}" class="nav-link"
                               th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging') ? 'active' : ''}">Packaging</a>
                        </li>

                        <li class="nav-item" sec:authorize="hasAnyRole('ROLE_REPORTING', 'ROLE_ADMIN')">
                            <a th:href="@{/reporting/summary}" class="nav-link"
                               th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/reporting') ? 'active' : ''}">Reporting</a>
                        </li>


                        <li class="nav-item dropdown" sec:authorize="hasRole('ROLE_ADMIN')">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Admin</a>
                            <div class="dropdown-menu">
                                <!--  Add Inventory Accounts-->
                                <a th:href="@{/inventory-accounts}"
                                   th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/inventory-accounts') ? 'active' : ''}"
                                   class="dropdown-item">Inventory Accounts</a>
                                <a th:href="@{/processes}"
                                    th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/processes') ? 'active' : ''}"
                                    class="dropdown-item">Processes</a>
                                <!-- User and Roles -->
                                <a th:href="@{/users}"
                                   th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/users') ? 'active' : ''}"
                                   class="dropdown-item">User And Roles</a>
                            </div>
                        </li>
                    </ul>
                    <div class="dropdown page-header__user-menu">
                        <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light" data-toggle="dropdown">
                            <i class="bi bi-person"></i>
                            <span sec:authentication="name"></span>
                        </a>
                        <div class="dropdown-menu">
                            <form th:action="@{/logout}" method="POST" class="page-header__logout">
                                <button type="submit">Logout</button>
                            </form>
                    </div>
                    </div>
                </nav>
                <!--  second level job cards-->
                <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
                     th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards')}">
                    <ul class="navbar-nav">
                        <li class="nav-item"
                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/job-cards') ? 'active' : ''}">
                            <a th:href="@{/job-cards/}" class="nav-link">Cards</a>
                        </li>
                    </ul>
                </nav>
                <!--  second level cutting -->
                <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
                     th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting')}">
                    <ul class="navbar-nav">
                        <li class="nav-item"
                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/receive-inventory') ? 'active' : ''}">
                            <a th:href="@{/cutting/receive-inventory}" class="nav-link">Receive Inventory</a>
                        </li>
                        <li class="nav-item"
                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/inventory-accounts') ? 'active' : ''}">
                            <a th:href="@{/cutting/inventory-accounts}" class="nav-link">Inventory Accounts</a>
                        </li>
                        <li class="nav-item"
                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/bundles') ? 'active' : ''}">
                            <a th:href="@{/cutting/bundles}" class="nav-link">Bundles</a>
                        </li>
                        <li class="nav-item"
                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/generate-master-barcode') ? 'active' : ''}">
                            <a th:href="@{/cutting/generate-master-barcode}" class="nav-link">Generate Master Barcode</a>
                        </li>

                        <li class="nav-item"
                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/cutting/master-bundles') ? 'active' : ''}">
                            <a th:href="@{/cutting/master-bundles}" class="nav-link">Master Bundles</a>
                        </li>
                    </ul>
                </nav>
                <!--  second level stitching -->
                <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
                     th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching')}">
                    <ul class="navbar-nav">
                        <li class="nav-item"
                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching/receive-inventory') ? 'active' : ''}">
                            <a th:href="@{/stitching/receive-inventory}" class="nav-link">Receive Inventory</a>
                        </li>
                        <li class="nav-item"
                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching/inventory-accounts') ? 'active' : ''}">
                            <a th:href="@{/stitching/inventory-accounts}" class="nav-link">Inventory Accounts</a>
                        </li>
                        <li class="nav-item"
                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/stitching/stitching-offline-items') ? 'active' : ''}">
                            <a th:href="@{/stitching/stitching-offline-items}" class="nav-link">Stitching Offline Items</a>
                        </li>
                    </ul>
                </nav>
            <!--  second level quality control-->
                <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
                     th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control')}">
                    <ul class="navbar-nav">
                        <li class="nav-item"
                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control/qc-finished-items') ? 'active' : ''}">
                            <a th:href="@{/quality-control/qc-finished-items}" class="nav-link">QC Finished Item</a>
                        </li>
<!--                        <li class="nav-item"-->
<!--                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/quality-control/inventory-accounts') ? 'active' : ''}">-->
<!--                            <a th:href="@{/quality-control/inventory-accounts}" class="nav-link">Inventory Accounts</a>-->
<!--                        </li>-->
                    </ul>
                </nav>
                <!--  second level stitching -->
                <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
                     th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing')}">
                    <ul class="navbar-nav">
                        <li class="nav-item"
                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing/finished-items') ? 'active' : ''}">
                            <a th:href="@{/finishing/finished-items}" class="nav-link">Finished Items</a>
                        </li>
                        <li class="nav-item"
                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing/inventory-accounts') ? 'active' : ''}">
                            <a th:href="@{/finishing/inventory-accounts}" class="nav-link">Inventory Accounts</a>
                        </li>
                        <li class="nav-item"
                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/finishing/segregate-inventory') ? 'active' : ''}">
                            <a th:href="@{/finishing/segregate-inventory}" class="nav-link">Segregate Inventory</a>
                        </li>
                    </ul>
                </nav>
                <!--  second level packaging -->
                <nav class="navbar navbar-light bg-light navbar-expand-lg justify-content-between"
                     th:if="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging')}">
                    <ul class="navbar-nav">
                        <li class="nav-item"
                            th:classappend="${#strings.startsWith(#httpServletRequest.getRequestURI(), '/ctp/packaging/inventory-accounts') ? 'active' : ''}">
                            <a th:href="@{/packaging/inventory-accounts}" class="nav-link">Inventory Accounts</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- table loading skeleton -->
        <div class="table-loading-skeleton" th:fragment="table-loading-skeleton">
            <div class="d-flex justify-content-between">
                <div>
                    <div class="skeleton-box" style="width:35px;"></div>
                </div>
                <div>
                    <div class="skeleton-box" style="width:200px;"></div>
                </div>
            </div>
            <div th:each="i: ${#numbers.sequence(0, 15)}" class="row">
                <div class="col-sm-2">
                    <div class="skeleton-box"></div>
                </div>
                <div class="col-sm-1" th:each="j: ${#numbers.sequence(0, 9)}">
                    <div class="skeleton-box"></div>
                </div>
            </div>
        </div>

        <div th:fragment="page-footer-scripts">
            <script th:src="@{/js/vendor/lazyload-db.js}"></script>
            <script th:src="@{/js/main.js}"></script>
        </div>
    </body>
</html>
