{{#if isAuthorized }}
  {{title 'Policies'}}
{{else}}
  {{title 'Access Controls'}}
{{/if}}
{{#app-view class=(concat 'policy ' (if (not isAuthorized) 'edit' 'list')) loading=isLoading authorized=isAuthorized enabled=isEnabled}}
  {{#block-slot name='notification' as |status type|}}
    {{partial 'dc/acls/policies/notifications'}}
  {{/block-slot}}
  {{#block-slot name='header'}}
    <h1>
      Access Controls
    </h1>
    {{#if isAuthorized }}
      {{partial 'dc/acls/nav'}}
    {{/if}}
  {{/block-slot}}
  {{#block-slot name='disabled'}}
    {{partial 'dc/acls/disabled'}}
  {{/block-slot}}
  {{#block-slot name='authorization'}}
    {{partial 'dc/acls/authorization'}}
  {{/block-slot}}
  {{#block-slot name='actions'}}
      <a data-test-create href="{{href-to 'dc.acls.policies.create'}}" class="type-create">Create</a>
  {{/block-slot}}
  {{#block-slot name='content'}}
{{#if (gt items.length 0) }}
      <form class="filter-bar">
        {{freetext-filter searchable=searchable value=s placeholder="Search"}}
      </form>
{{/if}}
    {{#changeable-set dispatcher=searchable}}
      {{#block-slot name='set' as |filtered|}}
        {{#tabular-collection
            items=(sort-by 'CreateIndex:desc' 'Name:asc' filtered) as |item index|
        }}
          {{#block-slot name='header'}}
            <th>Name</th>
            <th>Datacenters</th>
            <th>Description</th>
          {{/block-slot}}
          {{#block-slot name='row'}}
            <td data-test-policy="{{item.Name}}">
              <a href={{href-to 'dc.acls.policies.edit' item.ID}} class={{if (eq (policy/typeof item) 'policy-management') 'is-management'}}>{{item.Name}}</a>
            </td>
            <td>
              {{join ', ' (policy/datacenters item)}}
            </td>
            <td data-test-description>
              <p>{{item.Description}}</p>
            </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|}}
{{#if (eq (policy/typeof item) 'policy-management')}}
                <li role="none">
                    <a role="menuitem" tabindex="-1" data-test-edit href={{href-to 'dc.acls.policies.edit' item.ID}}>View</a>
                </li>
{{else}}

                <li role="none">
                    <a role="menuitem" tabindex="-1" data-test-edit href={{href-to 'dc.acls.policies.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 policy?
                        </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>
{{/if}}
              {{/block-slot}}
            {{/popover-menu}}
          {{/block-slot}}
        {{/tabular-collection}}
      {{/block-slot}}
      {{#block-slot name='empty'}}
        <p>
          There are no Policies.
        </p>
      {{/block-slot}}
    {{/changeable-set}}
  {{/block-slot}}
{{/app-view}}