{% extends 'base/one.column.html.twig' %}

{% set title = 'Snip ' ~ snip %}

{% block body %}
    <a href="{{ path('snip_single', {snip: snip.id}) }}" class="btn btn-primary">
        <i class="fa fa-arrow-left"></i> Back
    </a>
    <a href="{{ path('version_set', {version: snip.latestVersion.id, snip: snip.id}) }}" class="btn btn-warning">
        <i class="fa fa-refresh"></i> Latest
    </a>
    <a href="{{ path('content_compare', {to: snip.activeVersion.id}) }}" class="btn btn-info">
        <i class="fa fa-left-right"></i> Compare
    </a>
    <pre class="mermaid">
        flowchart BT
        {% for versionData in versions %}
            {{~ versionData ~}}
        {% endfor %}
    </pre>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/npm/mermaid@11.6.0/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({startOnLoad: true});
    </script>
{% endblock %}

{% block css %}
    {{ parent() }}
    <style>
        .node rect {
            fill: var(--bs-secondary) !important;
            stroke: var(--bs-secondary-text-emphasis) !important;
        }
        .node span {
            color: var(--bs-light) !important;
        }
        .active rect {
            fill: var(--bs-success) !important;
            stroke: var(--bs-success-text-emphasis) !important;
        }
    </style>
{% endblock %}