{% extends "base.html" %}

{% block content %}
<div class="container">
    <!-- Breadcrumbs -->
    <nav class="breadcrumb">
        <a href="{{ '../' * depth }}index.html">root</a>
        {% for crumb in breadcrumbs %}
        <span class="breadcrumb-sep">/</span>
        {% if not loop.last %}
        <a href="{{ '../' * (depth - loop.index) }}{{ crumb.path }}/index.html">{{ crumb.name }}</a>
        {% else %}
        <span class="breadcrumb-current">{{ crumb.name }}</span>
        {% endif %}
        {% endfor %}
    </nav>

    <h1 class="page-title">{{ directory_name }}</h1>

    <!-- Directory stats -->
    <section class="summary-section">
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-value">{{ stats.coverage_percent|format_percent }}</div>
                <div class="stat-label">Line Coverage</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">{{ stats.covered_lines }} / {{ stats.total_lines }}</div>
                <div class="stat-label">Lines Covered</div>
            </div>
            <div class="stat-card stat-danger">
                <div class="stat-value">{{ stats.uncovered_lines }}</div>
                <div class="stat-label">Uncovered Lines</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">{{ stats.file_count }}</div>
                <div class="stat-label">Files</div>
            </div>
        </div>
    </section>

    <!-- Coverage bar -->
    <div class="directory-coverage-bar">
        <div class="coverage-bar-large">
            <div class="coverage-bar-fill {{ stats.coverage_percent|coverage_class }}" 
                 style="width: {{ stats.coverage_percent }}%"></div>
        </div>
        <span class="coverage-bar-label">{{ stats.coverage_percent|format_percent }} covered</span>
    </div>

    <!-- Subdirectories -->
    {% if subdirectories %}
    <section class="files-section">
        <h2>Directories</h2>
        <div class="files-table-container">
            <table class="files-table">
                <thead>
                    <tr>
                        <th>Directory</th>
                        <th class="text-center">Files</th>
                        <th class="text-center">Lines</th>
                        <th class="text-center">Uncovered</th>
                        <th>Coverage</th>
                    </tr>
                </thead>
                <tbody>
                    {% for subdir in subdirectories %}
                    <tr class="file-row">
                        <td class="file-name">
                            <a href="{{ subdir.name }}/index.html">
                                <span class="dir-icon">📁</span>
                                {{ subdir.name }}
                            </a>
                        </td>
                        <td class="text-center">{{ subdir.file_count }}</td>
                        <td class="text-center">{{ subdir.total_lines }}</td>
                        <td class="text-center text-danger">{{ subdir.uncovered_lines }}</td>
                        <td>
                            <div class="coverage-bar-container">
                                <div class="coverage-bar" style="width: {{ subdir.coverage_percent }}%"></div>
                                <span class="coverage-text {{ subdir.coverage_percent|coverage_class }}">
                                    {{ subdir.coverage_percent|format_percent }}
                                </span>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
    {% endif %}

    <!-- Files in this directory -->
    {% if files %}
    <section class="files-section">
        <h2>Files</h2>
        <div class="files-table-container">
            <table class="files-table">
                <thead>
                    <tr>
                        <th>File</th>
                        <th class="text-center">Lines</th>
                        <th class="text-center">Covered</th>
                        <th class="text-center">Uncovered</th>
                        <th>Coverage</th>
                    </tr>
                </thead>
                <tbody>
                    {% for file in files %}
                    <tr class="file-row">
                        <td class="file-name">
                            <a href="{{ '../' * depth }}files/{{ file.safe_path }}.html">
                                <span class="file-icon">📄</span>
                                {{ file.name }}
                            </a>
                        </td>
                        <td class="text-center">{{ file.total_lines }}</td>
                        <td class="text-center text-success">{{ file.covered_lines }}</td>
                        <td class="text-center text-danger">{{ file.uncovered_lines }}</td>
                        <td>
                            <div class="coverage-bar-container">
                                <div class="coverage-bar" style="width: {{ file.coverage_percent }}%"></div>
                                <span class="coverage-text {{ file.coverage_percent|coverage_class }}">
                                    {{ file.coverage_percent|format_percent }}
                                </span>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
    {% endif %}
</div>
{% endblock %}