Files
lifeos-dev/templates/file_preview.html

48 lines
2.2 KiB
HTML

{% extends "base.html" %}
{% block content %}
<div class="breadcrumb">
<a href="/files">Files</a>
<span class="sep">/</span>
<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">
{% 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: var(--surface2);"></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 %}