<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{meta.title}}</title>
    <link rel="stylesheet" href="/assets/css/admin.css">
</head>
<body>
    <div class="design-system-layout">
        <nav class="design-nav">
            <h1>Design System</h1>
            <ul>
                <li><a href="/design-system">Dashboard</a></li>
                <li><a href="/design-system/tokens">Tokens</a></li>
                <li><a href="/design-system/colors">Colors</a></li>
                <li><a href="/design-system/components">Components</a></li>
                <li><a href="/design-system/conventions" class="active">Conventions</a></li>
                <li><a href="/design-system/roadmap">Roadmap</a></li>
            </ul>
        </nav>

        <main class="design-content">
            <header class="page-header">
                <h1>CSS Conventions</h1>
                <p>Analysis of CSS coding conventions and standards in your codebase.</p>
            </header>

            <div class="metrics-grid">
                <div class="metric-card">
                    <div class="metric-header">
                        <h3>Overall Score</h3>
                        <span class="metric-icon">📊</span>
                    </div>
                    <div class="metric-value metric-score-good">
                        {{analysis.overallScore}}%
                    </div>
                </div>

                <div class="metric-card">
                    <div class="metric-header">
                        <h3>Conformance Level</h3>
                        <span class="metric-icon">🎯</span>
                    </div>
                    <div class="metric-value">{{analysis.conformanceLevel}}</div>
                </div>

                <div class="metric-card">
                    <div class="metric-header">
                        <h3>High Priority Issues</h3>
                        <span class="metric-icon">⚠️</span>
                    </div>
                    <div class="metric-value metric-score-poor">{{ count(violations_by_severity.high) }}</div>
                </div>

                <div class="metric-card">
                    <div class="metric-header">
                        <h3>Total Violations</h3>
                        <span class="metric-icon">🔍</span>
                    </div>
                    <div class="metric-value">{{ count(analysis.violations) }}</div>
                </div>
            </div>

            <div class="analysis-grid">
                <section class="analysis-section">
                    <h2>Category Scores</h2>
                    <div class="category-scores">
                        <div class="score-item" if="analysis.categoryScores.naming">
                            <div class="score-header">
                                <h4>Naming</h4>
                                <span class="score-value score-good">{{analysis.categoryScores.naming}}%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: {{analysis.categoryScores.naming}}%"></div>
                            </div>
                        </div>
                        <div class="score-item" if="analysis.categoryScores.specificity">
                            <div class="score-header">
                                <h4>Specificity</h4>
                                <span class="score-value score-good">{{analysis.categoryScores.specificity}}%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: {{analysis.categoryScores.specificity}}%"></div>
                            </div>
                        </div>
                        <div class="score-item" if="analysis.categoryScores.organization">
                            <div class="score-header">
                                <h4>Organization</h4>
                                <span class="score-value score-good">{{analysis.categoryScores.organization}}%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: {{analysis.categoryScores.organization}}%"></div>
                            </div>
                        </div>
                        <div class="score-item" if="analysis.categoryScores.custom_properties">
                            <div class="score-header">
                                <h4>Custom Properties</h4>
                                <span class="score-value score-good">{{analysis.categoryScores.custom_properties}}%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: {{analysis.categoryScores.custom_properties}}%"></div>
                            </div>
                        </div>
                        <div class="score-item" if="analysis.categoryScores.accessibility">
                            <div class="score-header">
                                <h4>Accessibility</h4>
                                <span class="score-value score-good">{{analysis.categoryScores.accessibility}}%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: {{analysis.categoryScores.accessibility}}%"></div>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="analysis-section">
                    <h2>Prioritized Actions</h2>
                    <div class="actions-list">
                        <for var="action" in="analysis.getPrioritizedActions">
                            <div class="action-item priority-{{action.priority}}">
                                <div class="action-header">
                                    <span class="priority-badge">{{action.priority}}</span>
                                    <h4>{{action.category}}</h4>
                                </div>
                                <p>{{action.action}}</p>
                                <div class="action-meta">
                                    <span class="impact-badge">{{action.impact}}</span>
                                </div>
                            </div>
                        </for>
                    </div>
                </section>
            </div>

            <div class="conventions-details">
                <section class="violations-section">
                    <h2>Violations by Severity</h2>
                    
                    <div if="count(violations_by_severity.high) > 0">
                        <h3>High Priority</h3>
                        <div class="violations-list high-priority">
                            <for var="violation" in="violations_by_severity.high">
                                <div class="violation-item">
                                    <div class="violation-header">
                                        <span class="violation-type">{{violation.type}}</span>
                                        <span class="violation-line" if="violation.line">Line {{violation.line}}</span>
                                    </div>
                                    <p class="violation-message">{{violation.message}}</p>
                                    <p class="violation-suggestion" if="violation.suggestion">
                                        <strong>Suggestion:</strong> {{violation.suggestion}}
                                    </p>
                                </div>
                            </for>
                        </div>
                    </div>

                    <div if="count(violations_by_severity.medium) > 0">
                        <h3>Medium Priority</h3>
                        <div class="violations-list medium-priority">
                            <for var="violation" in="violations_by_severity.medium">
                                <div class="violation-item">
                                    <div class="violation-header">
                                        <span class="violation-type">{{violation.type}}</span>
                                        <span class="violation-line" if="violation.line">Line {{violation.line}}</span>
                                    </div>
                                    <p class="violation-message">{{violation.message}}</p>
                                    <p class="violation-suggestion" if="violation.suggestion">
                                        <strong>Suggestion:</strong> {{violation.suggestion}}
                                    </p>
                                </div>
                            </for>
                        </div>
                    </div>

                    <div if="count(violations_by_severity.low) > 0">
                        <h3>Low Priority</h3>
                        <div class="violations-list low-priority">
                            <for var="violation" in="violations_by_severity.low">
                                <div class="violation-item">
                                    <div class="violation-header">
                                        <span class="violation-type">{{violation.type}}</span>
                                        <span class="violation-line" if="violation.line">Line {{violation.line}}</span>
                                    </div>
                                    <p class="violation-message">{{violation.message}}</p>
                                    <p class="violation-suggestion" if="violation.suggestion">
                                        <strong>Suggestion:</strong> {{violation.suggestion}}
                                    </p>
                                </div>
                            </for>
                        </div>
                    </div>
                </section>

                <section class="improvement-section">
                    <h2>Improvement Potential</h2>
                    <div class="improvement-list">
                        <for var="area" in="improvement_potential">
                            <div class="improvement-item">
                                <div class="improvement-header">
                                    <h4>Area</h4>
                                    <span class="roi-score">ROI: {{area.roi_score}}</span>
                                </div>
                                <div class="improvement-details">
                                    <div class="improvement-stat">
                                        <strong>Current Score:</strong> {{area.current_score}}%
                                    </div>
                                    <div class="improvement-stat">
                                        <strong>Max Improvement:</strong> {{area.max_improvement}}%
                                    </div>
                                    <div class="improvement-stat">
                                        <strong>Estimated Effort:</strong> {{area.estimated_effort}}/5
                                    </div>
                                </div>
                            </div>
                        </for>
                    </div>
                </section>

                <section class="areas-section">
                    <div class="areas-grid">
                        <div class="areas-column">
                            <h3>Areas Needing Improvement</h3>
                            <div class="areas-list">
                                <for var="area" in="worst_areas">
                                    <div class="area-item worst">
                                        <span class="area-name">{{area}}</span>
                                    </div>
                                </for>
                            </div>
                        </div>

                        <div class="areas-column">
                            <h3>Well-Maintained Areas</h3>
                            <div class="areas-list">
                                <for var="area" in="best_areas">
                                    <div class="area-item best">
                                        <span class="area-name">{{area}}</span>
                                    </div>
                                </for>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>

    <script src="/assets/js/admin.js"></script>
</body>
</html>