{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="container">
    <h1 class="mb-4">Dashboard</h1>

    <!-- Storage Summary Cards -->
    <div class="row">
        <div class="col-md-4 mb-4">
            <div class="card border-primary">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 text-center">
                            <i class="fas fa-file fa-3x text-primary"></i>
                        </div>
                        <div class="col-md-8">
                            <h5 class="card-title">Files</h5>
                            <h3>{{ file_count }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card border-success">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 text-center">
                            <i class="fas fa-folder fa-3x text-success"></i>
                        </div>
                        <div class="col-md-8">
                            <h5 class="card-title">Folders</h5>
                            <h3>{{ folder_count }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-4">
            <div class="card border-info">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 text-center">
                            <i class="fas fa-hdd fa-3x text-info"></i>
                        </div>
                        <div class="col-md-8">
                            <h5 class="card-title">Storage Used</h5>
                            <h3>{{ storage_used_formatted }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Files -->
    <div class="card mt-4">
        <div class="card-header bg-light">
            <h4 class="mb-0">Recent Files</h4>
        </div>
        <div class="card-body">
            {% if recent_files %}
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Size</th>
                        <th>Uploaded</th>
                    </tr>
                </thead>
                <tbody>
                    {% for file in recent_files %}
                    <tr>
                        <td>
                            <i class="fas {{ file.icon_class }} mr-2"></i>
                            <a href="{{ url_for('files.download', file_id=file.id) }}">{{ file.name }}</a>
                        </td>
                        <td>{{ file.type }}</td>
                        <td>{{ file.size|filesizeformat }}</td>
                        <td>{{ file.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="alert alert-info">
                You haven't uploaded any files yet.
                <a href="{{ url_for('files.upload') }}" class="alert-link">Upload your first file</a>
            </div>
            {% endif %}
        </div>
        <div class="card-footer">
            <a href="{{ url_for('files.browser') }}" class="btn btn-primary">
                <i class="fas fa-folder-open mr-1"></i> Browse Files
            </a>
            <a href="{{ url_for('files.upload') }}" class="btn btn-success">
                <i class="fas fa-upload mr-1"></i> Upload Files
            </a>
        </div>
    </div>
</div>
{% endblock %}