<layout name="admin" />

<div class="section">
    <h2>System Routes</h2>
    <div class="stats-grid">
        <div class="stat-card">
            <h3>Overview</h3>
            <p><strong>Total Routes:</strong> {{ total_routes }}</p>
            <p><strong>Admin Routes:</strong> {{ admin_routes_count }}</p>
            <p><strong>API Routes:</strong> {{ api_routes_count }}</p>
        </div>

        <div class="stat-card">
            <h3>HTTP Methods</h3>
            <p><strong>GET:</strong> {{ get_routes_count }}</p>
            <p><strong>POST:</strong> {{ post_routes_count }}</p>
            <p><strong>PUT/PATCH:</strong> {{ put_routes_count }}</p>
            <p><strong>DELETE:</strong> {{ delete_routes_count }}</p>
        </div>

        <div class="stat-card">
            <h3>Authentication</h3>
            <p><strong>Protected Routes:</strong> {{ protected_routes_count }}</p>
            <p><strong>Public Routes:</strong> {{ public_routes_count }}</p>
        </div>
    </div>

    <div class="stats-grid">
        <div class="stat-card full-width">
            <h3>Route List</h3>
            <table-data source="routes" type="routes" container-class="admin-card" id="routesTable" />
        </div>
    </div>

    <if condition="{{ middlewares }}">
    <div class="stats-grid">
        <div class="stat-card full-width">
            <h3>Middleware Usage</h3>
            <table>
                <thead>
                    <tr>
                        <th>Middleware</th>
                        <th>Usage Count</th>
                        <th>Routes</th>
                    </tr>
                </thead>
                <tbody>
                    <for items="{{ middlewares }}" key="middleware" value="data">
                    <tr>
                        <td>{{ middleware }}</td>
                        <td>{{ data.count }}</td>
                        <td style="font-size: 12px;">{{ data.routes }}</td>
                    </tr>
                    </for>
                </tbody>
            </table>
        </div>
    </div>
    </if>
</div>