<!-- Files Tab Content -->
<div class="space-y-6">
    <!-- Python Access Code -->
    <div class="code-snippet collapsed" id="files-code-snippet">
        <div class="code-snippet-header">
            <div class="code-snippet-title code-snippet-toggle" onclick="toggleCodeSnippet('files-code-snippet')">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="6,9 12,15 18,9"></polyline>
                </svg>
                Python Access Code
            </div>
            <button class="copy-btn" onclick="copyCode('files-code')">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                </svg>
                Copy
            </button>
        </div>
        <div class="code-snippet-content">
            <pre><code id="files-code">from kirin import Dataset

dataset = Dataset(
    root_dir="{{ catalog.root_dir }}",
    name="{{ dataset_name }}"{% if catalog.aws_profile %},
    aws_profile="{{ catalog.aws_profile }}"{% endif %}{% if catalog.gcs_token %},
    gcs_token="{{ catalog.gcs_token }}"{% endif %}{% if catalog.gcs_project %},
    gcs_project="{{ catalog.gcs_project }}"{% endif %}{% if catalog.azure_account_name %},
    azure_account_name="{{ catalog.azure_account_name }}"{% endif %}{% if catalog.azure_account_key %},
    azure_account_key="{{ catalog.azure_account_key }}"{% endif %}{% if catalog.azure_connection_string %},
    azure_connection_string="{{ catalog.azure_connection_string }}"{% endif %}
)

{% if checkout_commit %}
# Checkout to specific commit
dataset.checkout("{{ checkout_commit }}")
{% elif current_commit %}
# Checkout to latest commit (HEAD)
dataset.checkout("{{ current_commit }}")
{% else %}
# Checkout to latest commit (HEAD)
dataset.checkout()

# Or checkout to a specific commit
# dataset.checkout("commit_hash")
{% endif %}</code></pre>
        </div>
    </div>

    <!-- Files List -->
    <div class="space-y-4">
    {% if files %}
    <div class="space-y-2">
        {% for file in files %}
        <div class="file-item">
            <div class="file-icon">
                {% if file.name.lower().endswith(('.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.bmp', '.ico')) or (file.content_type and file.content_type.startswith('image/')) %}
                <!-- Image thumbnail -->
                <img src="/catalog/{{ catalog_id }}/{{ dataset_name }}/file/{{ file.name }}/thumbnail"
                     alt="{{ file.name }}"
                     class="file-icon"
                     style="width: 16px; height: 16px; object-fit: cover; border-radius: 2px;"
                     onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                    <circle cx="8.5" cy="8.5" r="1.5"></circle>
                    <polyline points="21,15 16,10 5,21"></polyline>
                </svg>
                {% elif file.name.endswith('.csv') or file.name.endswith('.tsv') %}
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                    <polyline points="14,2 14,8 20,8"></polyline>
                    <line x1="16" y1="13" x2="8" y2="13"></line>
                    <line x1="16" y1="17" x2="8" y2="17"></line>
                    <polyline points="10,9 9,9 8,9"></polyline>
                </svg>
                {% elif file.name.endswith('.json') %}
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                    <polyline points="14,2 14,8 20,8"></polyline>
                    <line x1="16" y1="13" x2="8" y2="13"></line>
                    <line x1="16" y1="17" x2="8" y2="17"></line>
                    <polyline points="10,9 9,9 8,9"></polyline>
                </svg>
                {% elif file.name.endswith('.py') or file.name.endswith('.js') or file.name.endswith('.ts') %}
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="16,18 22,12 16,6"></polyline>
                    <polyline points="8,6 2,12 8,18"></polyline>
                </svg>
                {% elif file.name.endswith('.md') or file.name.endswith('.txt') %}
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                    <polyline points="14,2 14,8 20,8"></polyline>
                    <line x1="16" y1="13" x2="8" y2="13"></line>
                    <line x1="16" y1="17" x2="8" y2="17"></line>
                    <polyline points="10,9 9,9 8,9"></polyline>
                </svg>
                {% else %}
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                    <polyline points="14,2 14,8 20,8"></polyline>
                </svg>
                {% endif %}
            </div>

            <div class="flex-1">
                <div class="file-name">
                    {{ file.name }}
                    {% if file.metadata and file.metadata.source_file %}
                    <span class="text-xs text-muted-foreground ml-2" title="Generated from {{ file.metadata.source_file }}">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline-block; vertical-align: middle;">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14,2 14,8 20,8"></polyline>
                        </svg>
                    </span>
                    {% endif %}
                </div>
                <div class="file-size">{{ "%.1f"|format(file.size / 1024) }} KB</div>
            </div>

            <div class="file-actions">
                <button onclick="openPreview(this.dataset.filename)" data-filename="{{ file.name|e }}" class="btn btn-ghost btn-sm">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                        <circle cx="12" cy="12" r="3"></circle>
                    </svg>
                    Preview
                </button>
                <a href="/catalog/{{ catalog_id }}/{{ dataset_name }}/file/{{ file.name }}/download"
                   class="btn btn-primary btn-sm">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        <polyline points="7,10 12,15 17,10"></polyline>
                        <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                    Download
                </a>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Total Size -->
    <div class="text-sm text-muted-foreground text-center py-4">
        Total size: {{ "%.1f"|format(files|sum(attribute='size') / (1024*1024)) }} MB
    </div>
    {% else %}
    <!-- Empty State -->
    <div class="text-center py-12">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="mx-auto mb-4 text-muted-foreground">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
            <polyline points="14,2 14,8 20,8"></polyline>
        </svg>
        <h3 class="text-lg font-semibold mb-2">No files in this commit</h3>
        <p class="text-muted-foreground mb-4">
            {% if checkout_commit %}
            This commit contains no files.
            {% else %}
            No files in this commit. Use the Commit tab to add files.
            {% endif %}
        </p>
    </div>
    {% endif %}
</div>

<script>
// Code snippet functionality
function toggleCodeSnippet(snippetId) {
    const snippet = document.getElementById(snippetId);
    snippet.classList.toggle('collapsed');
}

async function copyCode(codeId) {
    const codeElement = document.getElementById(codeId);
    const code = codeElement.textContent;

    try {
        await navigator.clipboard.writeText(code);

        // Visual feedback
        const button = event.target.closest('.copy-btn');
        const originalText = button.innerHTML;
        button.innerHTML = `
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="20,6 9,17 4,12"></polyline>
            </svg>
            Copied!
        `;
        button.classList.add('copied');

        // Reset after 2 seconds
        setTimeout(() => {
            button.innerHTML = originalText;
            button.classList.remove('copied');
        }, 2000);
    } catch (err) {
        console.error('Failed to copy code: ', err);
        // Fallback for older browsers
        const textArea = document.createElement('textarea');
        textArea.value = code;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
    }
}
</script>
