<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git Analysis - Code Metrics Dashboard</title>
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="icon" href="images/logo.svg" sizes="any" type="image/svg+xml">
    <style>.cc-offenders {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f9f9f9;
        padding: 1.5rem;
        border-radius: 8px;
        max-width: 600px;
        margin: 2rem auto;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .cc-offenders h2 {
        text-align: center;
        color: #333;
        margin-bottom: 1rem;
    }
    
    .offender-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .offender {
        background-color: #fff;
        border: 1px solid #ddd;
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 4px;
        border-left-width: 6px;
        border-left-style: solid;
        transition: box-shadow 0.2s ease;
    }
    
    .offender:hover {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
    

    .offender-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #222;
    word-break: break-word; /* Ensures long names wrap */
    white-space: normal;    /* Allows wrapping */
}

    
    .offender-details {
        font-size: 0.95rem;
        color: #555;
    }
    
    .label {
        font-weight: 600;
        margin-right: 0.5rem;
    }
    
    /* Status-based border colors */
    .status-good {
        border-left-color: #10b981; /* Green */
    }

    .status-ok {
        border-left-color: #f59e0b; /* Yellow/Amber */
    }
    
    .status-warning {
        border-left-color: #f97316; /* Orange */
    }
    
    .status-critical {
        border-left-color: #ef4444; /* Red */
    }
    
    </style>
</head>
<body>
    <div class="dashboard">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <img src="images/logo.svg" alt="Metripy Logo" class="logo-icon">
                    <h2>Metripy</h2>
                </div>
            </div>
            
            <nav class="sidebar-nav">
                <ul>
                    <li class="nav-item">
                        <a href="index.html" class="nav-link">
                            <i class="fas fa-tachometer-alt"></i>
                            <span>Overview</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="files.html" class="nav-link">
                            <i class="fas fa-file-code"></i>
                            <span>Files</span>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a href="top_offenders.html" class="nav-link">
                            <i class="fa-solid fa-stethoscope"></i>
                            <span>Top Offenders</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="git_analysis.html" class="nav-link">
                            <i class="fab fa-git-alt"></i>
                            <span>Git Analysis</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="coupling.html" class="nav-link">
                            <i class="fas fa-project-diagram"></i>
                            <span>Coupling</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="dependencies.html" class="nav-link">
                            <i class="fas fa-cubes"></i>
                            <span>Dependencies</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="trends.html" class="nav-link">
                            <i class="fas fa-chart-line"></i>
                            <span>Trends</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="code_smells.html" class="nav-link">
                            <i class="fas fa-bug"></i>
                            <span>Code Smells</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="metrics.html" class="nav-link">
                            <i class="fas fa-info-circle"></i>
                            <span>Explanations</span>
                        </a>
                    </li>
                </ul>
            </nav>
            
            <div class="sidebar-footer">
                <div class="project-info">
                    <h4>Project: {{project_name}}</h4>
                    <p>Last updated: {{last_updated}}</p>
                </div>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            <header class="page-header">
                <div class="header-content">
                    <h1>Top Offenders</h1>
                    <p class="subtitle">View top offenders of different criteria on file and function level</p>
                </div>
            </header>
            
            <section class="two-column-section">
                <div class="info-card">
                    <h4>File Lines of code</h4>
                    
                    <ul class="offender-list">
                        {{#EACH file_loc_offenders AS offender}}
                        <li class="offender status-{{offender.status}}">
                            <div class="offender-name">{{offender.full_name}}</div>
                            <div class="offender-details">
                                <span class="label">Lines of code:</span> {{offender.loc}}
                            </div>
                        </li>
                        {{/EACH}}
                    </ul>

                </div>
                <div class="info-card">
                    <h4>Function size</h4>
                    
                    <ul class="offender-list">
                        {{#EACH function_size_offenders AS offender}}
                        <li class="offender status-{{offender.status}}">
                            <div class="offender-name">{{offender.full_name}}</div>
                            <div class="offender-details">
                                <span class="label">Size:</span> {{offender.loc}} Lines
                            </div>
                        </li>
                        {{/EACH}}
                    </ul>

                </div>
            </section>

            <div class="section-divider"></div>
            
            <section class="two-column-section">
                <div class="info-card">
                    <h4>File Cyclomatic complexity</h4>
                    
                    <ul class="offender-list">
                        {{#EACH file_cc_offenders AS offender}}
                        <li class="offender status-{{offender.status}}">
                            <div class="offender-name">{{offender.full_name}}</div>
                            <div class="offender-details">
                                <span class="label">Complexity:</span> {{offender.totalCc}}
                            </div>
                        </li>
                        {{/EACH}}
                    </ul>

                </div>
                <div class="info-card">
                    <h4>Function Cyclomatic complexity</h4>
                    
                    <ul class="offender-list">
                        {{#EACH function_cc_offenders AS offender}}
                        <li class="offender status-{{offender.status}}">
                            <div class="offender-name">{{offender.full_name}}</div>
                            <div class="offender-details">
                                <span class="label">Complexity:</span> {{offender.complexity}}
                            </div>
                        </li>
                        {{/EACH}}
                    </ul>

                </div>
            </section>

            <div class="section-divider"></div>
            
            <section class="two-column-section">
                <div class="info-card">
                    <h4>File Cognitive complexity</h4>
                    
                    <ul class="offender-list">
                        {{#EACH file_cog_complexity_offenders AS offender}}
                        <li class="offender status-{{offender.status}}">
                            <div class="offender-name">{{offender.full_name}}</div>
                            <div class="offender-details">
                                <span class="label">Complexity:</span> {{offender.total_cog_complexity}}
                            </div>
                        </li>
                        {{/EACH}}
                    </ul>

                </div>
                <div class="info-card">
                    <h4>Function Cognitive complexity</h4>

                    <ul class="offender-list">
                        {{#EACH function_cog_complexity_offenders AS offender}}
                        <li class="offender status-{{offender.status}}">
                            <div class="offender-name">{{offender.full_name}}</div>
                            <div class="offender-details">
                                <span class="label">Complexity:</span> {{offender.cognitive_complexity}}
                            </div>
                        </li>
                        {{/EACH}}
                    </ul>

                </div>
            </section>

            <div class="section-divider"></div>

            <section class="two-column-section">
                <div class="info-card">
                    <h4>File Maintainability Index</h4>
                    
                    <ul class="offender-list">
                        {{#EACH file_mi_offenders AS offender}}
                        <li class="offender status-{{offender.status}}">
                            <div class="offender-name">{{offender.full_name}}</div>
                            <div class="offender-details">
                                <span class="label">Maintainability Index:</span> {{offender.maintainabilityIndex}}
                            </div>
                        </li>
                        {{/EACH}}
                    </ul>

                </div>
                <div class="info-card">
                    <h4>Function Maintainability Index</h4>
                    
                    <ul class="offender-list">
                        {{#EACH function_mi_offenders AS offender}}
                        <li class="offender status-{{offender.status}}">
                            <div class="offender-name">{{offender.full_name}}</div>
                            <div class="offender-details">
                                <span class="label">Maintainability Index:</span> {{offender.maintainability_index}}
                            </div>
                        </li>
                        {{/EACH}}
                    </ul>

                </div>
            </section>
        </main>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Embed data directly from template engine
    </script>
</body>
</html>