{% extends "base.html" %}

{% import "repo_tabs.html" as m %}

{% block title %}Swimlanes of {{ target.label }} · {{ repo.owner }}/{{ repo.name }}{% endblock %}

{% block bodyattrs %} data-repo="{{ repo.url }}"{% endblock %}

{% block tabs %}{% call m::tabs(repo, "changes") %}{% endblock %}

{% block mainclass %} class="wide"{% endblock %}

{% block content %}

<div class="head"><h1>Swimlanes <small>{{ target.label }} · {{ board.cards.len() }}{% if total > board.cards.len() %} newest of {{ total }}{% endif %} changes in {{ board.lanes }} lane{% if board.lanes != 1 %}s{% endif %}</small></h1>

<p class="small mute">Changes that do not depend on each other run in separate lanes, oldest on the left; an edge joins a change to what it depends on. There are no merge nodes: parallel work simply stays parallel. <a href="{{ repo.url }}/changes/{{ target.label }}">list view</a></p></div>

{% if board.cards.is_empty() %}<p class="empty">No changes.</p>{% else %}

<div class="lanes-board" style="overflow-x: auto">

<svg width="{{ board.width }}" height="{{ board.height }}" viewBox="0 0 {{ board.width }} {{ board.height }}" role="img" aria-label="Swimlanes of {{ target.label }}">

  {% for e in board.edges %}<path d="{{ e }}" class="lane" fill="none"/>{% endfor %}

  {% for c in board.cards %}

  <a href="{{ repo.url }}/change/{{ c.hash }}">

    <title>{{ c.short }} {{ c.title }}</title>

    <rect x="{{ c.x }}" y="{{ c.y }}" width="{{ crate::render::graph::CARD_W }}" height="{{ crate::render::graph::CARD_H }}" rx="6" class="node{% if c.head %} head{% endif %}"/>

    <text x="{{ c.x + 8 }}" y="{{ c.y + 14 }}" class="small">{{ c.short }}</text>

    <text x="{{ c.x + 8 }}" y="{{ c.y + 28 }}" class="small">{{ c.title }}</text>

  </a>

  {% endfor %}

</svg>

</div>

{% endif %}

{% endblock %}