<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>WBX Admin - Roles</title><link rel="stylesheet" th:href="@{/admin/css/admin.css}"></head>
<body>
<div class="admin-layout">
    <div th:replace="~{admin/fragments :: sidebar('roles')}"></div>
    <div class="admin-content">
        <div class="page-header"><h1>역할 관리</h1><p>역할 추가/수정/삭제 및 권한 설정</p></div>
        <div th:if="${message}" class="alert alert-success" th:text="${message}"></div>
        <div th:if="${error}" class="alert" style="background:#ffebee;color:#c62828;border:1px solid #ffcdd2;padding:12px 16px;border-radius:6px;margin-bottom:16px;font-size:13px;" th:text="${error}"></div>

        <!-- 역할 추가 폼 -->
        <div style="background:#fff;border-radius:8px;padding:16px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,0.08);">
            <h3 style="margin-bottom:12px;font-size:15px;color:#1e3c78;">새 역할 추가</h3>
            <form th:action="@{/admin/roles/add}" method="post" style="display:flex;gap:10px;align-items:end;flex-wrap:wrap;">
                <div>
                    <label style="font-size:12px;color:#888;display:block;margin-bottom:4px;">코드</label>
                    <input name="code" required placeholder="예: MANAGER" style="padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;width:140px;">
                </div>
                <div>
                    <label style="font-size:12px;color:#888;display:block;margin-bottom:4px;">이름</label>
                    <input name="name" required placeholder="예: 관리자" style="padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;width:160px;">
                </div>
                <div>
                    <label style="font-size:12px;color:#888;display:block;margin-bottom:4px;">설명</label>
                    <input name="description" placeholder="역할 설명" style="padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;width:240px;">
                </div>
                <button type="submit" class="btn btn-primary">추가</button>
            </form>
        </div>

        <!-- 역할 목록 -->
        <div class="data-table">
            <table>
                <thead><tr><th>ID</th><th>코드</th><th>이름</th><th>설명</th><th>시스템</th><th>관리</th></tr></thead>
                <tbody>
                <tr th:each="role : ${roles}">
                    <td th:text="${role.id}"></td>
                    <td><span class="badge badge-info" th:text="${role.code}"></span></td>
                    <td th:text="${role.name}"></td>
                    <td th:text="${role.description}"></td>
                    <td th:text="${role.system} ? 'Y' : ''"></td>
                    <td>
                        <a th:href="@{/admin/roles/{id}(id=${role.id})}" class="btn btn-outline" style="padding:3px 10px;font-size:12px;">상세/권한</a>
                        <form th:unless="${role.system}" th:action="@{/admin/roles/{id}/delete(id=${role.id})}" method="post" style="display:inline;" onsubmit="return confirm('삭제하시겠습니까?')">
                            <button type="submit" class="btn btn-danger" style="padding:3px 10px;font-size:12px;">삭제</button>
                        </form>
                    </td>
                </tr>
                <tr th:if="${#lists.isEmpty(roles)}"><td colspan="6" style="text-align:center;color:#888">등록된 역할이 없습니다.</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>
