<view class="page-container {{appearanceClass}}">
  <block wx:if="{{needsSelection}}">
    <view class="list-state list-state--centered">
      <view class="list-state__icon icon icon--lg icon--key"></view>
      <view class="list-state__title">{{text.loadFailed}}</view>
    </view>
  </block>

  <block wx:elif="{{status === 'loading'}}">
    <view class="list-state skeleton-list">
      <view wx:for="{{skeletonRows}}" wx:key="key" class="skeleton-row">
        <view class="skeleton-row__icon"></view>
        <view class="skeleton-row__body">
          <view class="skeleton-row__title" style="width: {{item.titleWidthPct}}%"></view>
          <view class="skeleton-row__preview" style="width: {{item.previewWidthPct}}%"></view>
        </view>
      </view>
    </view>
  </block>

  <block wx:elif="{{status === 'error'}}">
    <view class="list-state list-state--centered">
      <view class="list-state__icon icon icon--lg icon--warning"></view>
      <view class="list-state__title">{{errorMsg}}</view>
      <view class="list-state__actions">
        <button bindtap="onRetry" type="default" size="mini">{{text.retry}}</button>
      </view>
    </view>
  </block>

  <block wx:elif="{{status === 'empty'}}">
    <view class="list-state list-state--centered">
      <view class="list-state__icon icon icon--lg icon--monitor"></view>
      <view class="list-state__title">{{text.noMachines}}</view>
    </view>
  </block>

  <block wx:elif="{{status === 'noModel'}}">
    <view class="list-state list-state--centered">
      <view class="list-state__icon icon icon--lg icon--warning"></view>
      <view class="list-state__title">{{text.noModel}}</view>
    </view>
  </block>

  <block wx:else>
    <view class="form">
      <view class="form__row">
        <text class="form__label">{{text.nameLabel}}</text>
        <input
          class="form__input"
          type="text"
          placeholder="{{text.namePlaceholder}}"
          placeholder-class="form__placeholder"
          value="{{name}}"
          maxlength="32"
          bindinput="onNameInput"
          confirm-type="done"
        />
        <text wx:if="{{nameError}}" class="form__hint form__hint--error">{{nameError}}</text>
      </view>

      <view class="form__row">
        <text class="form__label">{{text.machineLabel}}</text>
        <picker
          mode="selector"
          range="{{machineOptions}}"
          range-key="label"
          value="{{machineIndex}}"
          bindchange="onMachineChange"
        >
          <view class="form__picker">
            <text class="form__picker-value">{{machineOptions[machineIndex].label}}</text>
            <view class="form__picker-icon icon icon--sm icon--chevron-down"></view>
          </view>
        </picker>
      </view>

      <view class="form__row">
        <text class="form__label">{{text.runtimeLabel}}</text>
        <picker
          wx:if="{{runtimeOptions.length > 0}}"
          mode="selector"
          range="{{runtimeOptions}}"
          range-key="label"
          value="{{runtimeIndex}}"
          bindchange="onRuntimeChange"
        >
          <view class="form__picker">
            <text class="form__picker-value">{{runtimeOptions[runtimeIndex].label}}</text>
            <view class="form__picker-icon icon icon--sm icon--chevron-down"></view>
          </view>
        </picker>
        <text wx:else class="form__hint">{{text.noRuntimes}}</text>
      </view>

      <view class="form__row">
        <text class="form__label">{{text.modelLabel}}</text>
        <view class="form__readonly">{{modelLabel}}</view>
      </view>

      <text wx:if="{{submitError}}" class="form__hint form__hint--error">{{submitError}}</text>

      <button
        class="form__submit"
        type="primary"
        disabled="{{!canSubmit}}"
        bindtap="onSubmit"
        loading="{{submitting}}"
      >{{submitting ? text.submitting : text.submit}}</button>
    </view>
  </block>
</view>
