<%- include('../partials/header', { title, user }) %>
<%- include('../partials/sidebar', { path }) %>

<main class="main-content">
    <div id="settings-section" class="content-section active">
        <h2 class="page-title">
            <i class="fas fa-cog"></i>
            Settings
        </h2>

        <div class="settings-container">
            <!-- Maintenance Settings Card (Full Width) -->
            <div class="settings-card maintenance-card">
                <div class="card-header">
                    <h3><i class="fas fa-tools"></i> Maintenance Mode</h3>
                </div>
                
                <div class="maintenance-toggle-section">
                    <div class="preference-item">
                        <div class="pref-info">
                            <h4>Enable Maintenance Mode</h4>
                            <p>Temporarily disable access to the game portal for all users except admins</p>
                        </div>
                        <label class="switch">
                            <input type="checkbox" id="maintenance-mode">
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>

                <div class="maintenance-config-section">
                    <h4 class="config-subtitle"><i class="fas fa-cog"></i> Maintenance Configuration</h4>
                    <form class="maintenance-form">
                        <div class="form-group">
                            <label for="maintenance-message">Display Message</label>
                            <textarea id="maintenance-message" rows="3" placeholder="Message shown to users during maintenance"></textarea>
                            <small class="form-help">Customize the message displayed on the maintenance page</small>
                        </div>
                        <div class="form-group">
                            <label for="maintenance-eta">Estimated Completion Time (Optional)</label>
                            <input type="datetime-local" id="maintenance-eta">
                            <small class="form-help">Set when maintenance is expected to complete</small>
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn-primary">
                                <i class="fas fa-save"></i> Save Maintenance Settings
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- System Settings Card -->
            <div class="settings-card">
                <div class="card-header">
                    <h3><i class="fas fa-server"></i> System Settings</h3>
                </div>
                <div class="settings-options">
                    <div class="preference-item">
                        <div class="pref-info">
                            <h4>Debug Logging</h4>
                            <p>Enable detailed server logs for troubleshooting</p>
                        </div>
                        <label class="switch">
                            <input type="checkbox" id="debug-logging">
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <div class="preference-item">
                        <div class="pref-info">
                            <h4>Analytics Tracking</h4>
                            <p>Collect anonymous usage data to improve services</p>
                        </div>
                        <label class="switch">
                            <input type="checkbox" id="analytics-tracking" checked>
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Portal Settings Card -->
            <div class="settings-card">
                <div class="card-header">
                    <h3><i class="fas fa-gamepad"></i> Portal Settings</h3>
                </div>
                <form class="settings-form">
                    <div class="form-group">
                        <label for="portal-title">Portal Title</label>
                        <input type="text" id="portal-title" value="Game Portal" placeholder="Enter portal title">
                    </div>
                    <div class="form-group">
                        <label for="max-games">Maximum Games Displayed</label>
                        <select id="max-games">
                            <option value="6">6 Games</option>
                            <option value="9" selected>9 Games</option>
                            <option value="12">12 Games</option>
                            <option value="15">15 Games</option>
                        </select>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn-primary">
                            <i class="fas fa-save"></i> Save Portal Settings
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</main>

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