ui/lib/nodes/addon/components/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=(action "authPacket")
        cancel=(action "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 class="acc-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
        rowClass="row mb-10"
      }}

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

      {{form-node-taints
        model=model
        expand=(action expandFn)
      }}

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

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