/* Form Control Templates */

/* Checkbox/Radio template */
{{##def.checkbox:it:/*}}*/
<div class="{{=it.data('wrapperClasses')}}">
    {{? it.data('labelPosition') === 'top'}}
    <label
        class="{{=it.data('labelClasses')}}"
        for="{{=it.attr('id')}}"
        id="{{=(it.attr('id') + 'Label')}}"
        title="{{? typeof it.data('labelTitle') !== 'undefined'}}{{=it.data('labelTitle')}}{{?}}">
        {{? !it.data('noLabel')}}
        {{=(it.data('labelHtml') || it.data('label') || it.attr('name') || it.attr('id'))}}
        {{?}}
    </label>
    {{?}}
    {{=it[0].outerHTML}}
    {{? it.data('labelPosition') !== 'top'}}
    <label
        class="{{=it.data('labelClasses')}}"
        for="{{=it.attr('id')}}"
        id="{{=(it.attr('id') + 'Label')}}"
        title="{{? typeof it.data('labelTitle') !== 'undefined'}}{{=it.data('labelTitle')}}{{?}}">
        {{? !it.data('noLabel')}}
        {{=(it.data('labelHtml') || it.data('label') || it.attr('name') || it.attr('id'))}}
        {{?}}
    </label>
    {{?}}
</div>
#}}

/* Input template - fancy inputs with placeholder to title transition */
{{##def.input:it:/*}}*/
<div class="{{=it.data('wrapperClasses')}}">
    /* If we are not going to use the overlay, then we need the label first and the element second.*/
    {{? it.data('labelType') !== 'inFront'}}
    {{=it[0].outerHTML}}
    {{?}}
    {{? it.data('labelType') !== 'none'}}
    <label
        class="{{=it.data('labelClasses')}}"
        for="{{=it.attr('id')}}"
        id="{{=(it.attr('id') + 'Label')}}"
        title="{{? typeof it.data('labelTitle') !== 'undefined'}}{{=it.data('labelTitle')}}{{?}}">
        {{=(it.data('label') || it.attr('name') || '')}}
    </label>
    {{?}}
    /* If we are going to use the overlay, which is default, then we need the label after the element.*/
    {{? it.data('labelType') === 'inFront'}}
    {{=it[0].outerHTML}}
    {{?}}
    {{? it.data('searchIcon')}}
    <i class="fas fa-search search-icon"></i>
    {{?}}
    {{? it.data('infoIcon')}}
    <i class="fas fa-info-circle info-icon"></i>
    {{?}}
    {{? it.data('validationTooltipType') == 'exclam'}}
    <i class="hide PF-popover fas fa-exclamation-circle validation-icon" data-target="#exclamTooltip_{{=it.attr('id')}}" data-trigger="hover"></i>
    <div id="exclamTooltip_{{=it.attr('id')}}" class="d-none">{{=(it.data('label') || it.attr('name') || '')}} is required</div>
    {{?? it.data('invalidTooltipMessage')}}
    <div class="{{=it.data('innerDivClasses')}}">{{=it.data('invalidTooltipMessage')}}</div>
    {{??}}
    <div class="{{=it.data('innerDivClasses')}}">{{=(it.data('label') || it.attr('name') || '')}} is required</div>
    {{?}}
</div>
#}}

/* Select template */
{{##def.select:it:/*}}*/
<div class="{{=it.data('wrapperClasses')}}{{? it.data('searchIcon') || it.data('infoIcon')}} select-with-icon{{?}}">
    {{? !it.data('noLabel')}}
    <label
        class="{{=it.data('labelClasses')}}"
        for="{{=it.attr('id')}}"
        id="{{=(it.attr('id') + 'Label')}}"
        title="{{? typeof it.data('labelTitle') !== 'undefined'}}{{=it.data('labelTitle')}}{{?}}">
        {{=(it.data('labelHtml') || it.data('label') || it.attr('name') || it.attr('id'))}}
    </label>
    {{?}}
    <div class="{{=it.data('selectWrapperClasses')}}">
        {{=it[0].outerHTML}}
        {{? it.data('invalidTooltipMessage')}}
        <div class="invalid-tooltip">{{=it.data('invalidTooltipMessage')}}</div>
        {{??}}
        <div class="invalid-tooltip">{{=(it.data('label') || it.attr('name') || '')}} is required</div>
        {{?}}
        {{? it.data('searchIcon')}}
        <i class="fas fa-search search-icon"></i>
        {{?}}
        {{? it.data('infoIcon')}}
        <i class="fas fa-info-circle info-icon"></i>
        {{?}}
    </div>
</div>
#}}

{{##def.selectOptions:it:/*}}*/
{{~it.options :option:index}}
<option value="{{!option.value}}" {{? option.defaultValue}} selected="selected" {{?}}>{{!option.name}}</option>
{{~}}
#}}

/* Switch template - switch style checkbox */
{{##def.switch:it:/*}}*/
<div class="{{=it.data('wrapperClasses')}}">
    <label
        class="{{=it.data('labelClasses')}}"
        for="{{=it.attr('id')}}"
        id="{{=(it.attr('id') + 'Label')}}"
        title="{{? typeof it.data('labelTitle') !== 'undefined'}}{{=it.data('labelTitle')}}{{?}}">
        {{? !it.data('noLabel')}}
        {{=(it.data('labelHtml') || it.data('label') || it.attr('id'))}}
        {{?}}
        {{=it[0].outerHTML}}
        <span class="switch-inner-container">
            {{? it.data('innerTextOn')}}
            <span class="switch-inner-text-on">{{=it.data('innerTextOn')}}</span>
            {{?}}
            {{? it.data('innerTextOff')}}
            <span class="switch-inner-text-off">{{=it.data('innerTextOff')}}</span>
            {{?}}
            <span class="slider round {{? it.data('label2') && !it.data('noLabel')}}always-on{{?}}"></span>
        </span>
        {{? it.data('label2') && !it.data('noLabel')}}
        <span class="label2">{{=it.data('label2')}}</span>
        {{?}}
        <span class="invalid-tooltip">{{=(it.data('label') || it.attr('name') || '')}} is required</span>
    </label>
</div>
#}}

/* Paging template */
{{##def.paging:it:/*}}*/
<span><a href="#" class="paging-previous"><i class="fas fa-angle-double-left"></i></a></span>
<span>Page</span>
<span class="select2-slim">
    <select class="PF-select PF-no-wrap paging-current-page" style="width: 45px;">
        <option></option>
    </select>
</span>
<span>of</span>
<span class="paging-page-count"></span>
<a href="#" class="paging-next"><i class="fas fa-angle-double-right"></i></a>
#}}

{{? it.type === 'text' || it.type === 'textarea' || it.type === 'richtext'}}
    {{#def.input:it.$element}}
{{?? it.type === 'switch'}}
    {{#def.switch:it.$element}}
{{?? it.type === 'select'}}
    {{#def.select:it.$element}}
{{?? it.type === 'checkbox' || it.type === 'radio'}}
    {{#def.checkbox:it.$element}}
{{?? it.type === 'paging'}}
    {{#def.paging:it.$element}}
{{?? it.type === 'selectOptions'}}
    {{#def.selectOptions:it}}
{{??}}
    <div style="color: red;">(ERROR: Unknown control type: '{{=it.type}}')</div>
{{?}}