{% extends "repo.html" %}
{% set active_page = "log" %}

{% block title %}
    History of {{ username }}/{{ repository }}
{% endblock %}
{% block content %}
    <x-vbox>
        <x-frame style="--width: 896px;" class="flexible-space">
            <x-vbox>
                <select id="branch-selection" style="flex: 0 1 auto;">
                    <option value="ref-{{ current }}" selected>{% if "tag:" in current %}tag:{% endif %}{{ current | replace("~", "/") | replace("tag:", " ") }}</option>
                    {% for branch in branches %}
                        {% if branch[0] != current | replace("~", "/") | replace("tag:", " ") %}
                            <option value="ref-{% if branch[1] == 'tag' %}tag:{% endif %}{{ branch[0] | replace('/', '~') }}">{% if branch[1] == "tag" %}tag: {% endif %}{{ branch[0] }}</option>
                        {% endif %}
                    {% endfor %}
                    <!--<option value="new">[CREATE NEW BRANCH]</option>-->
                </select>
                <script>
                    branchSelect = document.getElementById("branch-selection");

                    branchSelect.addEventListener("change", function() {
                        if(branchSelect.value == "new") {
                            document.getElementById("new-branch").showModal();
                        } else {
                            const PREFIX = "ref-";
                            if(branchSelect.value.startsWith(PREFIX)) {
                                branch = branchSelect.value.slice(PREFIX.length);
                            }
                            var http = new XMLHttpRequest();
                            http.open("HEAD", "/{{ username }}/{{ repository }}/log/" + branch + "/{{ subpath }}", false);
                            http.send();
                            if(http.status == 404) {
                                location.href = "/{{ username }}/{{ repository }}/log/" + branch;
                            } else {
                                location.href = "/{{ username }}/{{ repository }}/log/" + branch + "/{{ subpath }}";
                            }
                        }
                    });

                    path = document.getElementById("repo-path-bar");

                    path.addEventListener("change", function() {
                        location.href = "/{{ username }}/{{ repository }}/log/{{ current }}" + path.value;
                    });
                </script>
                {% for commit in commits | reverse %}
                    <article class="card card-horizontal">
                        <figure class="branch-icon">
                            <a href="/{{ commit.owner_name }}">
                                <img src="/info/{{ commit.owner_name }}/avatar" style="width: 48px; height: 48px;">
                            </a>
                        </figure>
                        <section class="card-main flexible-space">
                            <h3>{{ commit.message | split("\n") | first }}</h3>
                            <p>by <a href="/{{ commit.owner_name }}">{{ commit.owner_name }}</a>, <span title="{{ commit.author_date | unixtime }}
received on {{ commit.receive_date | strftime('%A, %e %B %Y, %H:%M:%S') }} ({{ commit.receive_date | unixtime }})">{{ commit.author_date | strftime("%A, %e %B %Y, %H:%M:%S") }}</span></p>
                            <code>{{ commit.sha }}</code>
                        </section>
                        <section>
                            <x-buttonbox style="align-items: center; height: 100%;">
                                <a class="button" href="/{{ username }}/{{ repository }}/tree/~{{ commit.sha }}">View tree</a>
                            </x-buttonbox>
                        </section>
                    </article>
                {% endfor %}
            </x-vbox>
        </x-frame>
    </x-vbox>
{% endblock %}