{% extends "bootstrap_4_horizontal_layout.html.twig" %}

{% block form_label_class -%}
col-md-3
{%- endblock form_label_class %}

{% block form_group_class -%}
col-md-9
{%- endblock form_group_class %}

{# add input groups to simple inputs #}
{% block form_widget_simple %}
    {% if type is not defined or type not in ['file', 'hidden'] %}
        {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control')|trim}) -%}
    {% endif %}
    {%- set type = type|default('text') -%}
    {{ block('input_group_start') }}
    <input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
    {{ block('input_group_end') }}
{% endblock %}

{# input group start block #}
{% block input_group_start %}
    {% if input_group|default %}<div class="input-group">{% endif %}
    {% if input_group|default and input_group.left|default %}
        <div class="input-group-prepend">{#--#}
            <span class="input-group-text">
                {%- if translation_domain|default -%}
                    {{- input_group.left|trans({}, translation_domain)|raw -}}
                {%- else -%}
                    {{- input_group.left|trans()|raw -}}
                {%- endif -%}
            </span>{#--#}
        </div>
    {% endif %}
{% endblock %}
{# input group end block #}
{% block input_group_end %}
    {% if input_group|default and input_group.right|default %}
        <div class="input-group-append">{#--#}
            <span class="input-group-text">
                {%- if translation_domain|default -%}
                    {{- input_group.right|trans({}, translation_domain)|raw -}}
                {%- else -%}
                    {{- input_group.right|trans()|raw -}}
                {%- endif -%}
            </span>{#--#}
        </div>
    {% endif %}
    {% if input_group|default %}</div>{% endif %}
{% endblock %}

{% macro singleHelpText(help, html = false, parameters = {}, domain = false) %}
    {%- if domain|default -%}
        {%- if html|default -%}
            {{- help|trans(parameters, domain)|raw -}}
        {%- else -%}
            {{- help|trans(parameters, domain) -}}
        {%- endif -%}
    {%- else -%}
        {%- if html|default -%}
            {{- help|trans(parameters)|raw -}}
        {%- else -%}
            {{- help|trans(parameters) -}}
        {%- endif -%}
    {%- endif -%}
{% endmacro %}
{% macro alertBlock(param = null, domain = false) %}
    {% if param|default and param is iterable %}
        {% for alertText, type in param %}
            <div class="alert alert-{{ type }}" role="alert">
                {%- if domain|default -%}
                    {{- alertText|trans({}, domain) -}}
                {%- else -%}
                    {{- alertText|trans() -}}
                {%- endif -%}
            </div>
        {% endfor %}
    {% endif %}
{% endmacro %}

{# add help text and alerts #}
{% block form_help -%}
    {%- if help is not empty -%}
        {%- set help_attr = help_attr|merge({class: (help_attr.class|default('') ~ ' form-text text-muted')|trim}) -%}
        {% if help is iterable %}
            {% for helpText in help %}
                <small id="{{ id }}_help_{{ loop.index }}"{% with { attr: help_attr } %}{{ block('attributes') }}{% endwith %}>
                    {{- _self.singleHelpText(helpText, help_html, help_translation_parameters, translation_domain) -}}
                </small>
            {% endfor %}
        {% else %}
            <small id="{{ id }}_help"{% with { attr: help_attr } %}{{ block('attributes') }}{% endwith %}>
                {{- _self.singleHelpText(help, help_html, help_translation_parameters, translation_domain) -}}
            </small>
        {% endif %}
    {%- endif -%}
    {{ _self.alertBlock(alert, translation_domain) }}
{%- endblock form_help %}

{# inject custom-select class into dropdown fields #}
{% block choice_widget_collapsed -%}
    {{ block('input_group_start') }}
    {%- set attr = attr|merge({class: (attr.class|default('') ~ ' custom-select')|trim}) -%}
    {{- parent() -}}
    {{ block('input_group_end') }}
{%- endblock choice_widget_collapsed %}

{# inject translatable button label into custom file selectors #}
{% block file_widget -%}
    {%- set label_attr = label_attr|merge({'data-browse': 'Choose a file'|trans}) -%}
    {%- set attr = attr|merge({class: (attr.class|default('') ~ ' custom-file-input')|trim}) -%}
    {{- parent() -}}
{%- endblock file_widget %}

{# move label to left side also for checkbox switches with "switch-custom" class #}
{% block checkbox_row -%}
    <div{% with {attr: row_attr|merge({class: (row_attr.class|default('') ~ ' form-group row')|trim})} %}{{ block('attributes') }}{% endwith %}>{#--#}
        {{- block('form_label') -}}
        <div class="{{ block('form_group_class') }}">
            {{- form_widget(form) -}}
            {{- form_help(form) -}}
        </div>{#--#}
    </div>
{%- endblock checkbox_row %}
{%- block checkbox_widget_base -%}{# from form_div_layout.html.twig #}
    <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
{%- endblock checkbox_widget_base -%}
{% block checkbox_widget -%}
    {%- set parent_label_class = parent_label_class|default(label_attr.class|default('')) -%}
    {%- if 'checkbox-custom' in parent_label_class -%}
        {{- parent() -}}
    {%- elseif 'switch-custom' in parent_label_class -%}
        {%- set attr = attr|merge({class: (attr.class|default('') ~ ' custom-control-input')|trim}) -%}
        <div class="custom-control custom-switch{{ 'switch-inline' in parent_label_class ? ' custom-control-inline' }}">
            {{- form_label(form, null, { widget: block('checkbox_widget_base'), label: ' ' }) -}}
        </div>
    {%- else -%}
        {{- parent() -}}
    {%- endif -%}
{%- endblock checkbox_widget %}

{# default to btn-secondary instead of btn-primary #}
{% block submit_widget -%}
    {%- set attr = attr|merge({class: (attr.class|default('btn-secondary'))|trim}) -%}
    {{- parent() -}}
{%- endblock submit_widget %}
{% block reset_widget -%}
    {%- set attr = attr|merge({class: (attr.class|default('btn-warning'))|trim}) -%}
    {{- parent() -}}
{%- endblock reset_widget %}

{# font awesome icon picker #}
{% block zikula_icon_widget %}
    <div class="input-group">{#--#}
        {%- set attr = attr|merge({class: (attr.class|default('') ~ ' zikula-icon-picker')|trim}) -%}
        {{- block('form_widget_simple') -}}
        <div class="input-group-append">{#--#}
            <span class="input-group-text">{{ input_group.right|default|raw }}</span>{#--#}
        </div>{#--#}
    </div>
    {{ include('@ZikulaFormExtension/Form/icon_picker.html.twig') }}
{% endblock %}

{# user live search input widget #}
{% block zikulausersmodule_userlivesearch_widget %}
    <div id="{{ id }}LiveSearch" class="autocomplete-user d-none">
        <i class="fas fa-search" title="{% trans %}Search user{% endtrans %}"></i>
        <noscript><p>{% trans %}This function requires JavaScript activated!{% endtrans %}</p></noscript>
        <input type="hidden" {{ block('widget_attributes') }} value="{{ value }}" />
        <input type="text" id="{{ id }}Selector" name="{{ id }}Selector" autocomplete="off" value="{{ user_name|e('html_attr') }}" title="{% trans %}Enter a part of the user name to search{% endtrans %}" class="user-selector" />
    </div>
    <small id="{{ id }}Avatar" class="form-text text-muted avatar">
        {% if value and not inline_usage %}
            {{ userAvatar(value, { rating: 'g' }) }}
        {% endif %}
    </small>
    {% if not required %}
        <small class="form-text text-muted"><a id="{{ id }}ResetVal" href="javascript:void(0);" class="d-none">{% trans %}Reset to empty value{% endtrans %}</a></small>
    {% endif %}
    {% if value and not inline_usage %}
        {% if hasPermission('ZikulaUsersModule::', '::', 'ACCESS_ADMIN') %}
            <small class="form-text text-muted"><a href="{{ path('zikulausersmodule_useradministration_modify', { 'user': value }) }}" title="{% trans %}Switch to users administration{% endtrans %}">{% trans %}Manage user{% endtrans %}</a></small>
        {% endif %}
    {% endif %}
    {# load required assets: jQuery UI + custom search code #}
    {{ pageAddAsset('stylesheet', asset('jquery-ui/themes/base/jquery-ui.min.css')) }}
    {{ pageAddAsset('javascript', asset('jquery-ui/jquery-ui.min.js'), constant('Zikula\\ThemeModule\\Engine\\AssetBag::WEIGHT_JQUERY_UI')) }}
    {{ pageAddAsset('stylesheet', zasset('@ZikulaUsersModule:css/livesearch.css')) }}
    {{ pageAddAsset('javascript', zasset('@ZikulaUsersModule:js/Zikula.Users.LiveSearch.js')) }}
{% endblock %}