<div class="modal-header">
    <button class="close" data-dismiss="modal"
        aria-hidden="true">&times;</button>
    {{^editing}}
    <h4 class="modal-title" translate="yes">Add new host</h4>
    {{/editing}}
    {{#editing}}
    <h4 class="modal-title" translate="yes">Edit host</h4>
    {{/editing}}
</div>

<div class="modal-body">
    <form class="ct-form pf-c-form">
      <label translate="yes" class="control-label" for="add-machine-address">Host</label>
      <div class="dialog-wrapper error-keep">
        <input class="form-control" id="add-machine-address"
               aria-describedby="add-machine-address-helper"
               type="text" value="{{ host_address }}" {{connection_change_disabled}}
               list="options"
               placeholder="{{ placeholder }}"/>
        <datalist id="options">
          {{#options}}
          <option value="{{.}}">
            {{/options}}
        </datalist>
        <div class="pf-c-form__helper-text" id="add-machine-address-helper" translate="yes">Can be a hostname, IP address, alias name, or ssh:// URI</div>
      </div>

      <label translate="yes" class="control-label" for="add-machine-user">User name</label>
      <div>
        <input class="form-control" id="add-machine-user" type="text"
               aria-describedby="add-machine-user-helper"
               value="{{ host_user }}" {{connection_change_disabled}} />
        <div class="pf-c-form__helper-text" id="add-machine-user-helper" translate="yes">When empty, connect with the current user</div>
      </div>

      <label translate="yes" class="control-label">Color</label>
      <div id="add-machine-color-picker"/>
    </form>
</div>

<div class="modal-footer">
    {{#nearlimit}}
    <div class="alert alert-warning dashboard-machine-warning">
      <span class="pficon pficon-warning-triangle-o"></span>
      <span translate="yes">Connecting simultaneously to more than {{ limit }} machines is unsupported.</span>
    </div>
    {{/nearlimit}}
    {{^editing}}
    <button class="pf-c-button pf-m-primary" translate="yes">Add</button>
    {{/editing}}
    {{#editing}}
    <button class="pf-c-button pf-m-primary" translate="yes">Set</button>
    {{/editing}}
    <button class="pf-c-button pf-m-link" data-dismiss="modal" translate="yes">Cancel</button>
</div>
