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

{% block title %}Document: {{ document.filename }} - LSMC Hub{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <a href="/documents" class="text-sm text-muted">&larr; Back to Documents</a>
        <h1>📄 {{ document.filename }}</h1>
    </div>
</div>

<div class="grid grid-2">
    <div>
        <!-- Document Details -->
        <div class="card mb-lg">
            <h3 class="mb-md">Document Details</h3>
            <div class="mb-md">
                <div class="text-sm text-muted">Filename</div>
                <div>{{ document.filename }}</div>
            </div>
            <div class="mb-md">
                <div class="text-sm text-muted">Document Type</div>
                <div>
                    <span class="badge badge-default">{{ revision.document_type or 'Unknown' }}</span>
                </div>
            </div>
            <div class="mb-md">
                <div class="text-sm text-muted">Content Type</div>
                <div>{{ revision.content_type or 'Unknown' }}</div>
            </div>
            <div class="mb-md">
                <div class="text-sm text-muted">Size</div>
                <div>{{ revision.size_bytes|filesizeformat if revision.size_bytes else 'Unknown' }}</div>
            </div>
            <div class="mb-md">
                <div class="text-sm text-muted">Created</div>
                <div>{{ document.created_at | format_dt(user_preferences) if document.created_at else '-' }}</div>
            </div>
            {% if revision.note %}
            <div>
                <div class="text-sm text-muted">Note</div>
                <div>{{ revision.note }}</div>
            </div>
            {% endif %}
        </div>

        <!-- Storage Info -->
        <div class="card mb-lg">
            <h3 class="mb-md">Storage</h3>
            <div class="mb-md">
                <div class="text-sm text-muted">S3 Bucket</div>
                <div>{{ revision.s3_bucket or 'Not stored' }}</div>
            </div>
            <div class="mb-md">
                <div class="text-sm text-muted">S3 Key</div>
                <div class="text-sm" style="word-break: break-all;">{{ revision.s3_key or '-' }}</div>
            </div>
            {% if revision.checksum_sha256 %}
            <div>
                <div class="text-sm text-muted">SHA256 Checksum</div>
                <div class="text-sm" style="word-break: break-all; font-family: monospace;">{{ revision.checksum_sha256 }}</div>
            </div>
            {% endif %}
        </div>
    </div>

    <div>
        <!-- Linked Entities -->
        <div class="card mb-lg">
            <h3 class="mb-md">Linked Entities</h3>
            {% if linked_entities and linked_entities|length > 0 %}
            <div class="linked-list">
                {% for entity in linked_entities %}
                <div class="linked-item">
                    <span class="badge badge-sm badge-default">{{ entity.type }}</span>
                    <a href="{{ entity.url }}">{{ entity.label }}</a>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="empty-state">
                <p class="text-muted">Not linked to any entities</p>
            </div>
            {% endif %}
        </div>

        <!-- Actions -->
        <div class="card">
            <h3 class="mb-md">Actions</h3>
            <a href="/documents/{{ document.euid }}/download" class="btn btn-primary" style="width: 100%;">Download</a>
        </div>
    </div>
</div>

<style>
.linked-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.linked-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
}
</style>
{% endblock %}