{% extends "base.html" %}

{% block content %}
<div class="w3-bar">

    <span class="w3-bar-item"><span class="w3-xlarge">{{repo.owner.name}}/{{repo.name}}</span></span>
    <span class="w3-bar-item w3-right"><button class="w3-button w3-round w3-border">Fork</button></span>
    <span class="w3-bar-item w3-right"><button class="w3-button w3-round w3-border">Star</button></span>
    <span class="w3-bar-item w3-right"><button class="w3-button w3-round w3-border">Follow</button></span>

</div>

<div class="w3-bar w3-light-grey">
    <button class="w3-bar-item w3-button repotablink w3-grey" onclick="openCity(event,'Code')">Code</button>
    <button class="w3-bar-item w3-button repotablink" onclick="openCity(event,'Issues')">Issues</button>
    <button class="w3-bar-item w3-button repotablink" onclick="openCity(event,'Pull')">Pull requests</button>
    <button class="w3-bar-item w3-button repotablink" onclick="openCity(event,'Projects')">Projects</button>
    <button class="w3-bar-item w3-button repotablink" onclick="openCity(event,'Versions')">Versions</button>
    <button class="w3-bar-item w3-button repotablink" onclick="openCity(event,'Wiki')">Wiki</button>
    <button class="w3-bar-item w3-button repotablink" onclick="openCity(event,'Activity')">Activity</button>
</div>

<div id="Code" class="w3-container w3-border repoview">
    <p><a href="https://www.wikipedia.org">https://www.wikipedia.org</a></p>
    <p>Repository description</p>

    <div class="w3-panel w3-border w3-cell-row">
        <div class="w3-center w3-cell">
            <i class="fa fa-history"></i> 112 revisions
        </div>
        <div class="w3-center w3-cell">
            <i class="fa fa-code-branch"></i> 10 branches
        </div>
        <div class="w3-center w3-cell">
            <i class="fa fa-tag"></i> 5 tags
        </div>
        <div class="w3-center w3-cell">
            <i class="fa fa-database"></i> 10 KiB
        </div>
    </div>

    <div class="w3-cell-row">
        <div class="w3-cell w3-cell-middle">
            <button class="w3-button w3-round w3-border">Branch: master</button>
            <button class="w3-button w3-round w3-border">New merge request</button>
        </div>

        <div class="w3-right w3-cell w3-cell-middle">
            <div class="w3-bar">
                <button class="w3-button w3-border w3-round w3-bar-item">HTTPS</button>
                <button class="w3-button w3-border w3-round w3-bar-item">SSH</button>
                <input class="w3-input w3-border w3-bar-item w3-round" type="text" value="git@domain.net:plop/plip.git">
                <button class="w3-button w3-border w3-round w3-bar-item"><i class="fa fa-copy"></i></button>
                <button class="w3-button w3-border w3-round w3-bar-item"><i class="fa fa-download"></i></button>
            </div>
        </div>
    </div>

    <div class="w3-panel w3-border">
        <div class="w3-cell-row">
            <div class="w3-cell">
                <ul class="breadcrumb">
                    <li><a href="#">{{repo.name}}</a></li>
                    {% for (dir, prev) in root %}
                    <li><a href="{{prev}}">{{dir}}</a></li>
                    {% endfor %}
                </ul>
            </div>
            <div class="w3-right w3-cell w3-cell-middle">
                <button class="w3-button w3-round w3-border">New file</button>
                <button class="w3-button w3-round w3-border"><i class="fa fa-upload"></i></button>
            </div>
        </div>


        <ul class="filebrowser">
            {% for entry in browse %}
            <li><i class="fa fa-folder"></i> {{ entry }}</li>
            {% endfor %}
        </ul>
    </div>

</div>

<div id="Issues" class="w3-container w3-border repoview" style="display:none">
    <h2>Issues</h2>
    <p>Paris is the capital of France.</p>
</div>

<div id="Pull" class="w3-container w3-border repoview" style="display:none">
    <h2>Pull</h2>
    <p>Tokyo is the capital of Japan.</p>
</div>

<div id="Projects" class="w3-container w3-border repoview" style="display:none">
    <h2>Projects</h2>
    <p>Tokyo is the capital of Japan.</p>
</div>


<div id="Versions" class="w3-container w3-border repoview" style="display:none">
    <h2>Versions</h2>
    <p>Tokyo is the capital of Japan.</p>
</div>


<div id="Wiki" class="w3-container w3-border repoview" style="display:none">
    <h2>Wiki</h2>
    <p>Tokyo is the capital of Japan.</p>
</div>


<div id="Activity" class="w3-container w3-border repoview" style="display:none">
    <h2>Activity</h2>
    <p>Tokyo is the capital of Japan.</p>
</div>

<script>
    function openCity(evt, viewName) {
        var i, x, tablinks;
        x = document.getElementsByClassName("repoview");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("repotablink");
        for (i = 0; i < x.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" w3-grey", "");
        }
        document.getElementById(viewName).style.display = "block";
        evt.currentTarget.className += " w3-grey";
    }
</script>



{% endblock %}