{% extends request.resolver_match.app.base_template_name|default:'viewflow/workflow/base_page.html' %}
{% load i18n viewflow workflow  %}

{% block content %}
  <div class="mdc-layout-grid vf-page__grid">
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-9-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">
            <h1 class="vf-card__title">
              {{ process.brief }}
            </h1>
            <h2 class="vf-card__breadcrumbs">
              <a href="{% reverse viewset 'index' %}">{{ view.flow_class.process_title }}</a>
              <a href="{% reverse viewset 'process_detail' process.pk %}">#{{ process.pk }}</a>
              <a>{% trans "Cancel" %}</a>
            </h2>
          </section>

          <style>
            .vf-grid {
              display: flex;
              flex-direction: column;
            }

            .vf-grid--row {
              display: flex;
              flex-direction: row;
              margin-left: 8px;
              margin-right: 8px;
            }

            .vf-grid--column {
              flex: 1;
              margin: 8px;
            }
          </style>

          <div class="mdc-layout-grid" style="margin:0">
            <div class="mdc-layout-grid__inner">
              <div class="mdc-layout-grid__cell">
                <h4 class="mdc-typography mdc-typography--subtitle1" style="margin-top:-8px;margin-bottom:8px">{{ view.active_activations|length }} tasks active</h4>
              </div>
            </div>

            <div class="mdc-layout-grid__inner">
              {% for activation in view.active_activations %}
                <div class="mdc-layout-grid__cell">
                  <div style="display:flex;background-color:#f8f8f8;">
                    <div>
                      <span class="material-icons" style="font-size:64px;padding:8px">
                        {% if activation.task.flow_task.task_type == 'HUMAN' %}
                          person
                        {% elif activation.task.flow_task.task_type == 'JOB' %}
                          precision_manufacturing
                        {% elif activation.task.flow_task.task_type == 'FUNCTION' %}
                          touch_app
                        {% elif activation.task.flow_task.task_type == 'SUBPROCES' %}
                          folder_zip
                        {% elif activation.task.flow_task.task_type == 'JOIN' %}
                          merge_type
                        {% else %}
                          newspaper
                        {% endif %}
                      </span>
                    </div>
                    <div style="padding:20px">
                      <a href="{% reverse activation.task.flow_task 'index' process.pk activation.task.pk %}"
                         class="mdc-typography--subtitle2" style="overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">
                        {{ activation.task.flow_task }}
                      </a>
                      {% if activation.task.flow_task.task_type == 'HUMAN' %}
                        <div>{{ activation.task.owner|default:"No owner assigned" }}</div>
                      {% endif %}
                    </div>
                  </div>
                </div>
              {% endfor %}
            </div>
          </div>

          <div class="mdc-card__actions vf-card__actions">
            <form method="POST" {% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>{% csrf_token %}
              <button type="submit" name="_cancel_process" value="1" class="mdc-button mdc-button--raised mdc-card__action mdc-card__action--button">
                <div class="mdc-button__ripple"></div>
                <span class="mdc-button__label">{% trans "Cancel" %}</span> <!- todo perms -->
              </button>
            </form>
          </div>
        </div>
      </div>
      {% block panel-cell %}
        <div class="mdc-layout-grid__cell {% block panel-cell-span %}mdc-layout-grid__cell--span-3-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone{% endblock %}">
          {% include_process_data process %}
        </div>
      {% endblock panel-cell %}
    </div>
  </div>
{% endblock %}
