{% extends "layouts/base.html" %}

{% block title %}{{ bucket_name }} - Gateway{% endblock %}

{% block content %}
<div class="fade-in">
    <div class="max-w-4xl mx-auto px-4 sm:px-8 py-4 sm:py-6 space-y-4 sm:space-y-6">
        <!-- Gateway header -->
        <div class="flex items-center justify-between gap-4">
            <div class="flex items-center gap-3 min-w-0">
                <i class="fas fa-globe text-primary text-xl flex-shrink-0"></i>
                <div class="min-w-0">
                    <h1 class="text-xl font-semibold truncate">{{ bucket_name }}</h1>
                    <div class="flex items-center gap-3 text-xs text-muted-foreground">
                        <span class="copyable" onclick="copyToClipboard('{{ bucket_id }}', this)" title="Click to copy bucket ID">
                            <i class="fas fa-fingerprint"></i>
                            <code>{{ bucket_id_short }}</code>
                        </span>
                        <span class="copyable" onclick="copyToClipboard('{{ bucket_link }}', this)" title="Click to copy version">
                            <i class="fas fa-code-branch"></i>
                            <code>{{ bucket_link_short }}</code>
                        </span>
                    </div>
                </div>
            </div>
            <button class="button" onclick="copyShareLink(this)" title="Copy link">
                <i class="fas fa-share-alt"></i>
            </button>
        </div>

        <!-- Breadcrumb navigation -->
        <nav aria-label="Breadcrumb">
            <ol class="flex items-center gap-2 text-sm">
                <li><a href="/gw/{{ bucket_id }}?viewer=true" class="text-primary hover:underline">/</a></li>
                {% for segment in path_segments %}
                <li><i class="fas fa-chevron-right text-muted-foreground text-xs"></i></li>
                <li><a href="/gw/{{ bucket_id }}{{ segment.path }}?viewer=true" class="text-primary hover:underline">{{ segment.name }}</a></li>
                {% endfor %}
            </ol>
        </nav>

        <!-- File list -->
        {% if items.is_empty() %}
        <div class="card">
            <div class="p-8 text-center text-muted-foreground">
                <i class="fas fa-folder-open text-4xl mb-4"></i>
                <p>This directory is empty</p>
            </div>
        </div>
        {% else %}
        <div class="card">
            <table class="uk-table uk-table-divider uk-table-hover">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in items %}
                    <tr>
                        <td>
                            <div class="flex items-center gap-2">
                                {% if item.is_dir %}
                                <i class="fas fa-folder file-icon-dir"></i>
                                <a href="/gw/{{ bucket_id }}{{ item.path }}?viewer=true" class="text-primary font-medium hover:underline">
                                    {{ item.name }}
                                </a>
                                {% else %}
                                {% if item.mime_type.starts_with("image/") %}
                                <i class="fas fa-file-image file-icon-image"></i>
                                {% else if item.mime_type.starts_with("video/") %}
                                <i class="fas fa-file-video file-icon-video"></i>
                                {% else if item.mime_type.starts_with("audio/") %}
                                <i class="fas fa-file-audio file-icon-audio"></i>
                                {% else if item.mime_type.starts_with("text/") || item.mime_type == "application/json" %}
                                <i class="fas fa-file-alt file-icon-text"></i>
                                {% else if item.mime_type == "application/pdf" %}
                                <i class="fas fa-file-pdf file-icon-pdf"></i>
                                {% else %}
                                <i class="fas fa-file file-icon-default"></i>
                                {% endif %}
                                <a href="/gw/{{ bucket_id }}{{ item.path }}?viewer=true" class="text-primary font-medium hover:underline">
                                    {{ item.name }}
                                </a>
                                {% endif %}
                            </div>
                        </td>
                        <td class="text-xs">
                            <span class="file-type-badge{% if item.is_dir %} file-type-dir{% endif %}">
                                {{ item.mime_type }}
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block head %}
<style>
.copyable {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.copyable:hover {
    background: hsl(var(--muted));
}

.copyable.copied {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}
</style>

<script>
function copyToClipboard(text, element) {
    navigator.clipboard.writeText(text).then(() => {
        element.classList.add('copied');
        const icon = element.querySelector('i');
        const originalClass = icon.className;
        icon.className = 'fas fa-check';
        setTimeout(() => {
            element.classList.remove('copied');
            icon.className = originalClass;
        }, 2000);
    });
}

function copyShareLink(element) {
    navigator.clipboard.writeText(window.location.href).then(() => {
        const icon = element.querySelector('i');
        icon.className = 'fas fa-check';
        setTimeout(() => { icon.className = 'fas fa-share-alt'; }, 2000);
    });
}
</script>
{% endblock %}