{% extends "base.html" %}
{% block content %}
<div class="breadcrumb">
    <a href="/files">Files</a>
    <span class="sep">/</span>
    {% if folder and folder != '/' %}
    <a href="/files?folder={{ folder }}">{{ folder }}</a>
    <span class="sep">/</span>
    {% endif %}
    <span>{{ item.original_filename }}</span>
</div>

<div class="detail-header">
    <h1 class="detail-title">{{ item.original_filename }}</h1>
    <div class="flex gap-2">
        <a href="/files/{{ item.id }}/download" class="btn btn-primary btn-sm">Download</a>
        <form action="/files/{{ item.id }}/delete" method="post" data-confirm="Delete this file?" style="display:inline">
            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
        </form>
    </div>
</div>

<div class="detail-meta mt-2">
    <span class="detail-meta-item">Folder: {{ folder }}</span>
    {% if item.mime_type %}<span class="detail-meta-item">Type: {{ item.mime_type }}</span>{% endif %}
    {% if item.size_bytes %}<span class="detail-meta-item">Size: {{ "%.1f"|format(item.size_bytes / 1024) }} KB</span>{% endif %}
    {% if item.description %}<span class="detail-meta-item">{{ item.description }}</span>{% endif %}
    {% if item.tags %}
    <div class="mt-1">
        {% for tag in item.tags %}<span class="row-tag">{{ tag }}</span>{% endfor %}
    </div>
    {% endif %}
</div>

{% if can_preview %}
<div class="card mt-3" style="padding: 16px;">
    {% if item.mime_type and item.mime_type.startswith('image/') %}
    <img src="/files/{{ item.id }}/serve" alt="{{ item.original_filename }}" style="max-width: 100%; height: auto; border-radius: var(--radius);">
    {% elif item.mime_type == 'application/pdf' %}
    <iframe src="/files/{{ item.id }}/serve" style="width: 100%; height: 600px; border: none; border-radius: var(--radius);"></iframe>
    {% elif item.mime_type and item.mime_type.startswith('text/') %}
    <iframe src="/files/{{ item.id }}/serve" style="width: 100%; height: 400px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff;"></iframe>
    {% endif %}
</div>
{% else %}
<div class="empty-state mt-3">
    <div class="empty-state-icon">&#128196;</div>
    <div class="empty-state-text">Preview not available for this file type</div>
    <a href="/files/{{ item.id }}/download" class="btn btn-primary">Download Instead</a>
</div>
{% endif %}
{% endblock %}