{{#app-view class="intention list"}}
    {{#block-slot name='notification' as |status type|}}
      {{partial 'dc/intentions/notifications'}}
    {{/block-slot}}
    {{#block-slot name='header'}}
        <h1>
            Intentions <em>{{format-number items.length}} total</em>
        </h1>
        <label for="toolbar-toggle"></label>
    {{/block-slot}}
    {{#block-slot name='actions'}}
        <a data-test-create href="{{href-to 'dc.intentions.create'}}" class="type-create">Create</a>
    {{/block-slot}}
    {{#block-slot name='toolbar'}}
{{#if (gt items.length 0) }}
        {{intention-filter searchable=searchable filters=actionFilters search=filters.s type=filters.action onchange=(action 'filter')}}
{{/if}}
    {{/block-slot}}
    {{#block-slot name='content'}}
        {{#changeable-set dispatcher=searchable}}
          {{#block-slot name='set' as |filtered|}}
            {{#tabular-collection
                route='dc.intentions.edit'
                key='SourceName'
                items=filtered as |item index|
            }}
                {{#block-slot name='header'}}
                    <th>Source</th>
                    <th>&nbsp;</th>
                    <th>Destination</th>
                    <th>Precedence</th>
                {{/block-slot}}
                {{#block-slot name='row'}}
                    <td class="source" data-test-intention="{{item.ID}}">
                      <a href={{href-to 'dc.intentions.edit' item.ID}} data-test-intention-source="{{item.SourceName}}">
                        {{#if (eq item.SourceName '*') }}
                          All Services (*)
                        {{else}}
                          {{item.SourceName}}
                        {{/if}}
                        {{! TODO: slugify }}
                        <em class={{concat 'nspace-' (or item.SourceNS 'default')}}>{{or item.SourceNS 'default'}}</em>
                      </a>
                    </td>
                    <td class="intent-{{item.Action}}" data-test-intention-action="{{item.Action}}">
                        <strong>{{item.Action}}</strong>
                    </td>
                    <td class="destination" data-test-intention-destination="{{item.DestinationName}}">
                      <span>
                        {{#if (eq item.DestinationName '*') }}
                          All Services (*)
                        {{else}}
                          {{item.DestinationName}}
                        {{/if}}
                        {{! TODO: slugify }}
                        <em class={{concat 'nspace-' (or item.DestinationNS 'default')}}>{{or item.DestinationNS 'default'}}</em>
                      </span>
                    </td>
                    <td class="precedence">
                        {{item.Precedence}}
                    </td>
                {{/block-slot}}
                {{#block-slot name='actions' as |index change checked|}}
                  {{#popover-menu expanded=(if (eq checked index) true false) onchange=(action change index) keyboardAccess=false}}
                    {{#block-slot name='trigger'}}
                      More
                    {{/block-slot}}
                    {{#block-slot name='menu' as |confirm send keypressClick|}}
                        <li role="none">
                          <a role="menuitem" tabindex="-1" href={{href-to 'dc.intentions.edit' item.ID}}>Edit</a>
                        </li>
                        <li role="none" class="dangerous">
                          <label for={{confirm}} role="menuitem" tabindex="-1" onkeypress={{keypressClick}} data-test-delete>Delete</label>
                          <div role="menu">
                            <div class="confirmation-alert warning">
                              <div>
                                <header>
                                  Confirm Delete
                                </header>
                                <p>
                                  Are you sure you want to delete this intention?
                                </p>
                              </div>
                              <ul>
                                <li class="dangerous">
                                  <button tabindex="-1" type="button" class="type-delete" onclick={{action send 'delete' item}}>Delete</button>
                                </li>
                                <li>
                                  <label for={{confirm}}>Cancel</label>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </li>
                    {{/block-slot}}
                  {{/popover-menu}}
                {{/block-slot}}
            {{/tabular-collection}}
          {{/block-slot}}
          {{#block-slot name='empty'}}
            <p>
              There are no intentions.
            </p>
          {{/block-slot}}
        {{/changeable-set}}
    {{/block-slot}}
{{/app-view}}