{% extends "base.html" %}
{% load static %}
{% block title %}Run {{ workflow.name }}{% endblock title %}
{% block extra_styles %}
  {{ block.super }}
  <link rel="stylesheet" href="{% static 'nautobot_workflow_engine/css/nwe.css' %}?v33">
  <link rel="stylesheet" href="{% static 'nautobot_workflow_engine/css/launch.css' %}?v33">
{% endblock extra_styles %}
{% block breadcrumbs %}
  <li class="breadcrumb-item"><a href="{% url 'plugins:nautobot_workflow_engine:workflows_list' %}">Workflows</a></li>
  <li class="breadcrumb-item"><span>{{ workflow.name }}</span></li>
  <li class="breadcrumb-item active" aria-current="page"><span>Run</span></li>
{% endblock breadcrumbs %}
{% block page_title %}{% endblock page_title %}
{% block content %}
<div class="nwe-ui nwe-launch">
  <header class="nwe-launch-head">
    <span class="nwe-tile t-nautobot" aria-hidden="true"><i class="mdi mdi-transit-connection-variant"></i></span>
    <div class="nwe-launch-title">
      <h1>{{ workflow.name }}{% if workflow.category %} <span class="nwe-tag">{{ workflow.category }}</span>{% endif %}</h1>
      {% if workflow.description %}<p>{{ workflow.description }}</p>{% endif %}
    </div>
    {% if perms.nautobot_workflow_engine.change_workflow %}
      <a class="btn nwe-btn nwe-launch-edit" href="{% url 'plugins:nautobot_workflow_engine:workflow_builder_edit' key=workflow.key %}"><i class="mdi mdi-pencil-outline"></i> Edit</a>
    {% endif %}
  </header>

  <div class="nwe-launch-grid">
    <form method="post" id="workflow-launch-form" class="nwe-launch-card" novalidate>
      {% csrf_token %}
      <div class="nwe-launch-body">
        {% if non_field_errors %}
          <div class="nwe-launch-alert" role="alert">
            <i class="mdi mdi-alert-circle-outline" aria-hidden="true"></i>
            <div>{% for err in non_field_errors %}<div>{{ err }}</div>{% endfor %}</div>
          </div>
        {% endif %}
        <div id="nwe-launch-fields" class="nwe-fields"></div>
        <noscript><p class="text-danger mb-0">Turn on JavaScript to fill in this form.</p></noscript>
      </div>

      <section class="nwe-launch-section" aria-labelledby="nwe-timing-title">
        <h2 id="nwe-timing-title">When should it run?</h2>
        <p>Run it now, or pick a time.</p>
        <div id="nwe-launch-timing"></div>
      </section>

      <div id="nwe-launch-values" hidden></div>

      <footer class="nwe-launch-foot">
        <span class="note">
          {% if workflow.approval_required %}
            <i class="mdi mdi-account-check-outline" aria-hidden="true"></i> Waits for approval before it starts.
          {% else %}
            <i class="mdi mdi-information-outline" aria-hidden="true"></i> You can follow the run once it starts.
          {% endif %}
        </span>
        <a class="btn nwe-btn" href="{% url 'plugins:nautobot_workflow_engine:workflows_list' %}">Cancel</a>
        <button class="btn nwe-btn-accent nwe-run" type="submit"><i class="mdi mdi-play" aria-hidden="true"></i> Run workflow</button>
      </footer>
    </form>

    <aside class="nwe-launch-side" aria-label="About this workflow">
      <section class="nwe-side-card">
        <div class="nwe-kicker">What happens</div>
        <ol class="nwe-wh">
          {% for row in what_happens %}
            {% if row.kind == "phase" %}
              <li class="phase">{{ row.title }}</li>
            {% else %}
              <li class="step{% if row.kind == 'done' %} done{% endif %}">
                <span class="ic" aria-hidden="true"><i class="mdi mdi-{{ row.icon }}"></i></span>
                <span class="tx"><b>{{ row.title }}</b>{% if row.sub %}<small>{{ row.sub }}</small>{% endif %}</span>
              </li>
            {% endif %}
          {% endfor %}
        </ol>
      </section>
      <section class="nwe-side-card">
        <div class="nwe-kicker">About</div>
        {% if about_rows %}
          <dl class="nwe-about">
            {% for row in about_rows %}
              <div><dt>{{ row.0 }}</dt><dd>{{ row.1 }}</dd></div>
            {% endfor %}
          </dl>
        {% else %}
          <p class="nwe-muted small mb-0">No runs yet.</p>
        {% endif %}
        <a class="nwe-link" href="{% url 'plugins:nautobot_workflow_engine:workflow_run_list' %}?workflow={{ workflow.key|urlencode }}"><i class="mdi mdi-history" aria-hidden="true"></i> Run history</a>
      </section>
    </aside>
  </div>
  <div id="nwe-launch-toast" class="nwe-toast-host" aria-live="polite"></div>
</div>
{{ launch_config|json_script:"nwe-launch-config" }}
{% endblock content %}
{% block javascript %}
  {{ block.super }}
  <script type="module" src="{% static 'nautobot_workflow_engine/js/launch/launch.js' %}?v33"></script>
{% endblock javascript %}