{% extends "base.html" %}
{% set active_nav = "manage" %}

{% block title %}Documents - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1>Documents</h1>
        <p class="page-subtitle">Manage uploaded documents and files</p>
    </div>
    <a href="/documents/upload" class="btn btn-primary">Upload Document</a>
</div>

<!-- Filters -->
<div class="card mb-lg">
    <form method="get" action="/documents" class="flex gap-md flex-wrap">
        <div class="form-group" style="flex: 1; min-width: 200px;">
            <label for="document_type">Document Type</label>
            <select id="document_type" name="document_type" class="form-select">
                <option value="">All Types</option>
                <option value="MANIFEST" {{ 'selected' if request.query_params.get('document_type') == 'MANIFEST' }}>Manifest</option>
                <option value="PACKING_SLIP" {{ 'selected' if request.query_params.get('document_type') == 'PACKING_SLIP' }}>Packing Slip</option>
                <option value="CHAIN_OF_CUSTODY" {{ 'selected' if request.query_params.get('document_type') == 'CHAIN_OF_CUSTODY' }}>Chain of Custody</option>
                <option value="REQUISITION" {{ 'selected' if request.query_params.get('document_type') == 'REQUISITION' }}>Requisition Form</option>
                <option value="OTHER" {{ 'selected' if request.query_params.get('document_type') == 'OTHER' }}>Other</option>
            </select>
        </div>
        <div class="form-group" style="flex: 1; min-width: 200px;">
            <label for="filename">Filename</label>
            <input type="text" id="filename" name="filename" class="form-input" placeholder="Search by filename" value="{{ request.query_params.get('filename', '') }}">
        </div>
        <div class="form-group" style="align-self: flex-end;">
            <button type="submit" class="btn btn-primary">Filter</button>
            <a href="/documents" class="btn btn-secondary">Clear</a>
        </div>
    </form>
</div>

<!-- Documents Table -->
<div class="card">
    {% if documents and documents|length > 0 %}
    <table class="table">
        <thead>
            <tr>
                <th>Filename</th>
                <th>EUID</th>
                <th>Type</th>
                <th>Size</th>
                <th>Linked To</th>
                <th>Created</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for doc in documents %}
            <tr>
                <td>
                    <span class="document-icon">📄</span>
                    {{ doc.filename }}
                </td>
                <td><a class="text-mono text-sm" href="/tapdb/object/{{ doc.id }}">{{ doc.id }}</a></td>
                <td>
                    <span class="badge badge-default">{{ doc.document_type or 'Unknown' }}</span>
                </td>
                <td>{{ doc.size_bytes|filesizeformat if doc.size_bytes else '-' }}</td>
                <td>
                    {% if doc.linked_entity %}
                    <a href="{{ doc.linked_entity.url }}">{{ doc.linked_entity.type }}: {{ doc.linked_entity.label }}</a>
                    {% else %}
                    <span class="text-muted">Not linked</span>
                    {% endif %}
                </td>
                <td>{{ doc.created_at | format_dt(user_preferences) if doc.created_at else '-' }}</td>
                <td>
                    <a href="/documents/{{ doc.id }}" class="btn btn-sm btn-secondary">View</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state">
        <p class="text-muted">No documents found</p>
    </div>
    {% endif %}
</div>
{% endblock %}