<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- Main body -->
<div class="main_body">
    <section id="section8" class="main_bars">
        <div class="bgs-main">
            <section id="section5">
                <div class="sub_title"></div>
            </section>
        </div>
    </section>
    <div class="contants_body">
        <div class="auth-card-container">
            <div class="auth-card" onclick="location.href='<c:url value='/system/auth/groupRole.do'/>'">
                <div class="auth-card-icon">
                    <i class="fas fa-users-cog"></i>
                </div>
                <div class="auth-card-title">그룹-역할 권한 관리</div>
                <div class="auth-card-description">
                    그룹에 역할을 부여하거나 회수합니다.
                </div>
            </div>

            <div class="auth-card" onclick="location.href='<c:url value='/system/auth/roleMenu.do'/>'">
                <div class="auth-card-icon">
                    <i class="fas fa-user-shield"></i>
                </div>
                <div class="auth-card-title">역할-메뉴 권한 관리</div>
                <div class="auth-card-description">
                    역할에 메뉴 접근 권한을 부여하거나 회수합니다.
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Main body -->

<style>
.auth-card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.auth-card {
    width: 300px;
    height: 250px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.auth-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.auth-card-icon {
    font-size: 48px;
    color: #3498db;
    margin-bottom: 20px;
}

.auth-card-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.auth-card-description {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}
</style>

<script type="text/javascript">
/**
 * 권한 부여 메인 모듈
 * 권한 부여 관련 기능을 선택할 수 있는 메인 페이지 기능을 제공합니다.
 */
(function(window, $) {
    'use strict';

    /**
     * 권한 부여 메인 네임스페이스
     */
    var AuthMain = {
        /**
         * 모듈 초기화
         */
        init: function() {
            // 필요한 초기화 작업이 있다면 여기에 구현
        }
    };

    // 페이지 로드 시 초기화
    $(function() {
        AuthMain.init();
    });

})(window, jQuery);
</script>