{{!--
This is used to wrap any input element that needs to be styled as a Zulip input.
Usage example:
{{#> components/input_wrapper . input_type="filter-input" custom_classes="inbox-search-wrapper" icon="search" input_button_icon="close"}}
<input type="text" id="{{INBOX_SEARCH_ID}}" class="input-element" value="{{search_val}}" autocomplete="off" placeholder="{{t 'Filter' }}" />
{{/components/input_wrapper}}
--}}

<div {{#if id}}id="{{id}}"{{/if}} class="input-element-wrapper{{#if input_type}} {{input_type}}{{/if}}{{#if custom_classes}} {{custom_classes}}{{/if}}{{#if icon}} has-input-icon{{/if}}{{#if input_button_icon}} has-input-button{{/if}}">
    {{#if icon}}
        <i class="input-icon zulip-icon zulip-icon-{{icon}}" aria-hidden="true"></i>
    {{/if}}
    {{> @partial-block .}}
    {{#if input_button_icon}}
        {{#if (eq input_type "filter-input") }}
            {{> icon_button custom_classes="input-button input-close-filter-button" squared=true icon=input_button_icon intent="neutral" }}
        {{else}}
            {{> icon_button custom_classes="input-button" squared=true icon=input_button_icon intent="neutral" }}
        {{/if}}
    {{/if}}
</div>