{% extends "repo.html" %}
{% block header %}{{ super() }}/<a href="/{{ username }}/{{ repository }}/tree">tree</a>{% endblock %}
{% block content %}
<!--
<dialog id="commit-dialog">
    <x-frame style="--width: 768px; --margin: 0;">
        <div class="card">
            <section class="card-main">
                <form>
                    <x-vbox>
                        <x-hbox style="align-items: center; justify-content: space-between;">
                            <h3>Commit</h3>
                            <button class="button-flat big-button"><iconify-icon icon="mdi:close"></iconify-icon></button>
                        </x-hbox>
                        <div>
                            <h4>Changes (-100, +100)</h4>
                            <ul>
                                <li>File 1: removed</li>
                                <li>File 2: created</li>
                                <li>File 3: modified</li>
                            </ul>
                        </div>
                        <x-vbox class="flexible-space nopad">
                            <input id="commit-message" placeholder="Commit message">
                            <textarea rows="6"></textarea>
                        </x-vbox>
                        <x-buttonbox class="buttonbox-right">
                            <button class="button-flat" onclick="document.getElementById('stash-dialog').showModal(); return false;">
                                <iconify-icon icon="mdi:close-box-multiple"></iconify-icon>
                                Stash
                            </button>
                            <button>
                                <iconify-icon icon="mdi:send-check"></iconify-icon>
                                Commit
                            </button>
                        </x-buttonbox>
                    </x-vbox>
                </form>
            </section>
        </div>
    </x-frame>
</dialog>
<dialog id="stash-dialog">
    <x-frame style="--width: 320px; --margin: 0;">
        <div class="card">
            <section class="card-main">
                <form method="dialog">
                    <x-vbox>
                        <div>
                            <h4>Stash changes</h4>
                            <p>Are you sure you want to stash your changes? They will be permanently lost.</p>
                        </div>
                        <x-buttonbox class="buttonbox-right">
                            <button class="button-flat">
                                No
                            </button>
                            <button class="button-flat">
                                Yes
                            </button>
                        </x-buttonbox>
                    </x-vbox>
                </form>
            </section>
        </div>
    </x-frame>
</dialog>
-->

<x-vbox>
    <!--
    <x-frame style="--width: 896px;">
        <article class="card">
            <section class="card-main">
                <x-hbox style="align-items: center; justify-content: space-between;">
                    You've got uncommitted changes (N files)
                    <x-buttonbox>
                        <button class="button-flat" onclick="document.getElementById('stash-dialog').showModal();">
                            <iconify-icon icon="mdi:close-box-multiple"></iconify-icon>
                            Stash
                        </button>
                        <button onclick="document.getElementById('commit-dialog').showModal();">
                            <iconify-icon icon="mdi:send"></iconify-icon>
                            Commit
                        </button>
                    </x-buttonbox>
                </x-hbox>
            </section>
        </article>
    </x-frame>
    <dialog id="new-branch">
        <x-frame style="--width: 448px; --margin: 0;">
            <div class="card">
                <section class="card-main">
                    <form method="get">
                        <x-vbox>
                            <div>
                                <h4>Create new branch</h4>
                                <p>The branch will be based on the currently selected branch.</p>
                            </div>
                            <x-vbox class="nopad">
                                <label for="current">Copy of:</label>
                                <input id="current" name="current" value="{{ current }}" disabled>
                            </x-vbox>
                            <x-vbox class="nopad">
                                <label for="name">Name</label>
                                <input id="name" name="name" placeholder="{{ current }}" value="" required>
                            </x-vbox>
                            <label><input type="checkbox" id="orphan">Orphan branch</label>
                            <x-buttonbox class="buttonbox-right">
                                <button class="button-flat" onclick="document.getElementById('new-branch').close(); document.getElementById('branch-selection').value = 'branch-{{ current }}';">
                                    Cancel
                                </button>
                                <button class="button-flat" type="submit">
                                    Create
                                </button>
                            </x-buttonbox>
                        </x-vbox>
                    </form>
                </section>
            </div>
        </x-frame>
    </dialog>
    -->
    <x-frame style="--width: 896px;" class="flexible-space">
        <article class="card">
            <section class="card-main">
                <x-vbox>
                    <x-buttonbox>
                        <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>
                        <input id="repo-path-bar" value="{{ subpath }}">
                        <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 }}/tree/" + branch + "/{{ subpath }}", false);
                                    http.send();
                                    if(http.status == 404) {
                                        location.href = "/{{ username }}/{{ repository }}/tree/" + branch;
                                    } else {
                                        location.href = "/{{ username }}/{{ repository }}/tree/" + branch + "/{{ subpath }}";
                                    }
                                }
                            });

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

                            path.addEventListener("change", function() {
                                location.href = "/{{ username }}/{{ repository }}/tree/{{ current }}" + path.value;
                            });
                        </script>
                        <button onclick="history.back();" class="button-flat big-button">
                            <iconify-icon icon="mdi:arrow-left"></iconify-icon>
                        </button>
                        <button onclick="history.forward();" class="button-flat big-button">
                            <iconify-icon icon="mdi:arrow-right"></iconify-icon>
                        </button>
                        <a href="../" class="button button-flat big-button">
                            <iconify-icon icon="mdi:arrow-up"></iconify-icon>
                        </a>
                        <a href="/{{ username }}/{{ repository }}/tree/{{ current }}/" class="button button-flat big-button">
                            <iconify-icon icon="mdi:home"></iconify-icon>
                        </a>
                        <a href="" class="button button-flat big-button">
                            <iconify-icon icon="mdi:refresh"></iconify-icon>
                        </a>
                    </x-buttonbox>
                    {% include "tree-view.html" %}
                    <!--
                    <x-buttonbox class="buttonbox">
                        <button class="button-flat big-button">
                            <iconify-icon icon="mdi:file-plus"></iconify-icon>
                        </button>
                        <button class="button-flat big-button">
                            <iconify-icon icon="mdi:upload"></iconify-icon>
                        </button>
                        <div class="flexible-space"></div>
                        <button class="button-flat big-button" disabled>
                            <iconify-icon icon="mdi:open-in-app"></iconify-icon>
                        </button>
                        <button class="button-flat big-button">
                            <iconify-icon icon="mdi:download"></iconify-icon>
                        </button>
                        <button class="button-flat big-button">
                            <iconify-icon icon="mdi:share"></iconify-icon>
                        </button>
                        <button class="button-flat big-button" disabled>
                            <iconify-icon icon="mdi:content-copy"></iconify-icon>
                        </button>
                        <button class="button-flat big-button" disabled>
                            <iconify-icon icon="mdi:content-cut"></iconify-icon>
                        </button>
                        <button class="button-flat big-button" disabled>
                            <iconify-icon icon="mdi:content-paste"></iconify-icon>
                        </button>
                        <button class="button-flat big-button" disabled>
                            <iconify-icon icon="mdi:rename"></iconify-icon>
                        </button>
                        <button class="button-flat big-button" disabled>
                            <iconify-icon icon="mdi:delete"></iconify-icon>
                        </button>
                    </x-buttonbox>
                    -->
                </x-vbox>
            </section>
        </article>
    </x-frame>
</x-vbox>
{% endblock %}