<ValidationForm  {{on "submit" this.submit}} @schema={{this.validation}} as |tpkform|>

    <div class="block">
      <TpkTimepicker 
        @value={{mut @model.timestart}} 
        @mode="12"
        @startHour="8"
        @endHour="11"
        @onchange={{action "settime" "timestart"}}
      />
    </div>

    

    <div class="block">
      <TpkTimepicker 
        @value={{@model.datetimestart}} 
        @steps="10"
        @isDate="true"
        @onchange={{action "settime" "datetimestart"}}
      />
    </div>

    @value: valeur à traiter
    @mode 12 || 24 sytème horaire à 12 (AM/PM) ou 24h - 24 par défaut
    @isDate la valeur est une date (true/false) - false par défaut

    <div class="block">
      <TpkInput 
        @parent={{tpkform}}
        @value={{@model.firstname}} 
        @label="Firstname" 
        @validation="firstname"
        @idname="firstname"
        as |i|>
        {{#if i.error}}
          <p>{{i.error}}</p>
        {{/if}}
      </TpkInput>
    </div>

    
    <div class="block">
      <TpkTextarea 
        @parent={{tpkform}}
        @value={{@model.description}} 
        @label="Description" 
        @validation="description"
        @idname="description"
        as |i|>
        {{#if i.error}}
          <p>{{i.error}}</p>
        {{/if}}
      </TpkTextarea>
    </div>
    


    <div class="block">
      {{!-- Action on group change --}}
      <TpkRadioGroup @name="radioselect" @validation="active" @parent={{tpkform}} @onchange={{action "changeRadio"}} as |R|>

        {{!-- Action on particular radio input --}}
        <R.radio 
          @idname="radioOn"
          @value="on" 
          @label="On" 
          @model={{@model.active}}
          @onchange={{action "changeParticularRadio"}}
        />

        <R.radio 
          @idname="radioOff"
          @value="off" 
          @label="Off"
          @model={{@model.active}} 
        />

        {{#if R.error}}
          <p>{{R.error}}</p>
        {{/if}}

      </TpkRadioGroup>
      {{@model.active}}
    </div>
    
    <div class="block">
      {{!-- Action on group change --}}
      <TpkCheckboxGroup @name="checkboxselect" @validation="colors" @parent={{tpkform}} @onchange={{action "changeCheckbox"}} as |R|>

        {{!-- Action on particular checkbox input --}}
        <R.checkbox   
          @idname="checkRed"
          @value="red" 
          @label="Red" 
          @model={{@model.colors}}
          @onchange={{action "changeParticularCheckbox"}}
        />

        <R.checkbox 
          @idname="checkBlue"
          @value="blue" 
          @label="Blue" 
          @model={{@model.colors}}
        />

        <R.checkbox 
          @idname="checkGreen"
          @value="green" 
          @label="Green" 
          @model={{@model.colors}}
        />

        {{#if R.error}}
          <p>{{R.error}}</p>
        {{/if}}
        
      </TpkCheckboxGroup>
      {{@model.colors}}
    </div>
    
    <div class="block">
      <h2>Select with plain array ['admin','user']</h2>
      <TpkSelect 
        @parent={{tpkform}} 
        @validation="role" 
        @name="roleselect" 
        @selected={{@model.role}}
        @options={{this.options}} 
        @onchange={{this.changeSelect}} as |tpkselect|>

        <tpkselect.option />
      
      </TpkSelect>
      {{@model.role}}
    </div>


    <div class="block">
      <h2>Select with array of objects [{id: 1, name: 'admin'},{id: 2, name: 'user'}]</h2>
      <TpkSelect 
        @parent={{tpkform}} 
        @validation="role" 
        @name="roleselect" 
        @selected={{@model.roleobj}}
        @options={{this.optionsobj}} 
        @onchange={{this.changeSelectObj}} as |tpkselect|>

        <tpkselect.option as |opt|>
          {{opt.args.option.name}}
        </tpkselect.option>
      
      </TpkSelect>
      { id: {{@model.roleobj.id}}, name: {{@model.roleobj.name}} }
    </div>
    
    

    <div class="block">
      {{#if tpkform.validating}}
        <p>Validating...</p>
      {{else}}
        <input type="submit" {{on "click" tpkform.validate}} value="submit">
      {{/if}}
    </div>

</ValidationForm>