{{! Author: Jean-Baptiste Louvet-Daniel
   -
   - This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at https://mozilla.org/MPL/2.0/. }}

<fieldset class="custom-system-fieldset">
    <legend>{{localize "CSB.ComponentProperties.ComponentType.RadioButton"}}</legend>

    <div class='custom-system-form-field'>
        <label for='radioButtonLabel-{{appId}}'>{{localize 'CSB.ComponentProperties.InputComponent.Label'}}</label>
        <input id='radioButtonLabel-{{appId}}' type='text' data-key='label' name='label' value='{{label}}' />
    </div>

    <div class='custom-system-form-field'>
        <label for='radioButtonSize-{{appId}}'>{{localize 'CSB.ComponentProperties.Size.SectionTitle'}}*</label>
        <select id='radioButtonSize-{{appId}}' data-key='size' name='size'>
            {{selectOptions COMPONENT_SIZES selected=size localize=true}}
        </select>
    </div>

    <div class='custom-system-size-custom' style='{{#unless (eq size 'custom')}}display:none{{/unless}}'>
        <div class='custom-system-form-field'>
            <label for='radioButtonCustomSize-{{appId}}'>{{localize 'CSB.ComponentProperties.Size.CustomSizeTitle'}}
                *</label>
            <input id='radioButtonCustomSize-{{appId}}' data-key='customSize' name='customSize' type='number'
                   value='{{customSize}}' />
        </div>
    </div>

    <div class='custom-system-form-field'>
        <label for='radioButtonGroup-{{appId}}'>
            {{localize 'CSB.ComponentProperties.RadioButton.Group'}}*
            {{> icon-info title=(localize 'CSB.ComponentProperties.RadioButton.GroupDescription')}}
        </label>
        <input id='radioButtonGroup-{{appId}}' type='text' data-key='group' name='group' value='{{group}}' />
    </div>

    <div class='custom-system-form-field'>
        <label for='radioButtonValue-{{appId}}'>
            {{localize 'CSB.ComponentProperties.RadioButton.Value'}}
            {{> icon-formula}}
        </label>
        <input id='radioButtonValue-{{appId}}' type='text' data-key='value' name='value' value='{{value}}' />
    </div>

    <div class='custom-system-form-field'>
        <label for='radioButtonDefaultChecked-{{appId}}'>{{localize 'CSB.ComponentProperties.CheckedByDefault'}}</label>
        <input id='radioButtonDefaultChecked-{{appId}}' type='checkbox' data-key='defaultChecked'
               name='defaultChecked' {{checked defaultChecked}} />
    </div>
</fieldset>