<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{layouts/layout}"
    layout:fragment="content" lang="ko" xml:lang="ko">
    <head>
        <title>User Management</title>
    </head>
    <body>
        <main id="main" class="main">
            <div class="pagetitle">
                <div class="row align-items-center">
                    <div class="col">
                        <h1><i class="bi bi-person"></i> 사용자 관리</h1>
                    </div>
                    <div class="col-auto">
                        <nav>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">홈</li>
                                <li class="breadcrumb-item active">사용자 관리</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
            <section class="section">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title fs-6 text-dark">
                                    <i class="bi bi-search"></i> 사용자 검색
                                </h5>
                                <form id="searchForm" class="row g-3">
                                    <div class="col-md-2">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="userId" name="userId" placeholder="사용자ID">
                                            <label for="userId"><i class="bi bi-person"></i> 사용자 ID</label>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="userName" name="userName" placeholder="사용자명">
                                            <label for="userName"><i class="bi bi-person-vcard"></i> 사용자명</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="email" name="email" placeholder="이메일">
                                            <label for="email"><i class="bi bi-envelope"></i> 이메일</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label" for="approvedGroup"><i class="bi bi-check-circle"></i> 승인 여부</label>
                                        <div id="approvedGroup" class="d-flex">
                                            <div class="form-check me-2">
                                                <input type="radio" class="form-check-input" id="all" name="approved" value="all" checked>
                                                <label class="form-check-label" for="all">전체</label>
                                            </div>
                                            <div class="form-check me-2">
                                                <input type="radio" class="form-check-input" id="approved" name="approved" value="true">
                                                <label class="form-check-label" for="approved">승인</label>
                                            </div>
                                            <div class="form-check">
                                                <input type="radio" class="form-check-input" id="notApproved" name="approved" value="false">
                                                <label class="form-check-label" for="notApproved">미승인</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="submit" class="btn btn-primary h-100 w-100">
                                            <i class="bi bi-search"></i> 검색
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title d-flex justify-content-between align-items-center">
                                    <span class="fs-6 text-dark"><i class="bi bi-list-ul"></i> 사용자 목록</span>
                                    <button id="updateUserBtn" class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="사용자 수정">
                                        <i class="bi bi-pencil-fill"></i>
                                    </button>
                                </h5>
                                <div class="table-responsive" style="max-height: 450px; overflow-y: auto;">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th class="col-1 text-nowrap bg-light"><i class="bi bi-person"></i> 사용자 ID</th>
                                                <th class="col-1 text-nowrap bg-light"><i class="bi bi-person-vcard"></i> 사용자명</th>
                                                <th class="col-1 text-nowrap bg-light"><i class="bi bi-envelope"></i> 이메일</th>
                                                <th class="col-1 text-nowrap bg-light"><i class="bi bi-shield-lock"></i> 권한</th>
                                                <th class="col-1 text-nowrap bg-light"><i class="bi bi-check-circle"></i> 승인 여부</th>
                                                <th class="col-1 text-nowrap bg-light"><i class="bi bi-gear"></i> 액션</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <script th:inline="javascript">
                /*<![CDATA[*/
                const ROLES = /*[[${roles}]]*/ []; 
                /*]]>*/
            </script>
            <script type="module" th:src="@{/js/pages/user/user-management.js}" defer></script>
        </main>
    </body>
</html>