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

{% block title %}
    {% trans username=username, repository=repository %}History of {{ username }}/{{ repository }}{% endtrans %}
{% 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 %}{% trans %}tag:{% endtrans %}{% 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" %}{% trans %}tag:{% endtrans %} {% endif %}{{ branch[0] }}</option>
                        {% endif %}
                    {% endfor %}
                </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><a href="/{{ username }}/{{ repository }}/commit/{{ commit.sha }}">{{ commit.message | split("\n") | first }}</a></h3>
                            <p>
                                {% trans owner_name=commit.owner_name %}
                                    by <a href="/{{ owner_name }}">{{ owner_name }}</a>,
                                {% endtrans %}
                                <span title="{% trans receive_date=commit.receive_date.strftime('%A, %e %B %Y, %H:%M:%S') %}received on {{ receive_date }}{% endtrans %}">
                                    {{ 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 }}">{% trans %}View tree{% endtrans %}</a>
                            </x-buttonbox>
                        </section>
                    </article>
                {% endfor %}
                <x-hbox id="pagination-options">
                    <x-hbox id="pagination">
                        {% if prev_page %}
                            <a href="?page=1">
                                «
                            </a>
                            <a href="?page={{ prev_page }}">
                                ‹
                            </a>
                        {% endif %}
                        <span>{{ page_number }}/{{ num_pages }}</span>
                        {% if next_page %}
                            <a href="?page={{ next_page }}">
                                ›
                            </a>
                            <a href="?page={{ last_page }}">
                                »
                            </a>
                        {% endif %}
                    </x-hbox>
                    <form>
                        <x-hbox>
                            <label>
                                Items per page:
                                <input type="number" name="per_page" value="{{ page_length }}" min="1" max="256" style="font: var(--mono-font);">
                            </label>
                            <button type="submit">Load</button>
                        </x-hbox>
                    </form>
                </x-hbox>
            </x-vbox>
        </x-frame>
    </x-vbox>
{% endblock %}