{{title 'Intentions'}}
<AppView @class="intention list">
    <BlockSlot @name="notification" as |status type|>
      {{partial 'dc/intentions/notifications'}}
    </BlockSlot>
    <BlockSlot @name="header">
        <h1>
            Intentions <em>{{format-number items.length}} total</em>
        </h1>
        <label for="toolbar-toggle"></label>
    </BlockSlot>
    <BlockSlot @name="actions">
        <a data-test-create href="{{href-to 'dc.intentions.create'}}" class="type-create">Create</a>
    </BlockSlot>
    <BlockSlot @name="toolbar">
{{#if (gt items.length 0) }}
        <IntentionFilter @searchable={{searchable}} @selected={{currentFilter}} @filters={{actionFilters}} @search={{filters.s}} @type={{filters.action}} @onchange={{action "filter"}} />
{{/if}}
    </BlockSlot>
    <BlockSlot @name="content">
        <ChangeableSet @dispatcher={{searchable}}>
          <BlockSlot @name="set" as |filtered|>
            <TabularCollection @route="dc.intentions.edit" @key="SourceName" @items={{filtered}} as |item index|>
                <BlockSlot @name="header">
                    <th>Source</th>
                    <th>&nbsp;</th>
                    <th>Destination</th>
                    <th>Precedence</th>
                </BlockSlot>
                <BlockSlot @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>
                </BlockSlot>
                <BlockSlot @name="actions" as |index change checked|>
                  <PopoverMenu @expanded={{if (eq checked index) true false}} @onchange={{action change index}} @keyboardAccess={{false}}>
                    <BlockSlot @name="trigger">
                      More
                    </BlockSlot>
                    <BlockSlot @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>
                    </BlockSlot>
                  </PopoverMenu>
                </BlockSlot>
            </TabularCollection>
          </BlockSlot>
          <BlockSlot @name="empty">
            <p>
              There are no intentions.
            </p>
          </BlockSlot>
        </ChangeableSet>
    </BlockSlot>
</AppView>