<div class="input-row">
  <div class="float-label has-value {{if (and createTokenTask.last validations.attrs.name.isInvalid) 'has-error'}}">
    <label class='float-label-text label--sm' for='cc-name'>{{t 'ember-credit-card.labels.cc-name'}}</label>
    <input id='cc-name' type='text'
      class='cc-name'
      autocomplete='cc-name'
      value={{name}}
      disabled={{createTokenTask.isRunning}}
      oninput={{action (mut name) value='target.value'}}
      placeholder={{t 'ember-credit-card.placeholders.cc-name'}}>
  </div>
  {{#liquid-if (and createTokenTask.last validations.attrs.name.isInvalid)}}
    {{validation-errs prop='name'}}
  {{/liquid-if}}
</div>

<div class="input-row">
  <div class="float-label has-value {{if (and createTokenTask.last validations.attrs.number.isInvalid) 'has-error'}}">
    <label class='float-label-text label--sm' for='cc-number'>{{t 'ember-credit-card.labels.cc-number'}}</label>
    <div class='flex space-between'>
      <input id='cc-number' type='tel'
        class='cc-number'
        placeholder={{t 'ember-credit-card.placeholders.cc-number'}}
        autocomplete='cc-number'
        value={{numberStr}}
        disabled={{createTokenTask.isRunning}}
        maxLength={{card.maxStrLength}}
        oninput={{action (mut numberStr) value='target.value'}} >

      {{#liquid-if card.type}}
        {{inline-svg card.type class='icon icon--credit-card'}}
      {{/liquid-if}}
    </div>
  </div>
  {{#liquid-if (and createTokenTask.last validations.attrs.number.isInvalid)}}
    {{validation-errs prop='number'}}
  {{/liquid-if}}
</div>

<div class="input-row input-row--inline">
  <div class="input-col--50">
    <div class="float-label has-value {{if (and createTokenTask.last validations.attrs.cvc.isInvalid) 'has-error'}}">
      <label class='float-label-text label--sm' for='cc-cvc'>{{t 'ember-credit-card.labels.cc-cvc'}}</label>
      <input id='cc-cvc' type='tel'
        class='cc-cvc'
        placeholder={{t 'ember-credit-card.placeholders.cc-cvc'}}
        autocomplete='cc-csc'
        value={{cvc}}
        disabled={{createTokenTask.isRunning}}
        oninput={{action (mut cvc) value='target.value'}} >
    </div>
    {{#liquid-if (and createTokenTask.last validations.attrs.cvc.isInvalid)}}
      {{validation-errs prop='cvc'}}
    {{/liquid-if}}
  </div>

  <div class="input-col--50">
    <div class="float-label has-value {{if (and createTokenTask.last validations.attrs.expStr.isInvalid) 'has-error'}}">
      <label class='float-label-text label--sm' for='cc-exp'>{{t 'ember-credit-card.labels.cc-exp'}}</label>
      <input id='cc-exp' type='tel'
        class='cc-exp'
        placeholder={{t 'ember-credit-card.placeholders.cc-exp'}}
        autocomplete='cc-exp'
        value={{expStr}}
        disabled={{createTokenTask.isRunning}}
        oninput={{action (mut expStr) value='target.value'}} >
    </div>
    {{#liquid-if (and createTokenTask.last validations.attrs.expStr.isInvalid)}}
      {{validation-errs prop='expStr'}}
    {{/liquid-if}}
  </div>
</div>

<div class="input-row">
  <div class="float-label has-value {{if (and createTokenTask.last validations.attrs.addressLine1.isInvalid) 'has-error'}}">
    <label class='float-label-text label--sm' for='cc-address-line-1'>{{t 'ember-credit-card.labels.cc-address-line-1'}}</label>
    <input id='cc-address-line-1' type='text'
      class='cc-address-line-1'
      autocomplete='street-address'
      value={{addressLine1}}
      disabled={{createTokenTask.isRunning}}
      oninput={{action (mut addressLine1) value='target.value'}}
      placeholder={{t 'ember-credit-card.placeholders.cc-address-line-1'}}>
  </div>
  {{#liquid-if (and createTokenTask.last validations.attrs.addressLine1.isInvalid)}}
    {{validation-errs prop='addressLine1'}}
  {{/liquid-if}}
</div>

<div class="input-row">
  <div class="float-label has-value {{if (and createTokenTask.last validations.attrs.addressCity.isInvalid) 'has-error'}}">
    <label class='float-label-text label--sm' for='cc-address-city'>{{t 'ember-credit-card.labels.cc-address-city'}}</label>
    <input id='cc-address-city' type='text'
      class='cc-address-city'
      autocomplete='address-level2'
      value={{addressCity}}
      disabled={{createTokenTask.isRunning}}
      oninput={{action (mut addressCity) value='target.value'}}
      placeholder={{t 'ember-credit-card.placeholders.cc-address-city'}}>
  </div>
  {{#liquid-if (and createTokenTask.last validations.attrs.addressCity.isInvalid)}}
    {{validation-errs prop='addressCity'}}
  {{/liquid-if}}
</div>

<div class="input-row input-row--inline">
  <div class="input-col--50">
    <div class="float-label has-value {{if (and createTokenTask.last validations.attrs.addressState.isInvalid) 'has-error'}}">
      <label class='float-label-text label--sm' for='cc-address-state'>{{t 'ember-credit-card.labels.cc-address-state'}}</label>
      <select class="cc-address-state select--light select--full select--no-border"
          onchange={{action (mut addressState) value='target.value'}}
          disabled={{createTokenTask.isRunning}}
          name="state-list"
          autocomplete='address-level1'>
        <option value=null selected={{eq addressState null}} disabled=true>
          {{t 'ember-credit-card.placeholders.cc-address-state'}}
        </option>

        {{#each stateList as |state|}}
          <option value={{state.code}} selected={{eq state.code addressState}}>{{state.name}}</option>
        {{/each}}
      </select>
    </div>
    {{#liquid-if (and createTokenTask.last validations.attrs.addressState.isInvalid)}}
      {{validation-errs prop='addressState'}}
    {{/liquid-if}}
  </div>

  <div class="input-col--50">
    <div class="float-label has-value {{if (and createTokenTask.last validations.attrs.addressZip.isInvalid) 'has-error'}}">
      <label class='float-label-text label--sm' for='cc-address-zip'>{{t 'ember-credit-card.labels.cc-address-zip'}}</label>
      <input id='cc-address-zip' type='tel'
        class='cc-address-zip'
        autocomplete='postal-code'
        value={{addressZip}}
        disabled={{createTokenTask.isRunning}}
        oninput={{action (mut addressZip) value='target.value'}}
        placeholder={{t 'ember-credit-card.placeholders.cc-address-zip'}}>
    </div>
    {{#liquid-if (and createTokenTask.last validations.attrs.addressZip.isInvalid)}}
      {{validation-errs prop='addressZip'}}
    {{/liquid-if}}
  </div>
</div>

{{#liquid-if createTokenTask.error}}
  <p>{{createTokenTask.error.message}}</p>
{{/liquid-if}}

{{#if showSubmitBtn}}
  {{vinli-button
    type='submit'
    class='cc-submit'
    default=(t 'ember-credit-card.buttons.form-submit')
    isWaiting=createTokenTask.isRunning
    width='full'}}
{{else}}
  {{!-- we need some kind of submit btn so that the form gets submit when the user hits enter --}}
  <input type='submit' style='visibility: hidden; position: absolute;'>
{{/if}}
