{% load viewflow %}
<div class="mdc-card vf-card">


    <section class="vf-card__header">
        <h1 class="vf-card__title">{{ process }}</h1>
    </section>
    <section class="vf-card__body">
        <table class="vf-list__table">
            <tbody>
            <tr>
                <td colspan="2">
                    <vf-modal-trigger class="vf-modal-trigger--closed">
                        <span class="vf-modal-trigger__helper"></span>
                        <div class="vf-modal-trigger__content">
                            <div class="vf-modal-trigger__button">&times;</div>
                            <vf-img>
                                <img class="responsive-img"
                                     src="{% reverse process.flow_class 'process_chart' process.pk %}" alt="flow graph"
                                     style="height:100%;max-width:100%"/>
                            </vf-img>
                        </div>
                    </vf-modal-trigger>
                </td>
            </tr>
            {% for field, field_name, value in process_data %}
                {% if field.name != 'data' and field.name != 'flow_class' and field.name != 'artifact_object_id' and field.name != 'artifact_content_type' %}
                    <tr>
                        <th class="vf-list__table-header vf-list__table-header-text">{{ field_name }}</th>
                        <td>{{ value }}</td>
                    </tr>
                {% endif %}
            {% endfor %}
            </tbody>
        </table>
    </section>
</div>


{% for pk, root, fields, root_url in ext_data %}
    <br>
    <div class="mdc-card vf-card">
        <section class="vf-card__header">
            <h1 class="vf-card__title">{{ root }} {{ pk }}</h1>
            {% if root_url %}
                <a href="{{ root_url }}" class="card-edit" target="_blank" data-turbolinks="false"
                   style="float:right">Изменить</a>
            {% endif %}
        </section>
        <section class="vf-card__body">
            <table class="vf-list__table">
                <tbody>
                {% for name, value in fields %}
                        <tr>
                            <th class="vf-list__table-header vf-list__table-header-text">{{ name }}</th>
                            <td>
                                {% if value is True %}Да{% else %}
                                 {% if value is False %}Нет{% else %}
                                {% if value and value.url %}<a href="{{ value.url }}" target="_blank">{{ value.name }}</a>{% else %}
                                {{ value }}{% endif %}{% endif %}{% endif %}

                            </td>
                        </tr>
                {% endfor %}
                </tbody>
            </table>
        </section>
    </div>
{% endfor %}