<form>
  <RoleForm @form={{form}} @item={{item}} @dc={{dc}} @nspace={{nspace}} />
{{#if (and (not create) (gt items.length 0))}}
  <h2>Where is this role used?</h2>
  <p>
    We're only able to show information for the primary datacenter and the current datacenter. This list may not show every case where this role is applied.
  </p>
  <TokenList @caption="Tokens" @items={{items}} />
{{/if}}
    <div>
{{#if (and create (can "create roles")) }}
        {{! we only need to check for an empty name here as ember munges autofocus, once we have autofocus back revisit this}}
        <button type="submit" {{ action "create" item}} disabled={{if (or item.isPristine item.isInvalid (eq item.Name '')) 'disabled'}}>Save</button>
{{ else }}
  {{#if (can "write role" item=item)}}
        <button type="submit" {{ action "update" item}} disabled={{if item.isInvalid 'disabled'}}>Save</button>
  {{/if}}
{{/if}}
        <button type="reset" {{ action "cancel" item}}>Cancel</button>
{{# if (and (not create) (can "delete role" item=item) ) }}
        <ConfirmationDialog @message="Are you sure you want to delete this Role?">
            <BlockSlot @name="action" as |confirm|>
                <button type="button" data-test-delete class="type-delete" {{action confirm 'delete' item}}>Delete</button>
            </BlockSlot>
            <BlockSlot @name="dialog" as |execute cancel message|>
    {{#if (gt items.length 0)}}
              <ModalDialog
                @onclose={{action cancel}}
                @aria={{hash
                  label="Role in Use"
                }}
              >
                  <BlockSlot @name="header">
                      <h2>Role in Use</h2>
                  </BlockSlot>
                  <BlockSlot @name="body">
                    <p>
                      This Role is currently in use. If you choose to delete this Role, it will be removed from the following <strong>{{items.length}} Tokens</strong>:
                    </p>
                    <TokenList @items={{items}} @target="_blank" />
                    <p>
                      This action cannot be undone. {{message}}
                    </p>
                  </BlockSlot>
                  <BlockSlot @name="actions" as |close|>
                    <button type="button" class="type-delete" {{action execute}}>Yes, Delete</button>
                    <button type="button" class="type-cancel" {{action close}}>Cancel</button>
                  </BlockSlot>
                </ModalDialog>
    {{else}}
                <DeleteConfirmation @message={{message}} @execute={{execute}} @cancel={{cancel}} />
    {{/if}}
            </BlockSlot>
        </ConfirmationDialog>
{{/if}}
    </div>
</form>
