{% extends 'layout-page.twig' %}

{% set page = 'treegraph' %}

{% block title %}P3X GitList{% endblock %}

{% block content %}

    {% embed 'breadcrumb.twig' with {breadcrumbs: [{dir: 'Log graph', path:''}]} %}
        {% block right %}
        {% endblock %}

        {% block left %}
            <span class="label label-info">Hover over the log to see the full commit message.</span>
        {% endblock %}

    {% endembed %}


    <div class="network-view">
        <div id="git-graph-container">
            <div id="rel-container">
                <canvas id="graph-canvas" width="100px">
                    <ul id="graph-raw-list">
                        {% for item in graphItems %}
                            <li><span class="node-relation">{{ item.relation }}</span></li>
                        {% endfor %}
                    </ul>
                </canvas>
            </div>
            <div id="p3x-gitlist-treegraph-log">
                <ul id="rev-list">
                    {% for item in graphItems %}
                        <li>
                            {% if item.rev is defined %}
                                <a id="{{ item.short_rev }}" class="treegraph-button" href="{{ path('commit', {repo: repo, commit: item.rev}) }}"> {{ item.short_rev }}</a>
                                <strong> {{ item.branch }} </strong>
                                <span>{{ item.date | date(gitlist_date_format) }}</span>
                                by
                                <span class="author"><a class="treegraph-link" href="mailto:{{ item.author_email }}">{{ item.author }}</a></span>
                                &nbsp;
                                <span class="p3x-gitlist-treegraph-subject">{{ item.subject }}</span>
                            {% else %}
                                <span></span>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
            <div style="clear:both"><!-- --></div>
        </div>
    </div>



{% endblock %}