{% extends "layout.html" %}

{% block content %}
<div class="row mb-3">
    <div class="col-md-6">
        <h2><i class="bi bi-table"></i> Files</h2>
    </div>
    <div class="col-md-6 text-end">
        <a href="{{ url_for('upload') }}" class="btn btn-success">
            <i class="bi bi-upload"></i> Upload New Document
        </a>
    </div>
</div>

<div class="card mb-4">
    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="bi bi-file-earmark"></i> Document Library</h5>
        <form class="d-flex" action="{{ url_for('files') }}" method="get">
            <select name="category" class="form-select form-select-sm me-2" style="width: 150px;" onchange="this.form.submit()">
                <option value="all" {% if selected_category == 'all' %}selected{% endif %}>All Categories</option>
                {% for category in categories %}
                <option value="{{ category }}" {% if selected_category == category %}selected{% endif %}>
                    {{ category|capitalize }}
                </option>
                {% endfor %}
            </select>
            <div class="input-group">
                <input type="text" class="form-control form-control-sm" placeholder="Search files..." name="search" value="{{ search_query }}">
                <button class="btn btn-outline-light btn-sm" type="submit">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </form>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-striped table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Type</th>
                        <th>Size</th>
                        <th>Uploaded</th>
                        <th>Visibility</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% if documents %}
                        {% for doc in documents %}
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    {% if doc.file_type == 'pdf' %}
                                    <i class="bi bi-file-earmark-pdf text-danger me-2"></i>
                                    {% elif doc.file_type == 'document' %}
                                    <i class="bi bi-file-earmark-word text-primary me-2"></i>
                                    {% elif doc.file_type == 'spreadsheet' %}
                                    <i class="bi bi-file-earmark-excel text-success me-2"></i>
                                    {% elif doc.file_type == 'image' %}
                                    <i class="bi bi-file-earmark-image text-info me-2"></i>
                                    {% elif doc.file_type == 'video' %}
                                    <i class="bi bi-file-earmark-play text-warning me-2"></i>
                                    {% else %}
                                    <i class="bi bi-file-earmark text-secondary me-2"></i>
                                    {% endif %}
                                    <span>{{ doc.custom_filename }}</span>
                                </div>
                            </td>
                            <td><span class="badge bg-secondary">{{ doc.category|capitalize }}</span></td>
                            <td>{{ doc.file_type|capitalize }}</td>
                            <td>{{ (doc.file_size / 1024)|round(1) }} KB</td>
                            <td>{{ doc.created_at.split(' ')[0] }}</td>
                            <td>
                                {% if doc.visibility == 'public' %}
                                <span class="badge bg-success">Public</span>
                                {% else %}
                                <span class="badge bg-warning text-dark">Private</span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <a href="{{ url_for('view_document', document_id=doc.id) }}" class="btn btn-outline-primary" title="View">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{{ url_for('edit_document', document_id=doc.id) }}" class="btn btn-outline-secondary" title="Edit">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <a href="{{ url_for('share_document', document_id=doc.id) }}" class="btn btn-outline-info" title="Share">
                                        <i class="bi bi-share"></i>
                                    </a>
                                    <a href="{{ url_for('download_document', document_id=doc.id) }}" class="btn btn-outline-success" title="Download">
                                        <i class="bi bi-download"></i>
                                    </a>
                                    <a href="{{ url_for('delete_document', document_id=doc.id) }}" class="btn btn-outline-danger" 
                                       onclick="return confirm('Are you sure you want to delete this document?')" title="Delete">
                                        <i class="bi bi-trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="7" class="text-center py-4">
                                <div class="alert alert-info mb-0">
                                    <i class="bi bi-info-circle"></i> 
                                    {% if search_query %}
                                        No documents found matching your search criteria.
                                    {% elif selected_category != 'all' %}
                                        No documents found in the selected category.
                                    {% else %}
                                        No documents found. Upload your first document to get started!
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% if pagination and pagination.pages > 1 %}
<nav aria-label="Document pagination">
    <ul class="pagination justify-content-center">
        <li class="page-item {% if pagination.page == 1 %}disabled{% endif %}">
            <a class="page-link" href="{{ url_for('files', page=pagination.page-1, search=search_query, category=selected_category) }}">Previous</a>
        </li>
        
        {% for p in range(1, pagination.pages + 1) %}
        <li class="page-item {% if pagination.page == p %}active{% endif %}">
            <a class="page-link" href="{{ url_for('files', page=p, search=search_query, category=selected_category) }}">{{ p }}</a>
        </li>
        {% endfor %}
        
        <li class="page-item {% if pagination.page == pagination.pages %}disabled{% endif %}">
            <a class="page-link" href="{{ url_for('files', page=pagination.page+1, search=search_query, category=selected_category) }}">Next</a>
        </li>
    </ul>
</nav>
{% endif %}
{% endblock %}