ui/lib/shared/addon/components/node-driver/driver-packet/template.hbs

<section class="horizontal-form">
  {{#accordion-list showExpandAll=false as | al expandFn |}}
    {{#if (eq step 1)}}
      <div class="box mt-20">
        <h4>{{t 'nodeDriver.packet.accountSection'}}</h4>

        <div class="row inline-form">
          <div class="col span-6">
            <label class="acc-label">{{t 'nodeDriver.packet.projectId.label'}}{{field-required}}</label>
            {{#input-or-display editable=(not dataFetched) value=config.projectId}}
              {{input type="text" name="username" value=config.projectId classNames="form-control" placeholder=(t 'nodeDriver.packet.projectId.placeholder')}}
            {{/input-or-display}}
          </div>
          <div class="col span-6">
            <label class="acc-label">{{t 'nodeDriver.packet.apiKey.label'}}{{field-required}}</label>
            {{#input-or-display editable=(not dataFetched) value=config.apiKey obfuscate=true}}
              {{input type="password" name="password" value=config.apiKey classNames="form-control" placeholder=(t 'nodeDriver.packet.apiKey.placeholder')}}
            {{/input-or-display}}
            <p class="text-info">{{t 'nodeDriver.packet.apiKeyHelp' htmlSafe=true}}</p>
          </div>
        </div>
      </div>

      {{save-cancel
        createLabel='nodeDriver.packet.loginAction'
        savingLabel='nodeDriver.packet.authentication'
        save='authPacket'
        cancel='cancel'
      }}
    {{else}}
      <div class="over-hr mb-20"><span>{{driverOptionsTitle}}</span></div>

      <div class="box mt-20">
        <h4>{{t 'nodeDriver.packet.location'}}</h4>
        <div class="row inline-form mt-20">
          <div class="col span-2 col-inline">
            <label>{{t 'nodeDriver.packet.region.label'}}</label>
          </div>
          <div class="col span-10">
            <select class="form-control" onchange={{action (mut config.facility) value="target.value"}}>
              {{#each facilityChoices as |choice|}}
                <option value={{choice.code}} selected={{eq config.facilityCode choice.code}}>{{choice.name}}</option>
              {{/each}}
            </select>
          </div>
        </div>
      </div>

      <div class="box mt-20">
        <h4>{{t 'nodeDriver.packet.instanceOptionsSection'}}</h4>

        <div class="row inline-form">
          <div class="col span-6">
            <label class="acc-label">{{t 'nodeDriver.packet.image.label'}}</label>
            <select class="form-control" onchange={{action (mut config.os) value="target.value"}}>
              {{#each osChoices as |choice|}}
                <option value={{choice.slug}} selected={{eq config.os choice.slug}}>{{choice.name}}</option>
              {{/each}}
            </select>
          </div>

          <div class="col span-6">
            <label class="acc-label">{{t 'nodeDriver.packet.size.label'}}</label>
            <select class="form-control" onchange={{action (mut config.plan) value="target.value"}}>
              {{#each planChoices as |choice|}}
                <option value={{choice.slug}} selected={{eq config.plan choice.slug}}>{{choice.name}} (${{choice.pricing.hour}}/hr)</option>
              {{/each}}
            </select>
          </div>
        </div>
        <div class="row mt-20">
          <h4>{{t 'nodeDriver.packet.planDetails.label'}}</h4>
          <div class="col span-6">
            <label class="acc-label">{{t 'nodeDriver.packet.planDetails.cpu'}}</label>
            {{#each planChoiceDetails.specs.cpus as |plan|}}
              <div>
                {{plan.count}} {{plan.type}}
              </div>
            {{/each}}
          </div>
          <div class="col span-6">
            <label class="acc-label">{{t 'nodeDriver.packet.planDetails.memory'}}</label>
            <div>
              {{planChoiceDetails.specs.memory.total}}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col span-6">
            <label class="acc-label">{{t 'nodeDriver.packet.planDetails.drives'}}</label>
            {{#each planChoiceDetails.specs.drives as |plan|}}
              <div>
                {{plan.count}} {{plan.size}} {{plan.type}}
              </div>
            {{/each}}
          </div>
          <div class="col span-6">
            <label class="acc-label">{{t 'nodeDriver.packet.planDetails.network'}}</label>
            {{#each planChoiceDetails.specs.nics as |plan|}}
              <div>
                {{plan.count}} {{plan.type}}
              </div>
            {{/each}}
          </div>
        </div>
      </div>

      <div class="over-hr"><span>{{templateOptionsTitle}}</span></div>

      {{form-name-description
        model=model
        nameRequired=true
      }}

      {{form-user-labels
        initialLabels=labelResource.labels
        setLabels=(action 'setLabels')
        expandAll=expandAll
        expand=(action expandFn)
      }}

      {{form-engine-opts
        machine=model
        showEngineUrl=showEngineUrl
      }}

      {{top-errors errors=errors}}
      {{save-cancel save="save" cancel="cancel"}}
    {{/if}}
  {{/accordion-list}}
</section>