<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Dashboard Settings | <%= settings.name %></title>
        
        
        <meta property="og:title" content="Dashboard Settings | <%= settings.name %>" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="<%= config.baseURL %>" />
        <meta property="og:image" content="<%= config.baseURL %>/logo.png" />
        <meta property="og:description" content="<%= settings.description %>" />
        <meta name="theme-color" content="<%= settings.accentColor %>">
    
        
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <link rel="icon" href="<%= settings.favicon %>" type="image/x-icon">
        <link rel="shortcut icon" href="<%= settings.favicon %>" type="image/x-icon">
        <link rel="apple-touch-icon" href="<%= settings.favicon %>" type="image/png">

        <style>
            :root {
                --accent-color: <%= settings.accentColor %>;
                --accent-color-rgb: <%= accentColorRgb %>;
            }
            
            
            body {
                background: radial-gradient(circle at top left, rgba(var(--accent-color-rgb), 0.2) 0%, rgba(var(--accent-color-rgb), 0.15) 50%, rgba(var(--accent-color-rgb), 0.1) 100%), #0f0f13;
                min-height: 100vh;
                font-family: 'Inter', sans-serif;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
            }
            
            .section {
                flex: 1;
                padding: 1rem;
                margin: 0;
            }
            
            
            .glass-card {
                background: #1a1a2e;
                backdrop-filter: blur(10px);
                border: 1px solid rgba(var(--accent-color-rgb), 0.1);
                border-radius: 16px;
                padding: 1.5rem;
                transition: all 0.3s ease;
                margin-bottom: 1.5rem;
            }
            
            .section-title {
                font-size: 1.25rem;
                font-weight: 600;
                color: #ffffff;
                margin-bottom: 1rem;
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }
            
            .section-title i {
                color: var(--accent-color);
            }
            
            .section-description {
                color: rgba(255, 255, 255, 0.7);
                margin-bottom: 1.5rem;
            }
            
            
            .alert {
                padding: 0.75rem 1.25rem;
                border-radius: 8px;
                margin-bottom: 1rem;
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }
            
            .alert.is-success {
                background: rgba(72, 199, 116, 0.1);
                border: 1px solid rgba(72, 199, 116, 0.2);
                color: #48c774;
            }
            
            .alert.is-danger {
                background: rgba(241, 70, 104, 0.1);
                border: 1px solid rgba(241, 70, 104, 0.2);
                color: #f14668;
            }
            
            .alert i {
                font-size: 1.1rem;
            }
            
            
            .settings-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 1.25rem;
                margin-top: 1.5rem;
            }
            
            
            .settings-card {
                background: rgba(255, 255, 255, 0.02);
                border: 1px solid rgba(var(--accent-color-rgb), 0.1);
                border-radius: 12px;
                padding: 1.5rem;
                transition: all 0.3s ease !important;
                display: flex;
                flex-direction: column;
                height: 100%;
                cursor: pointer;
            }
            
            .settings-card:hover {
                background: rgba(255, 255, 255, 0.04);
                transform: translateY(-5px);
                border-color: rgba(var(--accent-color-rgb), 0.3);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            }
            
            .settings-card-header {
                display: flex;
                align-items: center;
                gap: 1rem;
                margin-bottom: 1rem;
                padding-bottom: 1rem;
                border-bottom: 1px solid rgba(var(--accent-color-rgb), 0.1);
            }
            
            .settings-card-icon {
                width: 50px;
                height: 50px;
                background: rgba(var(--accent-color-rgb), 0.1);
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.5rem;
                color: var(--accent-color);
                flex-shrink: 0;
                transition: all 0.3s ease;
            }
            
            .settings-card:hover .settings-card-icon {
                background: rgba(var(--accent-color-rgb), 0.2);
                transform: scale(1.05);
            }
            
            .settings-card-title {
                font-size: 1.1rem;
                font-weight: 600;
                color: #ffffff;
            }
            
            .settings-card-description {
                color: rgba(255, 255, 255, 0.7);
                flex-grow: 1;
                margin-bottom: 1.25rem;
                line-height: 1.6;
            }
            
            .settings-card-features {
                margin-bottom: 1.25rem;
            }
            
            .feature-item {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                color: rgba(255, 255, 255, 0.6);
                margin-bottom: 0.5rem;
                font-size: 0.9rem;
            }
            
            .feature-item i {
                color: var(--accent-color);
                font-size: 0.8rem;
            }
            
            .info-notice {
    display: flex;
    align-items: center; 
    gap: 1rem;
    background: rgba(var(--accent-color-rgb), 0.08);
    border: 1px solid rgba(var(--accent-color-rgb), 0.2);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.info-notice-icon {
    color: var(--accent-color);
    font-size: 1.2rem;
    flex-shrink: 0;
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.info-notice-content p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

            .configure-button {
                padding: 0.5rem 1rem;
                border-radius: 8px;
                font-size: 0.9rem;
                font-weight: 500;
                border: none;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                background: rgba(var(--accent-color-rgb), 0.15);
                color: var(--accent-color);
                margin-top: auto;
                width: 100%;
            }
            
            .configure-button:hover {
                background: rgba(var(--accent-color-rgb), 0.25);
                transform: translateY(-2px);
                color: var(--accent-color);
            }
            
            
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(-10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            
            .settings-card {
                opacity: 0;
                animation: fadeIn 0.3s ease forwards;
            }
            
            .settings-card:nth-child(1) { animation-delay: 0.1s; }
            .settings-card:nth-child(2) { animation-delay: 0.2s; }
            .settings-card:nth-child(3) { animation-delay: 0.3s; }
            .settings-card:nth-child(4) { animation-delay: 0.4s; }
            .settings-card:nth-child(5) { animation-delay: 0.5s; }
            .settings-card:nth-child(6) { animation-delay: 0.6s; }
            .settings-card:nth-child(7) { animation-delay: 0.7s; }
            .settings-card:nth-child(8) { animation-delay: 0.8s; }
            .settings-card:nth-child(9) { animation-delay: 0.9s; }
            .settings-card:nth-child(10) { animation-delay: 1.0s; }
            
            
            @media screen and (max-width: 768px) {
                .settings-grid {
                    grid-template-columns: 1fr;
                }
                
                .settings-card-header {
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    gap: 0.75rem;
                }
                
                .settings-card-title {
                    text-align: center;
                    width: 100%;
                }
                
                .settings-card-description {
                    text-align: center;
                }
                
                .settings-card-features {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
            }
        </style>
    </head>
    <body>
        <%- include('../partials/navbar', { user: user, currentPage: 'settings' }) %>

        <section class="section">
            <div class="container">
                <div class="glass-card">
                    <div class="section-title">
                        <i class="fas fa-cogs"></i>
                        Dashboard Settings
                    </div>
                    <p class="section-description">Configure and customize your server's dashboard, moderation, and automation settings. Select a category below to manage specific settings.</p>
            
                    <div class="info-notice">
                        <div class="info-notice-icon">
                            <i class="fas fa-info-circle"></i>
                        </div>
                        <div class="info-notice-content">
                            <p>Changes may take up to 3 minutes to apply in your Discord server due to performance-optimizing caching.</p>
                        </div>
                    </div>

                    <% if (messages && messages.success && messages.success.length > 0) { %>
                        <div class="alert is-success">
                            <i class="fas fa-check-circle"></i>
                            <%= messages.success[0] %>
                        </div>
                    <% } %>
                    
                    <% if (messages && messages.error && messages.error.length > 0) { %>
                        <div class="alert is-danger">
                            <i class="fas fa-exclamation-circle"></i>
                            <%= messages.error[0] %>
                        </div>
                    <% } %>

                    <div class="settings-grid">
                        
                        <div class="settings-card" onclick="window.location.href='/settings/staff-roles'">
                            <div class="settings-card-header">
                                <div class="settings-card-icon">
                                    <i class="fas fa-user-shield"></i>
                                </div>
                                <div class="settings-card-title">Staff Roles</div>
                            </div>
                            <div class="settings-card-description">
                                Configure staff roles with custom permissions and action limits. Assign Discord roles automatically to users with staff access.
                            </div>
                            
                            <div class="settings-card-features">
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Role-based permission system</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Action limits and moderation controls</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Discord role integration</span>
                                </div>
                            </div>
                            <a href="/settings/staff-roles" class="configure-button">
                                <i class="fas fa-sliders-h"></i>
                                Configure
                            </a>
                        </div>
                        
                        
                        <div class="settings-card" onclick="window.location.href='/settings/auto-moderation'">
                            <div class="settings-card-header">
                                <div class="settings-card-icon">
                                    <i class="fas fa-robot"></i>
                                </div>
                                <div class="settings-card-title">Auto Moderation</div>
                            </div>
                            <div class="settings-card-description">
                                Set up automatic moderation for your server to filter unwanted content, prevent spam, block phishing links, and more. Customize actions for each violation type.
                            </div>
                            <div class="settings-card-features">
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Spam protection</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Discord invite & phishing link filters</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Custom word filtering with regex support</span>
                                </div>
                            </div>
                            <a href="/settings/auto-moderation" class="configure-button">
                                <i class="fas fa-sliders-h"></i>
                                Configure
                            </a>
                        </div>
                        
<!--                         <div class="settings-card" onclick="window.location.href='/settings/logging'">
                            <div class="settings-card-header">
                                <div class="settings-card-icon">
                                    <i class="fas fa-clipboard-list"></i>
                                </div>
                                <div class="settings-card-title">Logging</div>
                            </div>
                            <div class="settings-card-description">
                                Configure detailed logging for server events, moderation actions, and user activities. Set up logging channels and customize what events are tracked.
                            </div>
                            <div class="settings-card-features">
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Moderation action logs</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>User activity tracking</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Custom log channel selection</span>
                                </div>
                            </div>
                            <a href="/settings/logging" class="configure-button">
                                <i class="fas fa-sliders-h"></i>
                                Configure
                            </a>
                        </div> -->
                        
                        
                        <div class="settings-card" onclick="window.location.href='/settings/appeal-system'">
                            <div class="settings-card-header">
                                <div class="settings-card-icon">
                                    <i class="fas fa-gavel"></i>
                                </div>
                                <div class="settings-card-title">Appeal System</div>
                            </div>
                            <div class="settings-card-description">
                                Set up and configure your server's appeal system for users to contest moderation actions. Customize appeal forms, review processes, and staff permissions.
                            </div>
                            <div class="settings-card-features">
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Custom appeal forms</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Staff review workflow</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Appeal history tracking</span>
                                </div>
                            </div>
                            <a href="/settings/appeal-system" class="configure-button">
                                <i class="fas fa-sliders-h"></i>
                                Configure
                            </a>
                        </div>
                        
                        <div class="settings-card" onclick="window.location.href='/settings/report-system'">
                            <div class="settings-card-header">
                                <div class="settings-card-icon">
                                    <i class="fas fa-flag"></i>
                                </div>
                                <div class="settings-card-title">Report System</div>
                            </div>
                            <div class="settings-card-description">
                                Configure your server's report system that allows users to report rule violations. Customize report requirements, automated actions, and staff notification settings.
                            </div>
                            <div class="settings-card-features">
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>User-friendly reporting workflow</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Auto-moderation for multiple reports</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Transcript generation and evidence collection</span>
                                </div>
                            </div>
                            <a href="/settings/report-system" class="configure-button">
                                <i class="fas fa-sliders-h"></i>
                                Configure
                            </a>
                        </div>
                        
                        <div class="settings-card" onclick="window.location.href='/settings/custom-commands'">
                            <div class="settings-card-header">
                                <div class="settings-card-icon">
                                    <i class="fas fa-terminal"></i>
                                </div>
                                <div class="settings-card-title">Custom Commands</div>
                            </div>
                            <div class="settings-card-description">
                                Create and manage custom commands for your server. Set up auto-responses, shortcuts, and staff-only commands to improve server management.
                            </div>
                            <div class="settings-card-features">
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Simple responses and embeds</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Permission-based command access</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Command cooldowns and limitations</span>
                                </div>
                            </div>
                            <a href="/settings/custom-commands" class="configure-button">
                                <i class="fas fa-sliders-h"></i>
                                Configure
                            </a>
                        </div>
                        
                        <div class="settings-card" onclick="window.location.href='/settings/auto-responses'">
                            <div class="settings-card-header">
                                <div class="settings-card-icon">
                                    <i class="fas fa-reply-all"></i>
                                </div>
                                <div class="settings-card-title">Auto Responses</div>
                            </div>
                            <div class="settings-card-description">
                                Configure automatic responses triggered by specific keywords or phrases. Create custom replies for frequently asked questions and common inquiries.
                            </div>
                            <div class="settings-card-features">
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Keyword-based triggers</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Text and embed responses</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Channel-specific configurations</span>
                                </div>
                            </div>
                            <a href="/settings/auto-responses" class="configure-button">
                                <i class="fas fa-sliders-h"></i>
                                Configure
                            </a>
                        </div>

                        
                        <div class="settings-card" onclick="window.location.href='/settings/appearance'">
                            <div class="settings-card-header">
                                <div class="settings-card-icon">
                                    <i class="fas fa-palette"></i>
                                </div>
                                <div class="settings-card-title">Dashboard Appearance</div>
                            </div>
                            <div class="settings-card-description">
                                Customize your dashboard's appearance with custom colors, logos, and branding elements. Create a personalized experience for your staff team.
                            </div>
                            <div class="settings-card-features">
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Custom color themes</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Logo and branding uploads</span>
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Layout customization</span>
                                </div>
                            </div>
                            <a href="/settings/appearance" class="configure-button">
                                <i class="fas fa-sliders-h"></i>
                                Configure
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <%- include('../partials/footer') %>
        
        <script>
document.addEventListener('DOMContentLoaded', function() {

    const cards = document.querySelectorAll('.settings-card');
    

    cards.forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out';
    });
    

    setTimeout(() => {
        cards.forEach((card, index) => {
            setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
            }, 80 * index); // Slightly faster timing between cards (80ms instead of 100ms)
        });
    }, 150); // Small initial delay for better perception
    

    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {

            const icon = this.querySelector('.settings-card-icon i');
            if (icon) {
                icon.style.transform = 'scale(1.2)';
                icon.style.transition = 'transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)'; // Bouncy effect
            }
            

            this.style.boxShadow = `0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 0 10px rgba(var(--accent-color-rgb), 0.2)`;
        });
        
        card.addEventListener('mouseleave', function() {
            const icon = this.querySelector('.settings-card-icon i');
            if (icon) {
                icon.style.transform = 'scale(1)';
                icon.style.transition = 'transform 0.3s ease-out';
            }
            

            this.style.boxShadow = '';
        });
    });
});
        </script>
    </body>
</html>