<div class="row form-group">
  <div class="col-sm-12 col-md-2 form-label">
    <label for="networkMode" class="form-control-static">Network</label>
  </div>

  <div class="col-sm-12 {{if isContainerNetwork 'col-md-3' 'col-md-8'}}">
    {{view "select"
      class="form-control"
      id="networkMode"
      content=networkChoices
      optionLabelPath="content.label"
      optionValuePath="content.value"
      value=instance.networkMode
    }}
  </div>

  {{#if isContainerNetwork}}
    <div class="col-sm-12 col-md-2 form-label">
      <label for="networkContainerId" class="form-control-static">Container</label>
    </div>
    <div class="col-sm-12 col-md-3">
      {{view "select"
        class="form-control"
        id="networkContainerId"
        content=containersOnRequestedHost
        optionLabelPath="content.name"
        optionValuePath="content.id"
        optionGroupPath="group"
        value=instance.networkContainerId
      }}
    </div>
  {{/if}}
</div>

{{#unless isService}}
  {{partial "container/edit-links"}}
{{/unless}}

<div class="row form-group">
  <div class="col-sm-12 col-md-2 form-label">
    <label for="hostname" class="form-control-static">Host Name</label>
  </div>

  <div class="col-sm-12 col-md-8">
    {{input id="hostname" type="text" value=instance.hostname classNames="form-control" placeholder="e.g. web01"}}
  </div>
</div>

<div class="row form-group">
  <div class="col-sm-12 col-md-2 form-label">
    <label for="domainName" class="form-control-static">Domain Name</label>
  </div>

  <div class="col-sm-12 col-md-8">
    {{input id="domainName" type="text" value=instance.domainName classNames="form-control" placeholder="e.g. example.com"}}
  </div>
</div>

<div class="row form-group">
  <div class="col-sm-12 col-md-2 form-label">
    <label class="form-control-static">Resolving Servers</label>
  </div>

  <div class="col-sm-12 col-md-8">
    <div class="form-control-static">
      <button class="btn-circle-plus" {{action "addDns" target="view"}}></button>
    </div>
    {{#if dnsArray.length}}
      <table class="table fixed no-lines no-top-padding tight">
        {{#each dnsArray as |dns|}}
          <tr>
            <td>
              {{input type="text" value=dns.value classNames="form-control dns-value input-sm" placeholder="e.g. 8.8.4.4"}}
            </td>
            <td width="30" class="text-right">
              <button {{action "removeDns" dns}} class="btn-circle-x" type="button" tabindex="-1"></button>
            </td>
          </tr>
        {{/each}}
      </table>
    {{/if}}
  </div>
</div>

<div class="row form-group">
  <div class="col-sm-12 col-md-2 form-label">
    <label class="form-control-static">Search Domains</label>
  </div>

  <div class="col-sm-12 col-md-8">
    <div class="form-control-static">
      <button class=" btn-circle-plus" {{action "addDnsSearch" target="view"}}></button>
    </div>
    {{#if dnsSearchArray.length}}
      <table class="table fixed no-lines no-top-padding tight">
        {{#each dnsSearchArray as |dnsSearch|}}
          <tr>
            <td>
              {{input type="text" value=dnsSearch.value classNames="form-control dns-search-value input-sm" placeholder="e.g. prod.example.com"}}
            </td>
            <td width="30" class="text-right">
              <button {{action "removeDnsSearch" dnsSearch}} class="btn-circle-x" type="button" tabindex="-1"></button>
            </td>
          </tr>
        {{/each}}
      </table>
    {{/if}}
  </div>
</div>
