#formily_modal
  %section{'data-formily' => 'input'}

    %select.no-select2{'data-ff-name' => 'type'}
      %optgroup{label: 'Base Inputs'}
        %option{value: 'Formily::TextInput'} Text Box
        %option{value: 'Formily::TextareaInput'} Text Area
        %option{value: 'Formily::DateTimeInput'} Date Time
        %option{value: 'Formily::CheckboxInput'} Checkbox
        %option{value: 'Formily::MultipleFileInput'} Multiple File Upload

      %optgroup{label: 'Static'}
        %option{value: 'Formily::StaticText'} Static Text

      %optgroup{label: 'Groups'}
        %option{value: 'Formily::CheckboxInputGroup'}
          Checkbox Group

        %option{value: 'Formily::RadioInputGroup'}
          Radio Group

        %option{value: 'Formily::OptionsInputGroup'}
          Select Box

    %section{'data-formily' => 'Formily::TextInput'}

      %input{'data-ff-name' => 'name', :placeholder => 'Name', :type => 'text'}
      %input{'data-ff-name' => 'label', :placeholder => 'Label', :type => 'text'}
      .label
        Description will be visible as a tooltip
      %textarea{'data-ff-name' => 'description', :placeholder => 'Description', rows: 3}

      .label
        Determines Mobile Popup Keyboard Type
      %label
        %select.input-types.no-select2{'data-ff-name' => 'tag_attributes', 'data-ff-sname' => 'type'}
          %option{value: 'text'}
            Text
          %option{value: 'number'}
            Number
          %option{value: 'email'}
            Email

      %label
        %input{type: 'checkbox', 'data-ff-name' => 'tag_attributes', 'data-ff-sname' => 'data-required', value: 'required'}
        Required field ?

      %label
        %input{type: 'checkbox', 'data-ff-name' => 'tag_attributes', 'data-ff-sname' => 'readonly', value: 'readonly'}
        Readonly input

      = render partial: 'formily/editor/default_value'

    %section{'data-formily' => 'Formily::TextareaInput'}
      %input{'data-ff-name' => 'name', :placeholder => 'Name', :type => 'text'}
      %input{'data-ff-name' => 'label', :placeholder => 'Label', :type => 'text'}
      .label
        Description will be visible as a tooltip
      %textarea{'data-ff-name' => 'description', :placeholder => 'Description', :type => 'text', rows: 3}

      %label
        %input{type: 'checkbox', 'data-ff-name' => 'tag_attributes', 'data-ff-sname' => 'data-required', value: 'required'}
        Required field ?

      %label
        %input{type: 'checkbox', 'data-ff-name' => 'tag_attributes', 'data-ff-sname' => 'readonly', value: 'readonly'}
        Readonly input

      = render partial: 'formily/editor/default_value'

    %section{'data-formily' => 'Formily::DateTimeInput'}
      %input{'data-ff-name' => 'name', :placeholder => 'Name', :type => 'text'}
      %input{'data-ff-name' => 'label', :placeholder => 'Label', :type => 'text'}
      .label
        Description will be visible as a tooltip
      %textarea{'data-ff-name' => 'description', :placeholder => 'Description', :type => 'text', rows: 3}

      %label
        %input{type: 'checkbox', 'data-ff-name' => 'tag_attributes', 'data-ff-sname' => 'data-required', value: 'required'}
        Required field ?

      %label
        %input{type: 'checkbox', 'data-ff-name' => 'tag_attributes', 'data-ff-sname' => 'readonly', value: 'readonly'}
        Readonly input

      %label
        %input{'data-ff-name' => 'default_value', :value => 'current date', :type => 'checkbox'}
        Default value to current date

    %section{'data-formily' => 'Formily::CheckboxInput'}
      %input{'data-ff-name' => 'name', :placeholder => 'Name', :type => 'text'}
      %input{'data-ff-name' => 'label', :placeholder => 'Label', :type => 'text'}
      .label
        Description will be visible as a tooltip
      %textarea{'data-ff-name' => 'description', :placeholder => 'Description', :type => 'text', rows: 3}

      %label
        %input{type: 'checkbox', 'data-ff-name' => 'tag_attributes', 'data-ff-sname' => 'data-required', value: 'required'}
        Required field ?

    %section{'data-formily' => 'Formily::MultipleFileInput'}
      %input{'data-ff-name' => 'name', :placeholder => 'Name', :type => 'text'}
      %input{'data-ff-name' => 'label', :placeholder => 'Label', :type => 'text'}
      .label
        Description will be visible as a tooltip
      %textarea{'data-ff-name' => 'description', :placeholder => 'Description', :type => 'text', rows: 3}

      %label
        %input{type: 'checkbox', 'data-ff-name' => 'tag_attributes', 'data-ff-sname' => 'data-required', value: 'required'}
        Required field ?

    %section{'data-formily' => 'Formily::StaticText'}
      .label
        You can use HTML markup
      %textarea{'data-ff-name' => 'description', :placeholder => 'Text', :type => 'text', rows: 3}

      = render partial: 'formily/editor/default_value'

    %section{'data-formily' => 'Formily::CheckboxInputGroup'}
      %input{'data-ff-name' => 'name', :placeholder => 'Name', :type => 'text'}
      %input{'data-ff-name' => 'label', :placeholder => 'Label', :type => 'text'}
      .label
        Description will be visible as a tooltip
      %textarea{'data-ff-name' => 'description', :placeholder => 'Description', :type => 'text', rows: 3}

    %section{'data-formily' => 'Formily::RadioInputGroup'}
      %input{'data-ff-name' => 'name', :placeholder => 'Name', :type => 'text'}
      %input{'data-ff-name' => 'label', :placeholder => 'Label', :type => 'text'}
      .label
        Description will be visible as a tooltip
      %textarea{'data-ff-name' => 'description', :placeholder => 'Description', :type => 'text', rows: 3}

    %section{'data-formily' => 'Formily::OptionsInputGroup'}
      %input{'data-ff-name' => 'name', :placeholder => 'Name', :type => 'text'}
      %input{'data-ff-name' => 'label', :placeholder => 'Label', :type => 'text'}
      .label
        Description will be visible as a tooltip
      %textarea{'data-ff-name' => 'description', :placeholder => 'Description', :type => 'text', rows: 3}

    %section{'data-formily' => 'Formily::Input'}


  %section{'data-formily' => 'group'}

    %section{'data-formily' => 'Formily::RadioInput'}
      %input{'data-ff-name' => 'name', :placeholder => 'Name', :type => 'text'}
      %input{'data-ff-name' => 'label', :placeholder => 'Label', :type => 'text'}
      .label
        Description will be visible as a tooltip
      %textarea{'data-ff-name' => 'description', :placeholder => 'Description', :type => 'text', rows: 3}

      %label
        conditioned
        %select.input-types.no-select2{'data-ff-name' => 'tag_attributes','data-ff-sname' => 'formily_conditioned'}
          %option{value: ''}
            NULL
          %option{value: 'Formily::TextInput'}
            Text Box
          %option{value: 'Formily::TextareaInput'}
            Text Area
          %option{value: 'Formily::MultipleFileInput'}
            Multiple File Upload

    %section{'data-formily' => 'Formily::CheckboxInput'}
      %input{'data-ff-name' => 'name', :placeholder => 'Name', :type => 'text'}
      %input{'data-ff-name' => 'label', :placeholder => 'Label', :type => 'text'}
      .label
        Description will be visible as a tooltip
      %textarea{'data-ff-name' => 'description', :placeholder => 'Description', :type => 'text', rows: 3}

      %label
        conditioned
        %select.input-types.no-select2{'data-ff-name' => 'tag_attributes','data-ff-sname' => 'formily_conditioned'}
          %option{value: ''}
            NULL
          %option{value: 'Formily::TextInput'}
            Text Box
          %option{value: 'Formily::TextareaInput'}
            Text Area
          %option{value: 'Formily::MultipleFileInput'}
            Multiple File Upload

    %section{'data-formily' => 'Formily::OptionInput'}
      %input{'data-ff-name' => 'name', :placeholder => 'Name', :type => 'text'}
      %input{'data-ff-name' => 'label', :placeholder => 'Label', :type => 'text'}

      %label
        conditioned
        %select.input-types.no-select2{'data-ff-name' => 'tag_attributes','data-ff-sname' => 'formily_conditioned'}
          %option{value: ''}
            NULL
          %option{value: 'Formily::TextInput'}
            Text Box
          %option{value: 'Formily::TextareaInput'}
            Text Area
          %option{value: 'Formily::MultipleFileInput'}
            Multiple File Upload