{% extends "base.html" %}
{% block content %}
<div class="page-header">
    <h1 class="page-title">Files<span class="page-count">{{ items|length }}</span></h1>
    <div class="flex gap-2">
        <form action="/files/sync" method="post" style="display:inline">
            <button type="submit" class="btn btn-secondary">Sync Files</button>
        </form>
        <a href="/files/upload{{ '?folder=' ~ current_folder if current_folder }}{{ '?context_type=' ~ context_type ~ '&context_id=' ~ context_id if context_type }}" class="btn btn-primary">+ Upload File</a>
    </div>
</div>

{% if sync_result and (sync_result.added > 0 or sync_result.removed > 0) %}
<div class="flash-message" style="background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 16px; color: var(--text); font-size: 0.85rem;">
    Synced: {{ sync_result.added }} file{{ 's' if sync_result.added != 1 }} added, {{ sync_result.removed }} removed
</div>
{% endif %}

{% if folders %}
<div class="filter-bar" style="display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;">
    <a href="/files" class="btn btn-xs {{ 'btn-primary' if current_folder is none else 'btn-ghost' }}">All</a>
    <a href="/files?folder=" class="btn btn-xs {{ 'btn-primary' if current_folder is not none and current_folder == '' else 'btn-ghost' }}">/</a>
    {% for f in folders %}
    <a href="/files?folder={{ f }}" class="btn btn-xs {{ 'btn-primary' if current_folder == f else 'btn-ghost' }}">{{ f }}</a>
    {% endfor %}
</div>
{% endif %}

{% if items %}
<div class="card">
    {% for item in items %}
    <div class="list-row">
        <span class="row-title">
            <a href="/files/{{ item.id }}/preview">{{ item.original_filename }}</a>
        </span>
        <span class="row-meta" style="color: var(--muted); font-size: 0.8rem;">{{ item.folder }}</span>
        {% if item.mime_type %}
        <span class="row-tag">{{ item.mime_type.split('/')|last }}</span>
        {% endif %}
        {% if item.size_bytes %}
        <span class="row-meta">{{ "%.1f"|format(item.size_bytes / 1024) }} KB</span>
        {% endif %}
        {% if item.description %}
        <span class="row-meta">{{ item.description[:50] }}</span>
        {% endif %}
        <div class="row-actions">
            <a href="/files/{{ item.id }}/download" class="btn btn-ghost btn-xs">Download</a>
            <form action="/files/{{ item.id }}/delete" method="post" data-confirm="Delete this file?" style="display:inline">
                <button type="submit" class="btn btn-ghost btn-xs" style="color: var(--red)">Del</button>
            </form>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <div class="empty-state-icon">&#128193;</div>
    <div class="empty-state-text">No files{{ ' in this folder' if current_folder is not none else ' uploaded yet' }}</div>
    <a href="/files/upload" class="btn btn-primary">Upload First File</a>
</div>
{% endif %}
{% endblock %}