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

{% set page = 'treegraph' %}

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

{% block content %}

    {% embed 'breadcrumb.twig' with {breadcrumbs: [{dir: 'treegraph.title'|t, path:''}]} %}
        {% block right %}
        {% endblock %}

        {% block left %}
            <span class="badge bg-info">{{ 'treegraph.hover_hint'|t }}</span>
        {% endblock %}

    {% endembed %}

    <div style="display:flex; flex-direction: row;">
        <div id="rel-container">
            <canvas id="graph-canvas" width="10px">
                <ul id="graph-raw-list">
                    {% for item in graphItems %}
                        <li><span class="node-relation">{{ item.relation }}</span></li>
                    {% endfor %}
                </ul>
            </canvas>
        </div>
        <div id="git-graph-container">
            <div id="p3x-gitlist-treegraph-log">
                <ul id="rev-list">
                    {% for item in graphItems %}
                        <li>
                            {% if item.rev is not empty %}
                                <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 %}