<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Dell iDRAC 멀티 서버 관리</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/idrac_style.css') }}">
</head>

<body>
    <div class="container">
        <header>
            <h1>🖥️ Dell iDRAC 멀티 서버 관리</h1>
            <p class="subtitle">서버 등록, 연결 상태 확인 및 설정 정밀 분석 시스템</p>
        </header>

        <!-- 서버 관리 섹션 -->
        <section class="card">
            <div class="card-header">
                <h2>📋 서버 목록 관리</h2>
                <div class="header-actions">
                    <button onclick="showAddServerModal()" class="btn btn-primary">+ 서버 추가</button>
                    <a href="/server-config/" class="btn btn-secondary">⚙️ 설정 정밀 분석 및 DB 동기화</a>
                    <button onclick="refreshServers()" class="btn btn-info">🔄 새로고침</button>
                </div>
            </div>

            <!-- 그룹 필터 -->
            <div class="filter-group">
                <label>그룹:</label>
                <select id="group-filter" onchange="filterByGroup()">
                    <option value="all">전체</option>
                </select>
                <span id="server-count" class="count-badge">0대</span>
            </div>

            <!-- 서버 목록 테이블 -->
            <div class="table-container">
                <table class="server-table" id="server-table">
                    <thead>
                        <tr>
                            <th width="40"><input type="checkbox" id="select-all" onchange="toggleSelectAll()"></th>
                            <th>서버명</th>
                            <th>IP 주소</th>
                            <th>그룹</th>
                            <th>상태</th>
                            <th>모델</th>
                            <th>최근 연결</th>
                            <th width="150">작업</th>
                        </tr>
                    </thead>
                    <tbody id="server-list">
                        <tr>
                            <td colspan="8" class="empty-message">등록된 서버가 없습니다</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 선택 작업 -->
            <div class="bulk-actions">
                <span id="selected-count">선택: 0대</span>
                <button onclick="testSelectedConnections()" class="btn btn-info">연결 테스트</button>
                <button onclick="rebootSelected()" class="btn btn-danger">재부팅</button>
            </div>
        </section>

        <footer>
            <p>Dell iDRAC 멀티 서버 관리 시스템</p>
        </footer>
    </div>

    <!-- 서버 추가 모달 -->
    <div id="add-server-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h3>서버 추가</h3>
                <span class="close" onclick="closeAddServerModal()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="server-name">서버명 *</label>
                    <input type="text" id="server-name" placeholder="예: Server-01">
                </div>
                <div class="form-group">
                    <label for="server-ip">iDRAC IP *</label>
                    <input type="text" id="server-ip" placeholder="192.168.1.100">
                </div>
                <div class="form-group">
                    <label for="server-username">사용자명</label>
                    <input type="text" id="server-username" value="root">
                </div>
                <div class="form-group">
                    <label for="server-password">비밀번호 *</label>
                    <input type="password" id="server-password">
                </div>
                <div class="form-group">
                    <label for="server-group">그룹</label>
                    <input type="text" id="server-group" placeholder="예: 삼성전자 납품">
                </div>
                <div class="form-group">
                    <label for="server-model">모델</label>
                    <input type="text" id="server-model" placeholder="예: PowerEdge R750">
                </div>
            </div>
            <div class="modal-footer">
                <button onclick="closeAddServerModal()" class="btn btn-secondary">취소</button>
                <button onclick="addServer()" class="btn btn-primary">추가</button>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='vendor/socket.io/socket.io-4.5.4.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/idrac_main.js') }}"></script>
</body>

</html>
