<%- include('../partials/header') %>
<%- include('../partials/sidebar') %>

<main class="main-content">
    <div id="games-section" class="content-section active">
        <div class="section-header">
            <h2 class="page-title">
                <i class="fas fa-gamepad"></i>
                Game Management
            </h2>
        </div>

        <!-- Statistics Cards -->
        <div class="stats-grid" id="game-stats">
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-gamepad"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Total Games</div>
                    <div class="stat-value" id="stat-total-games">0</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="background: linear-gradient(135deg, #10b981 0%, #0cebeb 100%); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);">
                    <i class="fas fa-toggle-on"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Active Games</div>
                    <div class="stat-value" id="stat-active-games">0</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="background: linear-gradient(135deg, #ef4444 0%, #f59e0b 100%); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);">
                    <i class="fas fa-toggle-off"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Inactive Games</div>
                    <div class="stat-value" id="stat-inactive-games">0</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);">
                    <i class="fas fa-star"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Featured Games</div>
                    <div class="stat-value" id="stat-featured-games">0</div>
                </div>
            </div>
        </div>

        <!-- Games Section -->
        <section class="section games-container">
            <div class="games-toolbar">
                <div class="search-container">
                    <i class="fas fa-search"></i>
                    <input type="text" id="game-search" class="search-input" placeholder="Search games...">
                </div>
                <div class="filter-controls">
                    <select id="category-filter" class="filter-select">
                        <option value="all">All Categories</option>
                        <option value="strategy">Strategy</option>
                        <option value="arcade">Arcade</option>
                        <option value="puzzle">Puzzle</option>
                        <option value="board">Board</option>
                    </select>
                    <select id="status-filter" class="filter-select">
                        <option value="all">All Status</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
            </div>

            <!-- Games Grid -->
            <div class="games-grid" id="games-grid">
                <!-- Game cards will be loaded here -->
            </div>

            <!-- Empty State -->
            <div class="empty-state" id="games-empty-state" style="display: none;">
                <i class="fas fa-gamepad"></i>
                <h3>No Games Found</h3>
                <p>Try adjusting your search or filter criteria.</p>
            </div>
        </section>
    </div>
</main>

<!-- Edit Game Modal -->
<div id="edit-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Edit Game Details</h3>
            <button class="modal-close" id="modal-close">&times;</button>
        </div>
        <form id="edit-form" class="edit-form">
            <input type="hidden" id="edit-game-id">
            
            <div class="form-group">
                <label for="edit-name">Game Name</label>
                <input type="text" id="edit-name" required>
            </div>

            <div class="form-group">
                <label for="edit-description">Description</label>
                <textarea id="edit-description" rows="3" required></textarea>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="edit-icon">Icon (Emoji)</label>
                    <input type="text" id="edit-icon" required>
                </div>

                <div class="form-group">
                    <label for="edit-players">Players</label>
                    <input type="text" id="edit-players" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="edit-time">Estimated Time</label>
                    <input type="text" id="edit-time" required>
                </div>

                <div class="form-group">
                    <label for="edit-category">Category</label>
                    <select id="edit-category" required>
                        <option value="strategy">Strategy</option>
                        <option value="arcade">Arcade</option>
                        <option value="puzzle">Puzzle</option>
                        <option value="board">Board</option>
                    </select>
                </div>
            </div>

            <div class="form-group checkbox-group">
                <label>
                    <input type="checkbox" id="edit-featured">
                    <span>Featured Game</span>
                </label>
            </div>

            <div class="form-actions">
                <button type="button" class="btn-secondary" id="cancel-edit">Cancel</button>
                <button type="submit" class="btn-primary">Save Changes</button>
            </div>
        </form>
    </div>
</div>

<!-- Maintenance Modal -->
<div id="maintenance-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3><i class="fas fa-tools"></i> Game Maintenance</h3>
            <button class="modal-close" id="maintenance-modal-close">&times;</button>
        </div>
        <form id="maintenance-form" class="edit-form">
            <input type="hidden" id="maintenance-game-id">
            
            <div class="form-group checkbox-group" style="margin-bottom: 1.5rem;">
                <label class="switch-label">
                    <span>Enable Maintenance Mode</span>
                    <label class="switch">
                        <input type="checkbox" id="maintenance-enabled">
                        <span class="slider round"></span>
                    </label>
                </label>
            </div>

            <div class="form-group">
                <label for="maintenance-message">Maintenance Message</label>
                <textarea id="maintenance-message-input" rows="3" placeholder="Enter message to display during maintenance"></textarea>
                <small class="form-help">Leave empty to use default message</small>
            </div>

            <div class="form-group">
                <label for="maintenance-eta">Estimated Completion Time</label>
                <input type="datetime-local" id="maintenance-eta-input">
            </div>

            <div class="form-actions">
                <button type="button" class="btn-secondary" id="cancel-maintenance">Cancel</button>
                <button type="submit" class="btn-primary">Save Settings</button>
            </div>
        </form>
    </div>
</div>

<%- include('../partials/footer') %>
