<div class="kirin-dataset-view-static">
<style>{{ css_content }}</style>
{% from 'macros.html' import render_file_item, render_file_preview %}

<!-- Header panel -->
<div class="panel">
    <div class="panel-header">
        <h2 class="panel-title">{{ data.name }}</h2>
    </div>
    <div class="panel-content">
        <div class="space-y-4">
            {% if data.description %}
            <p class="text-muted-foreground">{{ data.description }}</p>
            {% endif %}

            <div class="flex items-center gap-4">
                <span class="text-sm text-muted-foreground">Commits: {{ data.commit_count }}</span>
                {% if data.total_size %}
                <span class="text-sm text-muted-foreground">Size: {{ data.total_size }}</span>
                {% endif %}
            </div>

            {% if data.current_commit %}
            <div>
                <span class="text-sm text-muted-foreground">Current Commit:</span>
                <span class="commit-hash">{{ data.current_commit.hash }}</span>
                <span class="text-sm">{{ data.current_commit.message }}</span>
            </div>
            {% else %}
            <p class="text-muted-foreground">No commits yet</p>
            {% endif %}
        </div>
    </div>
</div>

<!-- Files panel -->
{% if data.files %}
<div class="panel">
    <div class="panel-header">
        <h3 class="panel-title">Files</h3>
    </div>
    <div class="panel-content">
        <div class="kirin-file-list">
            {% for file_info in data.files %}
            {% set index = loop.index0 %}
            {% set code_id = "code-" ~ index %}
            {% set preview_id = "preview-" ~ index %}
            {% set variable_name = data.get('variable_name', 'dataset') %}
            {% set code_snippet = '# Get path to local clone of file\nwith ' ~ variable_name ~ '.local_files() as files:\n    file_path = files["' ~ file_info.name ~ '"]' %}
            {{ render_file_item(file_info, index, code_id, preview_id, code_snippet, variable_name) }}
            {% endfor %}
        </div>
    </div>
</div>
{% elif data.has_commit %}
<div class="panel">
    <div class="panel-content">
        <p class="text-muted-foreground">No files in current commit</p>
    </div>
</div>
{% endif %}

<!-- Commit history panel -->
{% if data.history %}
<div class="panel">
    <div class="panel-header">
        <h3 class="panel-title">Recent Commits</h3>
    </div>
    <div class="panel-content">
        {% for commit in data.history %}
        <div class="commit-item">
            <div class="flex items-center justify-between gap-4">
                <div>
                    <span class="commit-hash">{{ commit.hash }}</span>
                    <span class="commit-message">{{ commit.message }}</span>
                </div>
                <span class="commit-timestamp">{{ commit.timestamp }}</span>
            </div>
            <div class="text-sm text-muted-foreground mt-2">
                {{ commit.file_count }} files, {{ commit.size }}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- JavaScript for file interactions -->
<script>
{{ file_interactions_js | safe }}
</script>
</div>
