{{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="accessKey" class="form-control-static">Access Key</label>
      </div>
      <div class="col-sm-12 col-md-8">
        {{#if isStep1}}
          {{input type="text" id="accessKey" classNames="form-control" placeholder="Your AWS access key" value=amazonec2Config.accessKey}}
        {{else}}
          <div class="form-control-static">{{amazonec2Config.accessKey}}</div>
        {{/if}}
      </div>
    </div>
    <div class="row {{if isStep1 'form-group'}}">
      <div class="col-sm-12 col-md-2 form-label">
        <label for="secretKey" class="form-control-static">Secret Key</label>
      </div>
      <div class="col-sm-12 col-md-8">
        {{#if isStep1}}
          {{input type="password" id="secretKey" classNames="form-control" placeholder="Your AWS secret key" value=amazonec2Config.secretKey}}
        {{else}}
          <div class="form-control-static text-muted text-italic">Provided</div>
        {{/if}}
        {{#if isStep1}}
          <p class="help-block">Paste in your AWS 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 "awsLogin"}} class="btn btn-primary">Next: Authenticate &amp; select a network</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 Availablility Zone and VPC info from EC2...
  </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>Availability Zone &amp; VPC</span>
    </div>
    <div class="row {{if isStep3 'form-group'}}">
      <div class="col-sm-12 col-md-2 form-label">
        <label for="selectedZone" class="form-control-static">Availability Zone</label>
      </div>
      <div class="col-sm-12 col-md-8">
        {{#if isStep3}}
          {{view "select"
            class="form-control"
            id="selectedZone"
            content=zoneChoices
            value=selectedZone
            optionLabelPath="content"
            optionValuePath="content"
          }}
        {{else}}
          <div class="form-control-static">
            {{amazonec2Config.region}}{{amazonec2Config.zone}}
          </div>
        {{/if}}
      </div>
    </div>
    <div class="row {{if isStep3 'form-group'}}">
      <div class="col-sm-12 col-md-2 form-label">
        <label for="subnet" class="form-control-static">VPC/Subnet</label>
      </div>
      <div class="col-sm-12 col-md-8">
        {{#if isStep3}}
          {{#if subnetChoices.length}}
            {{#each subnetChoices as |choice|}}
              {{#if choice.isVpc}}
                <div class="radio"><label class="text-bold">
                  {{radio-button selection=selectedSubnet value=choice.value}} {{choice.label}}
                </label></div>
              {{else}}
                <div class="radio"><label class="text-bold" style="margin-left: 20px;">
                  {{radio-button selection=selectedSubnet value=choice.value}} {{choice.label}}
                </label></div>
              {{/if}}
            {{/each}}
          {{/if}}
        {{else}}
          <div class="form-control-static">
            {{#if amazonec2Config.subnetId}}
              {{amazonec2Config.subnetId}}
            {{else}}
              {{amazonec2Config.vpcId}}
            {{/if}}
          </div>
        {{/if}}
      </div>
    </div>
  </div>
  {{#if isStep3}}
    <div class="footer-actions">
      <button {{action "selectSubnet"}} class="btn btn-primary">Next: Select a Security Group</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> Loading security group info from EC2...
  </div>
</section>

<section class="horizontal-form {{unless isGteStep5 '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 isStep5 '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 isStep5}}
          <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://docs.rancher.com/rancher/rancher-ui/infrastructure/hosts/amazon/#EC2Ports" 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></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;">Machine will automatically create this group if needed, but will <b>not</b> add these rules.</p>
          {{/if}}
        {{else}}
          <div class="form-control-static">
            {{amazonec2Config.securityGroup}}
          </div>
        {{/if}}
      </div>
    </div>
  </div>
  {{#if isStep5}}
    <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 isStep6 '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 isGteStep7 '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="instanceType" class="form-control-static">Instance Type</label>
      </div>
      <div class="col-sm-12 col-md-3">
        {{view "select"
          class="form-control"
          id="instanceType"
          content=instanceTypes
          value=amazonec2Config.instanceType
        }}
      </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">
        <div class="input-group">
          {{input type="text" id="rootSize" classNames="form-control" placeholder="" value=amazonec2Config.rootSize}}
          <span class="input-group-addon">GB</span>
        </div>
      </div>
    </div>

    <div class="over-hr" style="margin: 20px 0;">
      <span>Advanced Options</span>
    </div>

    <div class="row form-group">
      <div class="col-sm-12 col-md-2 form-label">
        <label for="ami" class="form-control-static">AMI</label>
      </div>
      <div class="col-sm-12 col-md-3">
        {{input type="text" id="ami" classNames="form-control" placeholder="An Ubuntu AMI" value=amazonec2Config.ami}}
      </div>
      <div class="col-sm-12 col-md-2 form-label">
        <label for="sshUser" class="form-control-static">SSH User</label>
      </div>
      <div class="col-sm-12 col-md-3">
        {{input type="text" id="sshUser" classNames="form-control" placeholder="e.g. ubuntu" value=amazonec2Config.sshUser}}
      </div>
    </div>
    <div class="row form-group">
      <div class="col-sm-12 col-md-2 form-label">
        <label for="iamInstanceProfile" class="form-control-static">IAM Profile</label>
      </div>
      <div class="col-sm-12 col-md-3">
        {{input type="text" id="iamInstanceProfile" classNames="form-control" placeholder="" value=amazonec2Config.iamInstanceProfile}}
      </div>
      <div class="col-sm-12 col-md-2 form-label">
        <label class="form-control-static">Private IP</label>
      </div>
      <div class="col-sm-12 col-md-3">
        <div class="checkbox form-control-static">
          <label>{{input type="checkbox" checked=amazonec2Config.privateAddressOnly}} Use only private IP address</label>
        </div>
      </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>
