{{#liquid-if loading}}
  <div class="text-center">
    <p>
      <i class="icon icon-spinner icon-spin"></i> Loading...
    </p>
  </div>
{{else}}
  <section class="horizontal-form container-fluid">
    <h2>Edit Service Alias</h2>
    {{top-errors errors=errors}}

    {{partial "container/edit-name"}}

    {{partial "form-divider"}}

    <div class="row">
      <div class="col-xs-6 col-md-2 form-label">
        <label>Targets</label>
      </div>
      <div class="col-xs-6 col-md-8">
        <button class="btn-circle-plus btn-circle-text" style="margin-right: 20px;" {{action "addServiceLink"}}>Add Service</button>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 col-md-8 col-md-offset-2">
        {{#if serviceLinksArray.length}}
          <table class="table fixed no-lines no-top-padding tight">
            {{#each serviceLinksArray as |link|}}
              <tr>
                <td>
                    {{display-name-select
                      classNames="form-control input-sm lb-target"
                      prompt="Select a service..."
                      value=link.serviceId
                      content=serviceChoices
                      optionValuePath="content.id"
                      optionLabelPath="content.name"
                      optionGroupPath="group"
                    }}
                </td>
                <td width="30" class="text-right">
                  <button {{action "removeServiceLink" link}} class="btn-circle-x" type="button" tabindex="-1"></button>
                </td>
              </tr>
            {{/each}}
          </table>
        {{/if}}
      </div>
    </div>
  </section>

  {{partial "save-cancel"}}
{{/liquid-if}}
