{% extends "base.html" %}

{% block body %}

<style>
    .omnic-git--root {
        background: #eee;
        padding: 20px;
    }

    .omnic-git--item {
        display: block;
        min-height: 80px;
    }

    .omnic-git--directory {
    }

    .omnic-git--item > div {
        margin: 2px;
        display: inline-block;
        width: 100px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }

    div.omnic-git--directory > div.omnic-git--path:before {
        content: '▶';
        width: 100px;
        display: inline-block;
        text-align: center;
        font-size: 20pt;
        margin-top: 20px;
    }

    div.omnic-git--directory > div.omnic-git--path.opened:before {
        content: '▼';
    }

    div.omnic-git--directory > div.omnic-git--path {
        display: block;
    }

    div.omnic-git--subdir {
        border-left: 2px solid gray;
        padding-left: 10px;
        margin-left: 30px;
        width: 800px;
    }

    div.omnic-git--subdir {
        display: none;
    }

    div.omnic-git--subdir.tree-visible {
        display: block;
    }

    div.omnic-git--path {
        width: 400px;
        font-size: 16pt;
    }

    .omnic-git--size {
        color: gray;
    }

    .omnic-git--sha {
        color: gray;
        overflow: hidden;
        ellipsis: auto;
    }
</style>


<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Zoo</h1>
            <p>An example git repo with many specimen of many different file types</p>
            <p><a href="http://github.com/michaelpb/">http://github.com/michaelpb/</a></p>
            <div class="row">
                <script src="{{ inject_zoo_url|safe }}" />
            </div>
        </div>
    </div>
</div>

<script src="/viewer/js/reload-thumb.js"></script>

<script>
    $(document).ready(function () {
        $('.omnic-git--directory').click(function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            $(this).children('.omnic-git--subdir').toggleClass('tree-visible');
            $(this).children('.omnic-git--path').toggleClass('opened');
        });
    });
</script>

{% endblock body %}
