{% extends "base.html" %}
{% block title %}{{ commit.summary }} - {{ name }}{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block content %}
<main>

    <section class="commit-header">
        <div class="commit-nav">
            {% if commit.prev_commit != "" %}
                <a class="nav-prev" href="/{{ name }}/commit/{{ commit.prev_commit }}?branch={{ current_branch }}">&larr; Previous</a>
            {% endif %}
            {% if commit.next_commit != "" %}
                <a class="nav-next" href="/{{ name }}/commit/{{ commit.next_commit }}?branch={{ current_branch }}">Next &rarr;</a>
            {% endif %}
        </div>
        <hr />
        <h2 class="commit-title">{{ commit.summary }} {% if commit.is_head %}<span class="head-label">HEAD</span>{% endif %}{% if commit.branch_name != "" %}<span class="branch-label">{{ commit.branch_name }}</span>{% endif %}</h2>
        <div class="commit-meta">
            <dl>
                <dt>commit</dt>
                <dd><span class="hash monospace">{{ commit.hash }}</span></dd>

                <dt>author</dt>
                <dd>{{ commit.author }} &lt;{{ commit.author }}&gt; <span class="small">{{ commit.author_datetime }}</span></dd>

                <dt>committer</dt>
                <dd>{{ commit.committer }} <span class="small">{{ commit.committer_datetime }}</span></dd>

                <dt>files changed</dt>
                <dd>{{ commit.files }}</dd>

                <dt>lines</dt>
                <dd>
                    {% if commit.removed %}<span class="red monospace">-{{ commit.removed }}</span>/{% endif %}
                    {% if commit.added %}<span class="green monospace">+{{ commit.added }}</span>{% endif %}
                </dd>
            </dl>
        </div>
    </section>

    {# Render the top row full-width: commit message + changed files #}
    <div class="commit-top">
        <section class="commit-message">
            <h3>Commit message</h3>
            <pre class="message monospace">{{ commit.message }}</pre>
        </section>

        <aside class="commit-files-list">
            {% if commit.diff and length(commit.diff) > 0 %}
            <h3>Changed files ({{ length(commit.diff) }})</h3>
            <table class="repo-table files-table">
                <thead>
                <tr>
                    <th>Filename</th>
                    <th>Changes</th>
                    <th>Mode</th>
                </tr>
                </thead>
                <tbody>
                {% for df in commit.diff %}
                <tr>
                    <td class="col-name"><a href="#diff-{{ df.file_index }}">{{ df.filename }}</a>
                        {% if df.change_type == "renamed" or df.change_type == "copied" %}
                            <div class="change-label">{{ df.change_type }} from <span class="old-filename">{{ df.old_filename }}</span></div>
                        {% endif %}
                    </td>
                    <td class="commit-lines">
                        {% if df.removed_lines %}<span class="red monospace">-{{ df.removed_lines }}</span>/{% endif %}{% if df.added_lines %}<span class="green monospace">+{{ df.added_lines }}</span>{% endif %}
                    </td>
                    <td class="col-idle">{{ df.old_mode }} &#8594; {{ df.new_mode }}</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p>No file changes available.</p>
            {% endif %}
        </aside>
    </div>

    {# Now render the TOC sidebar to the left and the diff on the right; this sits below the top row #}
    <hr />
    <div class="page-with-toc">
        <nav class="toc-sidebar">
            <h4>Files</h4>
            {% if toc_html and toc_html != "" %}
                <div class="toc-tree">{{ toc_html }}</div>
            {% else %}
                <p class="toc-empty">No files</p>
            {% endif %}
        </nav>

        <div class="commit-diff">
            {% if commit.diff and length(commit.diff) > 0 %}
            <h3>Diff</h3>
            {% for df in commit.diff %}
            <article id="diff-{{ df.file_index }}" class="diff-block">
                <header class="diff-header"><a class="diff-toggle" href="#" data-target="diff-body-{{ df.file_index }}">{{ df.filename }}</a>
                    {% if df.change_type == "renamed" or df.change_type == "copied" %}
                        <div class="rename-info">{{ df.change_type }} from <span class="old-filename">{{ df.old_filename }}</span></div>
                    {% endif %}
                </header>
                <div id="diff-body-{{ df.file_index }}" class="diff-body">
                    <div class="diff monospace">{% for line in df.diff_lines %}{{ line.html }}{% endfor %}</div>
                </div>
            </article>
            {% endfor %}
            {% endif %}
        </div>
    </div>

</main>

<script>
(function () {
    // Toggle diff bodies (visible by default)
    document.querySelectorAll('.diff-toggle').forEach(function (el) {
        el.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.getElementById(el.getAttribute('data-target'));
            if (!target) return;
            if (target.style.display === 'none' || getComputedStyle(target).display === 'none') {
                target.style.display = 'block';
            } else {
                target.style.display = 'none';
            }
            return false;
        });
    });

})();
</script>

{% endblock %}