{% use 'form_div_layout.html.twig' with checkbox_widget as base_checkbox_widget %}
{% use "bootstrap_5_layout.html.twig" %}

{# Widgets #}

{%- block form_label -%}
    {{- parent() -}}
    {% if label is not same as(false) -%}
        {%- if required -%}
            {{ block('span_required') }}
        {%- endif -%}
    {%- endif -%}
{%- endblock form_label -%}

{% block span_required %}
    <span class="required">*</span>
{% endblock %}

{%- block yes_and_no_choice_widget -%}
    <div class="btn-group" role="group">
        {%- for child in form %}
            {{- yes_and_no_choice_entry_widget(child, {
                parent_label_class: label_attr.class|default(''),
                translation_domain: choice_translation_domain,
                valid: valid,
                large: large,
                stimulus_identifier: stimulus_identifier
            }) -}}
        {%- endfor -%}
        {%- if verificar_input_group is defined and verificar_input_group -%}
            {{- verificar_button(form, {
                'verificar_button_class': large ? 'btn-lg' : '',
            }) -}}
        {%- endif -%}
    </div>
{%- endblock -%}

{%- block yes_and_no_choice_entry_widget -%}
    {%- set attr = attr|merge({class: (attr.class|default('') ~ ' btn-check')|trim}) -%}
    <input type="radio" {{ block('widget_attributes') }}
            {% if value is defined %} value="{{ value }}"{% endif %}
            {% if checked %} checked="checked"{% endif %}
           data-action="{{ stimulus_identifier }}#onChange"
           data-{{ stimulus_identifier }}-target="radio"
    />
    <label class="btn btn-outline-primary {% if large %} btn-lg{% endif %}" for="{{ id }}">{{ label|raw }}</label>
{%- endblock  -%}

{%- block direccion_form_widget -%}
    <div class="row" data-controller="direccion-form" {{ block('widget_container_attributes') }}>
        {%- if form is rootform -%}
            {{ form_errors(form) }}
        {%- endif -%}
        <div class="col-md-7" data-action="direccion-row:change->direccion-form#direccionChange">
            {{ form_row(form.direccion) }}
        </div>
        <div class="col-md-3" data-action="centro-poblado-select:change->direccion-form#centroPobladoChange">
            {{ form_row(form.centroPoblado) }}
        </div>
        <div class="col-md-2">
            {{ form_row(form.codigoPostal) }}
        </div>
    </div>
{%- endblock direccion_form_widget -%}

{%- block direccion_row -%}
    {%- set widget_attr = {} -%}
    {%- if help is not empty -%}
        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
    {%- endif -%}
    {%- set row_class = row_class|default(row_attr.class|default('mb-3')|trim) -%}
    <fieldset {% with {attr: row_attr|merge({class: row_class})} %}{{ block('attributes') }}{% endwith %}>
        {{- form_label(form) -}}
        <div class="{{ html_classes('row', 'g-0', {
            'has-nota': has_nota,
            'resolved': resolved
        }) }}" data-direccion-row-target="fieldRealContainer">
            {{- form_widget(form, widget_attr) -}}
        </div>
        {{- form_help(form) -}}
        {{- form_errors(form) -}}
        {%- if redo or verificar -%}
            {{- form_row(form.nota) -}}
        {%- endif -%}
    </fieldset>
{%- endblock %}

{%- block direccion_label %}
    <legend class="col-form-label{% if required %} required{% endif %}">
        {{ label|raw }}{%- if required -%}{{ block('span_required') }}{%- endif -%}
        <div class="direccion-visor d-inline-block" data-direccion-row-target="direccionVisor"></div>
    </legend>
{%- endblock -%}

{%- block direccion_widget -%}
    <div class="col-md-{% if verificar %}1{% else %}2{% endif %} calle-tipo">
        {{- form_widget(form.calleTipo) -}}
        {{- form_help(form.calleTipo) -}}
    </div>
    <div class="col-md-1 calle-numero">
        {{- form_widget(form.calleNumero) -}}
        {{- form_help(form.calleNumero) -}}
    </div>
    <div class="col-md-1 calle-letra">
        {{- form_widget(form.calleLetra) -}}
        {{- form_help(form.calleLetra) -}}
    </div>
    <div class="col-md-1 calle-bis">
        {{- form_widget(form.calleBis) -}}
    </div>
    <div class="col-md-1 calle-cuadrante">
        {{- form_widget(form.calleCuadrante) -}}
        {{- form_help(form.calleCuadrante) -}}
    </div>
    <div class="col-md-1 hashtag">
        <span class="input-group-text">#</span>
        {% if form.calleTipo.vars.help is not empty %}
            <p class="form-text mb-0 help-text">&nbsp;</p>
        {% endif %}
    </div>

    <div class="col-md-1 gen-numero">
        {{- form_widget(form.genNumero) -}}
        {{- form_help(form.genNumero) -}}
    </div>
    <div class="col-md-1 gen-letra">
        {{- form_widget(form.genLetra) -}}
        {{- form_help(form.genLetra) -}}
    </div>
    <div class="col-md-1 dash">
        <span class="input-group-text">-</span>
        {% if form.calleTipo.vars.help is not empty %}
            <p class="form-text mb-0 help-text">&nbsp;</p>
        {% endif %}
    </div>
    <div class="col-md-1 gen-placa">
        {{- form_widget(form.genPlaca) -}}
        {{- form_help(form.genPlaca) -}}
    </div>
    <div class="col-md-{% if verificar %}2{% else %}1{% endif %} gen-cuadrante">
        {%- if verificar -%}
        <div class="input-group">
            {%- endif -%}
            {{- form_widget(form.genCuadrante) -}}
            {%- if verificar -%}
            {{- verificar_button(form, {
                'verificar_button_action_controller': 'direccion-row'
            }) -}}
        </div>
        {%- endif -%}
        {{- form_help(form.genCuadrante) -}}
    </div>
{%- endblock -%}

{%- block ajax_select_text_row -%}
    {%- set widget_attr = {} -%}
    {%- if help is not empty -%}
        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
    {%- endif -%}
    {%- set row_class = row_class|default(row_attr.class|default('mb-3')|trim) -%}
    <div {% with {attr: row_attr|merge({class: row_class})} %}{{ block('attributes') }}{% endwith %}>
        {{- form_label(form) -}}
        <div data-{{ stimulus_identifier }}-target="searchHitsContainer">
            {{- form_widget(form, widget_attr) -}}
            <div class="ajax-select-text-search input-group" data-{{ stimulus_identifier }}-target="searchContainer">
                <input type="text" class="form-control{%- if not valid %} is-invalid{% endif -%}"
                       placeholder="Escriba para seleccionar"
                       data-{{ stimulus_identifier }}-target="input"
                       data-action="keydown->{{ stimulus_identifier }}#inputChange"
                       autocomplete="none" autocapitalize="none" autocorrect="off" spellcheck="false"
                       aria-autocomplete="list" {% if disabled %}disabled{% endif %}>
                {% if verificar %}
                    {{- verificar_button(form) -}}
                {% elseif not ver %}
                    <button class="btn btn-outline-primary erase" type="button"
                            data-{{ stimulus_identifier }}-target="eraseButton"
                            data-action="{{ stimulus_identifier }}#eraseSelected">
                        <i class="bi bi-x"></i>
                    </button>
                {% endif %}
            </div>
            <div class="ajax-select-text-hits" data-{{ stimulus_identifier }}-target="hitsContainer"
                 data-action="mouseover->{{ stimulus_identifier }}#hitContainerMouseOver"></div>
        </div>
        {{- form_help(form) -}}
        {{- form_errors(form) -}}
    </div>
{%- endblock -%}


{%- block telefono_row -%}
    {%- set widget_attr = {} -%}
    {%- if help is not empty -%}
        {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
    {%- endif -%}
    {%- set row_class = row_class|default(row_attr.class|default('mb-3')|trim) -%}
    <fieldset {% with {attr: row_attr|merge({class: row_class})} %}{{ block('attributes') }}{% endwith %}>
        {{- form_label(form) -}}
        <div class="row g-0 {% if has_nota %}has-nota{% endif %}" data-telefono-row-target="fieldRealContainer">
            {% for child in form|filter(child => not child.rendered) %}
                {%- if not child.vars.name is same as('nota') -%}
                    {{- form_row(child, widget_attr) -}}
                {%- endif -%}
            {% endfor %}
            {#{{- form_widget(form, widget_attr) -}}#}
        </div>
        {% for child in form|filter(child => not child.rendered) %}
            {{- form_row(child, widget_attr) -}}
        {% endfor %}
        {{- form_help(form) -}}
        {{- form_errors(form) -}}
    </fieldset>
{%- endblock %}

{%- block telefono_label %}
    {#<label class="col-form-label{% if required %} required{% endif %}">
        {{ label|raw }}{%- if required -%}{{ block('span_required') }}{%- endif -%}
    </label>#}
{%- endblock -%}

{%- block sucursal_form_row -%}
    <div class="sucursal-item" data-sucursales-target="sucursalItem">
        {% if verificar or redo %}
            <div class="verificar-field" data-controller="verificar-field"
                 data-verificar-field-label-value="Sucursal nombre"
                 data-verificar-field-resolved-value="{{ form.nombre.nota.vars.resolved ? 1 : 0 }}">
        {% endif %}
        <div class="{{ html_classes('form-floating', 'sucursal-header', {
            'has-nota': (verificar or redo) and form.nombre.nota.vars.has_nota,
            'resolved': (verificar or redo) and form.nombre.nota.vars.resolved
        }) }}" {% if verificar or redo %}data-verificar-field-target="fieldRealContainer"{% endif %}>
            {% if not verificar and not redo %}
                {{ form_widget(form.nombre) }}
            {% else %}
                {{ form_widget(form.nombre.value) }}
            {% endif %}
            <label for="{{ form.nombre.vars.id }}">Nombre</label>
            {% if not verificar and not ver %}
                <button class="btn btn-outline-dark" type="button" data-action="sucursales#removeForm">
                    Borrar
                </button>
            {% endif %}
        </div>
        {{ form_errors(form.nombre) }}

        {% if verificar or redo %}
                {{- form_widget(form.nombre.nota) -}}
            </div>
        {% endif %}
        <div class="sucursal-body">
            {{ form_row(form.direccion) }}
            {% if form.she is defined %}
                {{ form_row(form.she) }}
            {% endif %}
        </div>
    </div>
{%- endblock -%}


{%- block telefono_numero_label %}
    <label class="form-label{% if required %} required{% endif %}">
        {{ label|raw }}{%- if required -%}{{ block('span_required') }}{%- endif -%}
    </label>
{%- endblock -%}

{% block telefono_numero_widget %}
    {%- set toggle_cel = toggle_cel is defined and toggle_cel -%}
    <div {{ block('widget_container_attributes') }}>
        {%- if toggle_cel -%}
            {% set toggle_cel_form %}
                {% with {form: form.toggle_cel}|merge(form.toggle_cel.vars) only %}
                    {{- block('base_checkbox_widget') -}}
                {% endwith %}
            {% endset %}
            {{- form_label(form.toggle_cel, null, { widget: toggle_cel_form }) -}}
        {%- endif -%}

        {{- form_widget(form.numero, {}) -}}
        {{- form_errors(form.numero) -}}
    </div>
{% endblock %}

{%- block documento_form_widget -%}
    <div class="input-group" data-documento-form-target="dummyInputContainer">
        {% if choose_file_custom %}
            <span class="input-group-text">
                {{ choose_file_custom|raw }}
            </span>
        {% else %}
            {{ documento_upload_button(form) }}
        {% endif %}
        <input type="text" class="{{ html_classes('form-control', 'dummy-input', {
            'is-invalid': not valid,
            'is-update': form.vars.documento.filename,
        }) }}"
               value="{{ form.vars.documento.originalFilename }}"
               data-documento-form-target="dummyInput" placeholder="Sin documento"
               data-bs-toggle="tooltip" data-bs-placement="bottom"
               title="Sin documento"
        >
        {% if choose_file_custom %}
            {{ documento_upload_button(form, {to_the_right: true}) }}
        {% endif %}
        {% if ver and download_path %}
            <a href="{{ download_path }}" class="btn btn-outline-primary">
                Descargar
            </a>
        {% endif %}
        {% if verificar %}
            {{- verificar_button(form) -}}
        {% endif %}
    </div>
    {{- block('form_widget') -}}
{%- endblock -%}

{%- block documento_upload_button -%}
    {%- set button_class = html_classes('btn', 'btn-outline-primary', 'upload', {
        'd-none': ver or verificar,
        'to-the-right': to_the_right|default(false)
    }) -%}
    <button class="{{ button_class }}"
            type="button"
            data-documento-form-target="uploadButton">
        {% if form.vars.documento.filename %} Reemplazar {% else %} Seleccionar archivo {% endif %}
    </button>
{%- endblock -%}

{# siempre mostrar el contenedor de errores para que stimulus controller pueda agregar a el #}
{%- block documento_form_errors -%}
    <div class="invalid-feedback d-block" data-documento-form-target="invalidFeedback">
        {%- if errors|length > 0 -%}
            {%- for error in errors -%}
                {%- if not loop.first -%}
                    <br>
                {%- endif -%}
                {{ error.message }}
            {%- endfor -%}
        {%- endif -%}
    </div>
{%- endblock documento_form_errors %}

{%- block nota_widget -%}
    {{- block('hidden_widget') -}}
    <div class="{{ html_classes('input-group', 'mb-0', 'nota', {
        'resolved': resolved,
        'd-none': not has_nota
    }) }}" data-{{- stimulus_parent_controller -}}-target="notaVisorContainer">
        <span class="input-group-text">
            <i class="bi bi-exclamation-circle-fill"></i>
        </span>
        <span class="form-control" data-{{- stimulus_parent_controller -}}-target="notaVisorFormControl">
            {{ form.vars.value }}
        </span>
    </div>
{%- endblock nota_widget -%}

{%- block form_widget_simple -%}
    {%- if verificar_input_group is defined and verificar_input_group -%}
        {% if not verificar_button_ungrouped is defined %}
            <div class="input-group">
        {% endif %}
        {{- parent() -}}
        {{- verificar_button(form) -}}
        {% if not verificar_button_ungrouped is defined %}
            </div>
        {% endif %}
    {%- else -%}
        {{- parent() -}}
    {%- endif -%}
{%- endblock form_widget_simple -%}

{% block textarea_widget -%}
    {%- if verificar_input_group is defined and verificar_input_group -%}
        {% if not verificar_button_ungrouped is defined %}
            <div class="input-group">
        {% endif %}
        {{- parent() -}}
        {{- verificar_button(form) -}}
        {% if not verificar_button_ungrouped is defined %}
            </div>
        {% endif %}
    {%- else -%}
        {{- parent() -}}
    {%- endif -%}
{%- endblock textarea_widget %}

{%- block choice_widget_collapsed -%}
    {%- if verificar_input_group is defined and verificar_input_group -%}
        {% if not verificar_button_ungrouped is defined %}
            <div class="input-group">
        {% endif %}
        {{- parent() -}}
        {{- verificar_button(form) -}}
        {% if not verificar_button_ungrouped is defined %}
            </div>
        {% endif %}
    {%- else -%}
        {{- parent() -}}
    {%- endif -%}
{%- endblock choice_widget_collapsed -%}


{%- block verificar_button -%}
    {%- set element = verificar_button_element|default('button') -%}
    <{{ element }} class="{{ (verificar_button_class|default('') ~ ' btn btn-outline-nota')|trim }}"
    {% if element is same as('button') %}
        type="button"
    {% endif%}
    data-action="click->{{ verificar_button_action_controller|default('verificar-field') }}#anotar"
    data-{{ verificar_button_action_controller|default('verificar-field') }}-target="anotarButton"
    data-bs-toggle="tooltip" data-bs-placement="top"
    title="{% if resolved %}Resolver{% elseif has_nota %}Editar nota{% else %}Agregar nota{% endif%}">
    {% if resolved %}
        <i class="bi bi-check-all"
           data-{{ verificar_button_action_controller|default('verificar-field') }}-target="anotarButtonIcon"></i>
    {% elseif has_nota %}
        <i class="bi bi-pencil-fill"
           data-{{ verificar_button_action_controller|default('verificar-field') }}-target="anotarButtonIcon"></i>
    {% else %}
        <i class="bi bi-check"
           data-{{ verificar_button_action_controller|default('verificar-field') }}-target="anotarButtonIcon"></i>
    {% endif %}
    </{{ element }}>
{%- endblock -%}

{%- block chosen_entity_widget -%}
    {% if check_all %}
        <div class="input-group">
    {% endif %}
    {{- block('choice_widget_collapsed') -}}
    {% if check_all %}
        <button class="{{ html_classes('btn', {
            'btn-outline-primary': not checked_all,
            'btn-primary': checked_all,
        }) }}" type="button" data-chosen-target="checkAllButton" data-action="chosen#onCheckAll">
            Seleccionar todos
        </button>
        </div>
    {% endif %}
{%- endblock chosen_entity_widget -%}

{%- block identificacion_with_tipo_row -%}
    {% if not redo and not verificar %}
        <div class="identificacion-with-tipo">
        {{- form_label(form.identificacion) -}}
    {% else %}
        <div class="identificacion-with-tipo verificar-field" data-controller="verificar-field"
             data-verificar-field-label-value="Identificación" data-verificar-field-resolved-value="{{ resolved }}">
        {{- form_label(form.identificacion.value) -}}
    {% endif %}
        <div class="{{ html_classes('input-group', {
            'has-nota': has_nota,
            'resolved': resolved
        }) }}" {% if redo or verificar %}data-verificar-field-target="fieldRealContainer"{% endif %}>
            {{- form_widget(form.identificacionTipo) -}}
            {% if not redo and not verificar %}
                {{- form_widget(form.identificacion) -}}
            {% else %}
                {{- form_widget(form.identificacion.value) -}}
            {% endif %}
        </div>
        {% if redo or verificar %}
            {{- form_widget(form.identificacion.nota) -}}
        {% endif %}
    </div>
{%- endblock %}

{%- block date_picker_widget -%}
    {%  set attr = attr|merge({'class': ((attr.class|default('') ~ ' form-control')|trim)}) %}
    <div class="input-group datepicker">
        <input type="text" data-format="{{ date_format }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
        {% if verificar_input_group is defined and verificar_input_group %}
            {{- verificar_button(form) -}}
        {% else %}
            <div class="input-group-append">
                <div class="input-group-text">
                    <i class="bi bi-calendar"></i>
                </div>
            </div>
        {% endif %}
    </div>
{%- endblock date_picker_widget -%}