<!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" class="active">Components</a></li>
                <li><a href="/design-system/conventions">Conventions</a></li>
                <li><a href="/design-system/roadmap">Roadmap</a></li>
            </ul>
        </nav>

        <main class="design-content">
            <header class="page-header">
                <h1>Component Patterns</h1>
                <p>Analysis of CSS component methodologies and patterns in your codebase.</p>
            </header>

            <div class="metrics-grid">
                <div class="metric-card">
                    <div class="metric-header">
                        <h3>Total Components</h3>
                        <span class="metric-icon">🧩</span>
                    </div>
                    <div class="metric-value">{{analysis.totalComponents}}</div>
                </div>

                <div class="metric-card">
                    <div class="metric-header">
                        <h3>Dominant Pattern</h3>
                        <span class="metric-icon">🎯</span>
                    </div>
                    <div class="metric-value">BEM</div>
                </div>

                <div class="metric-card">
                    <div class="metric-header">
                        <h3>Consistency Score</h3>
                        <span class="metric-icon">📊</span>
                    </div>
                    <div class="metric-value metric-score-good">93%</div>
                </div>

                <div class="metric-card">
                    <div class="metric-header">
                        <h3>Pattern Diversity</h3>
                        <span class="metric-icon">🎨</span>
                    </div>
                    <div class="metric-value">67%</div>
                </div>
            </div>

            <div class="analysis-grid">
                <section class="analysis-section">
                    <h2>Pattern Distribution</h2>
                    <div class="pattern-distribution">
                        <div class="pattern-item">
                            <div class="pattern-header">
                                <h4>BEM Components</h4>
                                <span class="pattern-count">{{ count(bem_classes) }}</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: {{pattern_distribution.bem}}%"></div>
                            </div>
                            <span class="progress-text">{{pattern_distribution.bem}}%</span>
                        </div>

                        <div class="pattern-item">
                            <div class="pattern-header">
                                <h4>Utility Classes</h4>
                                <span class="pattern-count">{{ count(utility_classes) }}</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: {{pattern_distribution.utility}}%"></div>
                            </div>
                            <span class="progress-text">{{pattern_distribution.utility}}%</span>
                        </div>

                        <div class="pattern-item">
                            <div class="pattern-header">
                                <h4>Traditional Components</h4>
                                <span class="pattern-count">{{ count(traditional_components) }}</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: {{pattern_distribution.traditional}}%"></div>
                            </div>
                            <span class="progress-text">{{pattern_distribution.traditional}}%</span>
                        </div>
                    </div>
                </section>

                <section class="analysis-section">
                    <h2>Actionable Recommendations</h2>
                    <div class="recommendations-list">
                        <for var="recommendation" in="analysis.recommendations">
                            <div class="recommendation-item">
                                <p>{{recommendation}}</p>
                            </div>
                        </for>
                    </div>
                </section>
            </div>

            <div class="component-details">
                <div if="count(bem_classes) > 0">
                    <section class="component-section">
                        <h2>BEM Components</h2>
                        <div class="component-list">
                            <for var="component" in="bem_classes">
                                <div class="component-item">
                                    <h4>{{component.name}}</h4>
                                    <div class="component-meta">
                                        <span class="component-type">{{component.type}}</span>
                                        <div if="component.modifiers">
                                            <strong>Modifiers:</strong> {{ count(component.modifiers) }}
                                        </div>
                                        <div if="component.elements">
                                            <strong>Elements:</strong> {{ count(component.elements) }}
                                        </div>
                                    </div>
                                </div>
                            </for>
                        </div>
                    </section>
                </div>

                <div if="count(utility_classes) > 0">
                    <section class="component-section">
                        <h2>Utility Classes</h2>
                        <div class="component-list">
                            <for var="utility" in="utility_classes">
                                <div class="component-item">
                                    <h4>{{utility.name}}</h4>
                                    <div class="component-meta">
                                        <span class="component-type">{{utility.category}}</span>
                                        <div if="utility.usage_count">
                                            <strong>Usage:</strong> {{utility.usage_count}}x
                                        </div>
                                    </div>
                                </div>
                            </for>
                        </div>
                    </section>
                </div>

                <div if="count(traditional_components) > 0">
                    <section class="component-section">
                        <h2>Traditional Components</h2>
                        <div class="component-list">
                            <for var="component" in="traditional_components">
                                <div class="component-item">
                                    <h4>{{component.name}}</h4>
                                    <div class="component-meta">
                                        <span class="component-type">Traditional</span>
                                        <div if="component.specificity">
                                            <strong>Specificity:</strong> {{component.specificity}}
                                        </div>
                                    </div>
                                </div>
                            </for>
                        </div>
                    </section>
                </div>
            </div>
        </main>
    </div>

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