<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>WBX Admin - Role Detail</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" th:if="${role}">
        <div class="page-header">
            <h1>역할 상세: <span th:text="${role.code}"></span></h1>
            <p><a th:href="@{/admin/roles}" style="color:#1e3c78;">← 역할 목록으로</a></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:20px;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/{id}/update(id=${role.id})}" 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 th:value="${role.code}" disabled style="padding:6px 10px;border:1px solid #eee;border-radius:4px;font-size:13px;background:#f5f5f5;width:140px;">
                </div>
                <div>
                    <label style="font-size:12px;color:#888;display:block;margin-bottom:4px;">이름</label>
                    <input name="name" th:value="${role.name}" required 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" th:value="${role.description}" style="padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;width:280px;">
                </div>
                <button type="submit" class="btn btn-primary">수정</button>
            </form>
        </div>

        <!-- 권한 추가 -->
        <div style="background:#fff;border-radius:8px;padding:20px;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/{id}/permissions/add(id=${role.id})}" 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="module" required placeholder="예: TIMESHEET" 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>
                    <select name="action" style="padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;">
                        <option value="VIEW">VIEW (조회)</option>
                        <option value="CREATE">CREATE (생성)</option>
                        <option value="UPDATE">UPDATE (수정)</option>
                        <option value="DELETE">DELETE (삭제)</option>
                        <option value="APPROVE">APPROVE (결재)</option>
                        <option value="EXPORT">EXPORT (내보내기)</option>
                    </select>
                </div>
                <div>
                    <label style="font-size:12px;color:#888;display:block;margin-bottom:4px;">데이터 범위</label>
                    <select name="deptScope" style="padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:13px;">
                        <option th:each="s : ${deptScopes}" th:value="${s.name()}" th:text="${s.name() == 'OWN' ? 'OWN (본인)' : (s.name() == 'DEPT' ? 'DEPT (부서)' : 'COMPANY (전사)')}"></option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">추가</button>
            </form>
        </div>

        <!-- 현재 권한 목록 -->
        <div class="data-table">
            <table>
                <thead><tr><th>모듈</th><th>액션</th><th>범위</th><th>관리</th></tr></thead>
                <tbody>
                <tr th:each="perm : ${permissions}">
                    <td th:text="${perm.module}"></td>
                    <td><span class="badge badge-info" th:text="${perm.action}"></span></td>
                    <td>
                        <span class="badge" th:classappend="${perm.deptScope?.name() == 'COMPANY'} ? 'badge-success' : (${perm.deptScope?.name() == 'DEPT'} ? 'badge-warning' : '')"
                              th:text="${perm.deptScope?.name()}"></span>
                    </td>
                    <td>
                        <form th:action="@{/admin/permissions/{id}/delete(id=${perm.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(permissions)}"><td colspan="4" style="text-align:center;color:#888;padding:20px;">설정된 권한이 없습니다. 위 폼에서 권한을 추가하세요.</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>
