<div
  ...attributes
  class="consul-intention-fieldsets"
>
  <fieldset disabled={{disabled}}>
    <div role="group">
      <fieldset>
        <h2>Source</h2>
        <label data-test-source-element class="type-select{{if item.error.SourceName ' has-error'}}">
          <span>Source Service</span>
          <PowerSelectWithCreate
              @disabled={{not create}}
              @options={{services}}
              @searchField="Name"
              @selected={{SourceName}}
              @searchPlaceholder="Type service name"
              @buildSuggestion={{action "createNewLabel" "Use a Consul Service called '{{term}}'"}}
              @showCreateWhen={{action "isUnique" services}}
              @onCreate={{action onchange "SourceName"}}
              @onChange={{action onchange "SourceName"}} as |service|>
                  {{#if (eq service.Name '*') }}
                    * (All Services)
                  {{else}}
                    {{service.Name}}
                  {{/if}}
          </PowerSelectWithCreate>
        {{#if create}}
          <em>Search for an existing service, or enter any Service name.</em>
        {{/if}}
        </label>
  {{#if (env 'CONSUL_NSPACES_ENABLED')}}
        <label data-test-source-nspace class="type-select{{if item.error.SourceNS ' has-error'}}">
          <span>Source Namespace</span>
          <PowerSelectWithCreate
              @disabled={{not create}}
              @options={{nspaces}}
              @selected={{SourceNS}}
              @searchPlaceholder="Type namespace name"
              @buildSuggestion={{action "createNewLabel" "Use a Consul Namespace called '{{term}}'"}}
              @showCreateWhen={{action "isUnique" nspaces}}
              @onCreate={{action onchange "SourceNS"}}
              @onChange={{action onchange "SourceNS"}} as |nspace|>
                {{#if (eq nspace.Name '*') }}
                  * (All Namespaces)
                {{else}}
                  {{nspace.Name}}
                {{/if}}
          </PowerSelectWithCreate>
        {{#if create}}
          <em>Search for an existing namespace, or enter any Namespace name.</em>
        {{/if}}
        </label>
{{/if}}
      </fieldset>
      <fieldset>
        <h2>Destination</h2>
        <label data-test-destination-element class="type-select{{if item.error.DestinationName ' has-error'}}">
          <span>Destination Service</span>
          <PowerSelectWithCreate
              @disabled={{not create}}
              @options={{services}}
              @searchField="Name"
              @selected={{DestinationName}}
              @searchPlaceholder="Type service name"
              @buildSuggestion={{action "createNewLabel" "Use a Consul Service called '{{term}}'"}}
              @showCreateWhen={{action "isUnique" services}}
              @onCreate={{action onchange "DestinationName"}}
              @onChange={{action onchange "DestinationName"}} as |service|>
                  {{#if (eq service.Name '*') }}
                    * (All Services)
                  {{else}}
                    {{service.Name}}
                  {{/if}}
          </PowerSelectWithCreate>
        {{#if create}}
          <em>Search for an existing service, or enter any Service name.</em>
        {{/if}}
        </label>
  {{#if (env 'CONSUL_NSPACES_ENABLED')}}
        <label data-test-destination-nspace class="type-select{{if item.error.DestinationNS ' has-error'}}">
          <span>Destination Namespace</span>
          <PowerSelectWithCreate
              @disabled={{not create}}
              @options={{nspaces}}
              @searchField="Name"
              @selected={{DestinationNS}}
              @searchPlaceholder="Type namespace name"
              @buildSuggestion={{action "createNewLabel" "Use a future Consul Namespace called '{{term}}'"}}
              @showCreateWhen={{action "isUnique" nspaces}}
              @onCreate={{action onchange "DestinationNS"}}
              @onChange={{action onchange "DestinationNS"}} as |nspace|>
                  {{#if (eq nspace.Name '*') }}
                    * (All Namespaces)
                  {{else}}
                    {{nspace.Name}}
                  {{/if}}
          </PowerSelectWithCreate>
        {{#if create}}
          <em>For the destination, you may choose any namespace for which you have access.</em>
        {{/if}}
        </label>
{{/if}}
      </fieldset>
    </div>
  <fieldset>
    <label class="type-text{{if item.error.Description ' has-error'}}">
      <span>Description (Optional)</span>
      <input type="text" name="Description" value={{item.Description}} placeholder="Description (Optional)" onchange={{action onchange}} />
    </label>
  </fieldset>
    <div>
      <span class="label">Should this source connect to the destination?</span>
      <div role="radiogroup" class={{if item.error.Action ' has-error'}}>
        {{#each
          (array
            (hash
              intent="allow"
              header="Allow"
              body="The source service will be allowed to connect to the destination."
            )
            (hash
              intent="deny"
              header="Deny"
              body="The source service will not be allowed to connect to the destination."
            )
            (hash
              intent=""
              header="Application Aware"
              body="The source service may or may not connect to the destination service via unique permissions based on Layer 7 criteria: path, header, or method."
            )
          )
      as |_action|}}
          <RadioCard
            class={{concat 'value-' _action.intent}}
            @value={{_action.intent}}
            @checked={{if (eq (or item.Action '') _action.intent) 'checked'}}
            @onchange={{action onchange}}
            @name="Action"
          as |radio|>
            <header>
              {{_action.header}}
            </header>
            <p>
              {{_action.body}}
            </p>
          </RadioCard>
        {{/each}}
      </div>
    </div>
  </fieldset>
{{#if (eq (or item.Action '') '')}}
  <fieldset class="permissions">
    <button
      data-test-create-permission
      type="button"
      {{on "click" (optional this.modal.open)}}
    >
      Add permission
    </button>
    <h2>Permissions</h2>
{{#if (gt item.Permissions.length 0) }}
    <Consul::Intention::Notice::Permissions />
    <Consul::Intention::Permission::List
      @items={{item.Permissions}}
      @onclick={{queue (action (mut permission)) (action (optional this.modal.open))}}
      @ondelete={{action 'delete' 'Permissions' item}}
    />
{{else}}
    <EmptyState>
      <BlockSlot @name="header">
        <h3>
          No permissions yet
        </h3>
      </BlockSlot>
      <BlockSlot @name="body">
        <p>
          Permissions intercept an Intention's traffic using Layer 7 criteria, such as path prefixes and http headers.
        </p>
      </BlockSlot>
      <BlockSlot @name="actions">
        <li class="docs-link">
          <a href="{{env 'CONSUL_DOCS_URL'}}/commands/intention" rel="noopener noreferrer" target="_blank">Documentation</a>
        </li>
        <li class="learn-link">
          <a href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/getting-started/connect" rel="noopener noreferrer" target="_blank">Read the guide</a>
        </li>
      </BlockSlot>
    </EmptyState>
{{/if}}
  </fieldset>
{{/if}}

  <ModalDialog
    class="consul-intention-permission-modal"
    @onclose={{action (mut permission) undefined}}
    @aria={{hash
      label="Edit Permission"
    }}
  as |modal|>
    <Ref @target={{this}} @name="modal" @value={{modal}} />
    <BlockSlot @name="header">
      <h3>Edit Permission</h3>
    </BlockSlot>
    <BlockSlot @name="body">
      <Consul::Intention::Permission::Form
        @item={{permission}}
        @onsubmit={{action 'add' 'Permissions' item}}
      as |permissionForm|>
        <Ref @target={{this}} @name="permissionForm" @value={{permissionForm}} />
      </Consul::Intention::Permission::Form>
    </BlockSlot>
    <BlockSlot @name="actions">
      <button
        type="button"
        data-test-intention-permission-submit
        class="type-submit"
        disabled={{if (not this.permissionForm.isDirty) 'disabled'}}
        onclick={{queue (action this.permissionForm.submit) (action modal.close)}}
      >
        Save
      </button>
      <button
        type="button"
        class="type-cancel"
        onclick={{queue (action this.permissionForm.reset) (action modal.close)}}
      >
        Cancel
      </button>
    </BlockSlot>
  </ModalDialog>

</div>