{% load dash_tags %}
<ul class="list-unstyled mt-2">
  {% for state in result.states %}
    <li data-state-status="{{ state.status }}"
        class="collapse">
      <small><code class="float-right text-muted">{{ state.duration|pretty_time }}</code></small>
      <h5 class="font-weight-regular">
        <code>
        <a href="#state-{{ result.pk }}-{{ state.order }}"
           data-toggle="collapse"
           class="text-lg-left {% if state.status == 'unchanged' %}text-muted collapsed{% endif %}{% if state.status == 'changed' %} text-success{% endif %}{% if state.status == 'requisite-failed' %} text-warning collapsed{% endif %}{% if state.status == 'failed' %} text-danger{% endif %}">
          {{ state.module }}.{{ state.function }} {{ state.id }}
        </a>
      </code>
      </h5>
      <div id="state-{{ result.pk }}-{{ state.order }}"
           class="collapse">
        <div class="row mb-2">
          <div class="col col-md-5">
            <dl>
              <dt>comment</dt>
              <dd><code class="text-muted">{{ state.comment }}</code></dd>
              <dt>name</dt>
              <dd><code class="text-muted">{{ state.name }}</code></dd>
              <dt>sls</dt>
              <dd><code class="text-muted">{{ state.sls }}</code></dd>

            </dl>
          </div>
          {% if state.changes %}
            <div class="col col-md-7">
              <dl>
                <dt>changes</dt>
                <dd>
                  <pre><code>{{ state.changes|pretty_json }}</code></pre>
                </dd>
              </dl>
            </div>
          {% endif %}
        </div>
      </div>
    </li>
  {% endfor %}
</ul>
