{% extends "base.html" %}

{% block title %}Monglo Admin - Dashboard{% endblock %}

{% block content %}
<div style="max-width: 1200px; margin: 0 auto;">
    <!-- Collections List -->
    <div class="monglo-table-container monglo-fade-in">
        <table class="monglo-table">
            <thead>
                <tr>
                    <th style="width: 60px;"><i class="fas fa-database"></i></th>
                    <th>Collection Name</th>
                    <th style="text-align: right; width: 150px;">Document Count</th>
                    <th style="width: 100px;"></th>
                </tr>
            </thead>
            <tbody>
                {% for collection in collections %}
                <tr onclick="window.location.href='{{ prefix }}/{{ collection.name }}'" style="cursor: pointer;">
                    <td style="text-align: center;">
                        <div style="
                            width: 40px; 
                            height: 40px; 
                            background: linear-gradient(135deg, var(--mongodb-green-light) 0%, var(--mongodb-green) 100%);
                            border-radius: var(--radius-md);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        ">
                            <i class="fas fa-table" style="color: var(--mongodb-green-dark); font-size: 1.125rem;"></i>
                        </div>
                    </td>
                    <td>
                        <div style="display: flex; flex-direction: column;">
                            <span
                                style="font-weight: 600; font-size: var(--font-size-base); color: var(--text-primary);">
                                {{ collection.display_name or collection.name }}
                            </span>
                            <span style="font-size: var(--font-size-xs); color: var(--text-secondary);">
                                <i class="fas fa-file-alt"></i> MongoDB Collection
                            </span>
                        </div>
                    </td>
                    <td style="text-align: right;">
                        <span style="
                            background: rgba(19, 170, 82, 0.12);
                            color: var(--mongodb-green-dark);
                            padding: 0.375rem var(--spacing-md);
                            border-radius: var(--radius-full);
                            font-weight: 700;
                            font-size: var(--font-size-base);
                            border: 1px solid rgba(19, 170, 82, 0.25);
                        ">
                            {{ collection.count }}
                        </span>
                    </td>
                    <td style="text-align: right;">
                        <button
                            onclick="event.stopPropagation(); window.location.href='{{ prefix }}/{{ collection.name }}'"
                            class="monglo-btn monglo-btn-primary monglo-btn-sm" title="View Collection">
                            <i class="fas fa-arrow-right"></i>
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}