{% extends "base.html" %}

{% block content %}
{{ render_partial('partials/toolbar.html',
branches=branches,
current_base_ref=current_base_ref,
unstaged=unstaged,
staged=staged,
untracked=untracked,
search_filter=search_filter,
total_files=total_files,
is_head_comparison=is_head_comparison) }}

<!-- Main Content -->
<main class="flex-1">
    {% if loading %}
    {{ render_partial('partials/loading_state.html') }}
    {% elif not groups or not total_files %}
    {{ render_partial('partials/empty_state.html',
    error=error,
    unstaged=unstaged,
    untracked=untracked,
    current_base_ref=current_base_ref) }}
    {% else %}
    <!-- Diff Content -->
    <div class="diff-container">
        <div class="p-4 space-y-6">
            {{ render_partial('partials/global_controls.html') }}

            <!-- Render Diff Groups -->
            {% if not is_head_comparison and not untracked and groups.get('changes') %}
            <!-- Branch comparison with no untracked files: show all changes at top level -->
            <div class="group-content" data-group-content="ungrouped"
                {% if groups['changes'].hidden_by_search %}style="display: none;"{% endif %}>
                {% for file in groups['changes'].files %}
                {% set group_name = 'changes' %}
                {% include 'diff_file.html' with context %}
                {% endfor %}
            </div>
            {% elif not untracked and groups.get('changes') %}
            <!-- HEAD comparison with no untracked files: show ungrouped -->
            <div class="group-content" data-group-content="ungrouped"
                {% if groups['changes'].hidden_by_search %}style="display: none;"{% endif %}>
                {% for file in groups['changes'].files %}
                {% set group_name = 'changes' %}
                {% include 'diff_file.html' with context %}
                {% endfor %}
            </div>
            {% else %}
            {% include "diff_groups.html" %}
            {% endif %}
        </div>
    </div>
    {% endif %}
</main>
{% endblock %}