{% extends 'viewflow/views/detail.html' %}
{% load i18n %}

{% block content %}
  {{ block.super }}
  {% if flow_chart %}
  <div class="mdc-layout-grid vf-page__grid">
    <div class="mdc-layout-grid__inner vf-page__grid-inner">
      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
        <div class="mdc-card vf-card">
          <section class="vf-card__header">
            <h2 class="vf-card__title">{% trans "Flow Chart" %}</h2>
          </section>
          <section style="height: 70vh">
            <vf-network dot="{{ flow_chart }}" style="width: 100%; height: 100%; display: block"></vf-network>
          </section>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
{% endblock content %}