{{top-errors errors=errors}}

<section class="horizontal-form">
  <div class="container-fluid">
    <div class="over-hr" style="margin: 20px 0;">
      <span>Account Access</span>
    </div>

    <div class="row {{if isStep1 'form-group'}}">
      <div class="col-sm-12 col-md-2 form-label">
        <label for="apiKey" class="form-control-static">API Key</label>
      </div>
      <div class="col-sm-12 col-md-8">
        {{#if isStep1}}
          {{input type="text" id="apiKey" classNames="form-control" placeholder="Your Exoscale API key" value=exoscaleConfig.apiKey}}
        {{else}}
          <div class="form-control-static">{{exoscaleConfig.apiKey}}</div>
        {{/if}}
      </div>
    </div>
    <div class="row {{if isStep1 'form-group'}}">
      <div class="col-sm-12 col-md-2 form-label">
        <label for="apiSecretKey" class="form-control-static">Secret Key</label>
      </div>
      <div class="col-sm-12 col-md-8">
        {{#if isStep1}}
          {{input type="password" id="apiSecretKey" classNames="form-control" placeholder="Your Exoscale secret key" value=exoscaleConfig.apiSecretKey}}
        {{else}}
          <div class="form-control-static text-muted text-italic">Provided</div>
        {{/if}}
        {{#if isStep1}}
          <p class="help-block">Paste in your Exoscale key pair here.  We'll use this key to create your new Instances.</p>
        {{/if}}
      </div>
    </div>
  </div>
  {{#if isStep1}}
    <div class="footer-actions">
      <button {{action "exoscaleLogin"}} class="btn btn-primary">Next: Authenticate &amp; select a Security Group</button>
      <button {{action "cancel"}} class="btn btn-link">Cancel</button>
    </div>
  {{/if}}
</section>

<section class="horizontal-form {{unless isStep2 'hide'}}" style="padding-top: 0">
  <div class="text-center">
    <i class="icon icon-spinner icon-spin"></i> Loading security group info from Exoscale...
  </div>
</section>

<section class="horizontal-form {{unless isGteStep3 'hide'}}" style="padding-top: 0">
  <div class="container-fluid">
    <div class="over-hr" style="margin: 20px 0;">
      <span>Security Group</span>
    </div>

    <div class="row {{if isStep3 'form-group'}}">
      <div class="col-sm-12 col-md-2 form-label">
        <label for="securityGroup" class="form-control-static">Security Group</label>
      </div>
      <div class="col-sm-12 col-md-8">
        {{#if isStep3}}
          <div class="radio"><label>
            {{radio-button selection=whichSecurityGroup value="default"}} Standard:
            {{#if defaultSecurityGroup}}
              Use the existing <code>{{defaultSecurityGroupName}}</code> group
            {{else}}
              Automatically create a <code>{{defaultSecurityGroupName}}</code> group
            {{/if}}
          </label></div>

          {{#unless isCustomSecurityGroup}}
            <p class="help-block"><a href="http://rancher.docs.rancher.com/docs/infrastructure/hosts/exoscale/#Ports" target="_blank">Learn more</a> about the ports that will be opened.</p>
          {{/unless}}

          <div class="radio"><label>{{radio-button selection=whichSecurityGroup value="custom"}} Custom: Choose an existing group{{#if isCustomSecurityGroup}}:{{/if}}</label></div>
          {{#if isCustomSecurityGroup}}
            {{view "select"
              class="form-control"
              id="subnet"
              content=allSecurityGroups
              value=selectedSecurityGroup
              optionLabelPath="content.name"
              optionValuePath="content.name"
            }}

            <p style="margin: 10px 0 0 0;">For Rancher to work correctly your security group will need to allow traffic:</p>
            <ul>
              <li>From the rancher server to <code>TCP</code> port <code>22</code> <span class="text-muted">(SSH to install and configure Docker)</span> and <code>TCP</code> port <code>2376</code> <span class="text-muted">(access to Docker daemon)</span></li>
              <li>From and To all other hosts on <code>UDP</code> ports <code>500</code> and <code>4500</code> <span class="text-muted">(for IPsec networking)</span></li>
            </ul>
            <p style="margin: 0;">These rules will <b>not</b> be added automatically.</p>
          {{/if}}
        {{else}}
          <div class="form-control-static">
            {{exoscaleConfig.securityGroup}}
          </div>
        {{/if}}
      </div>
    </div>
  </div>
  {{#if isStep3}}
    <div class="footer-actions">
      <button {{action "selectSecurityGroup"}} class="btn btn-primary">Next: Set Instance options</button>
      <button {{action "cancel"}} class="btn btn-link">Cancel</button>
    </div>
  {{/if}}
</section>

<section class="horizontal-form {{unless isStep4 'hide'}}" style="padding-top: 0">
  <div class="text-center">
    <i class="icon icon-spinner icon-spin"></i> {{#if defaultSecurityGroup}}Updating{{else}}Creating{{/if}} Security Group...
  </div>
</section>

<section class="horizontal-form {{unless isStep5 'hide'}}" style="padding-top: 0">
  <div class="text-center">
    <i class="icon icon-spinner icon-spin"></i> Fetching available Instance settings...
  </div>
</section>

<section class="horizontal-form {{unless isGteStep6 'hide'}}" style="padding-top: 0;">
  <div class="container-fluid">
    <div class="over-hr" style="margin: 20px 0;">
      <span>Instance</span>
    </div>

    {{partial "host/add-common"}}

    <div class="row form-group">
      <div class="col-sm-12 col-md-2 form-label">
        <label for="instanceProfile" class="form-control-static">Instance Profile</label>
      </div>
      <div class="col-sm-12 col-md-3">
        {{view "select"
          class="form-control"
          id="instanceProfile"
          content=allInstanceProfiles
          optionValuePath="content.name"
          optionLabelPath="content.displaytext"
          value=exoscaleConfig.instanceProfile
        }}
      </div>
      <div class="col-sm-12 col-md-2 form-label">
        <label for="rootSize" class="form-control-static">Root Size</label>
      </div>
      <div class="col-sm-12 col-md-3">
        {{view "select"
          class="form-control"
          id="diskSize"
          content=allDiskSizes
          value=exoscaleConfig.diskSize
        }}
      </div>
    </div>

    <div class="over-hr" style="margin: 20px 0;">
      <span>Rancher</span>
    </div>
    <div class="row form-group">
      <div class="col-sm-12 col-md-2 form-label">
        <label class="form-control-static">Labels</label>
      </div>
      <div class="col-sm-12 col-md-8">
        {{partial "edit-labels"}}
      </div>
    </div>
  </div>
  {{partial "save-cancel"}}
</section>
