{% block integration_company_fields_row %}
  {%- set containerId = 'companyFieldsContainer' -%}
  {%- set numberOfFields = (form.offsetExists('update_mautic_company1')) ? 5 : 4 -%}
  {%- set object = 'company' -%}
  {{- block('fields_row') -}}
{% endblock %}

{% block integration_fields_row %}
  {%- set containerId = 'leadFieldsContainer' -%}
  {%- set numberOfFields = (form.offsetExists('update_mautic1')) ? 5 : 4 -%}
  {%- set object = 'lead' -%}
  {{- block('fields_row') -}}
{% endblock %}

{% block _integration_details_supportedFeatures_row %}
  {% set attr = form.vars.attr %}
  {% set builtin = formSettings.builtin_features|default([]) %}
  {% set showLabel = builtin|length != form.children|length %}
  <div class="row">
      <div class="col-sm-12">
          {% if showLabel %}
              <h4 class="mb-sm">{{ form.vars['label']|trans }}</h4>
          {% endif %}
          {% if formNotes.supported_features is defined and formNotes.supported_features is not empty %}
              <div class="alert alert-{{ formNotes['supported_features']['type'] }}">
                  {{ formNotes['supported_features']['note']|trans }}
              </div>
          {% endif %}
          {% for child in form.children %}
              {% if child.vars.value not in builtin %}
                <div class="checkbox" >
                    <label>
                        {{ form_widget(child, {'attr': attr}) }}
                        {{ child.vars.label|trans }}
                    </label>
                </div>
              {% else %}
                  {{ child.isRendered() }}
                  <input type="hidden" id="{{ child.vars['id'] }}" name="{{ child.vars['full_name'] }}" value="{{ child.vars['value']|e }}" />
              {% endif %}
          {% endfor %}
      </div>
  </div>
{% endblock %}

{% block _integration_details_featureSettings_row %}
<div class="row">
    <div class="col-sm-12">
        <h4 class="mb-sm mt-lg">
            {{ form.vars['label']|trans }}
        </h4>
        {% if formNotes.features is defined and formNotes.features is not empty %}
            <div class="alert alert-{{ formNotes['features']['type'] }}">
                {{ formNotes['features']['note']|trans }}
            </div>
        {% endif %}
        {{ form_widget(form) }}
    </div>
</div>
{% endblock %}

{% block fields_row %}
{#
  Variables
    - containerId (required, string)
    - numberOfFields (required, int)
    - object (required, string)
    - form
    - specialInstructions (optional)
        If set, `alertType` is required
    - alertType (conditional)
#}
{# @var int $numberOfFields #}
{%- set rowCount = 0 -%}
{%- set indexCount = 1 -%}
<div class="row fields-container" id="{{ containerId }}">

    {% if specialInstructions is defined and specialInstructions is not empty %}
      <div class="alert alert-{{ alertType }}">
        {{- specialInstructions|trans -}}
      </div>
    {% endif %}

    {% if form.vars.errors|length > 0 %}
      <div class="alert alert-danger">
        {% for error in form.vars.errors %}
          <p>{{ error.message }}</p>
        {% endfor %}
      </div>
    {% endif %}

    <div class="{{ object }}-field form-group col-xs-12">
      <div class="row">
        <div class="mb-xs col-sm-{{ (5 == numberOfFields) ? 5 : 6 }} text-center"><h4>{{ 'mautic.plugins.integration.fields'|trans }}</h4></div>
        {% if 5 == numberOfFields -%}
          <div class="col-sm-2"></div>
        {%- endif %}
        <div class="mb-xs col-sm-{{ (5 == numberOfFields) ? 5 : 6 }} text-center"><h4>{{ 'mautic.plugins.mautic.fields'|trans }}</h4></div>
      </div>
      {% for child in form.children %}
          {% set selected = false %}
          {% set isRequired = child.vars.attr['data-required'] is defined and child.vars.attr['data-required'] is not same as 0 %}
          {% if rowCount is divisible by(numberOfFields) %}
            <div id="{{ object }}-{{ rowCount }}" class="field-container row {% if 5 != numberOfFields %}pb-md{% endif %}">
          {% endif %}
          {% set rowCount = rowCount + 1 %}
          {% if 'hidden' == child.vars.block_prefixes[1] %}
            {{ form_row(child) }}
          {% else %}
            {% set class = '' %}
            {% set remainder = rowCount % numberOfFields %}
            {% if 1 == remainder or 3 == remainder %}
              {% set class = (5 == numberOfFields) ? 'col-sm-5' : 'col-sm-6' %}
            {% elseif 2 == remainder %}
              {% set class = (5 == numberOfFields) ? 'col-sm-2' : 'col-sm-6' %}
            {% endif %}
          {% endif %}
          {% if ('label_' ~ indexCount) == child.vars.name %}
            {% if isRequired %}
              {% set name = child.vars.full_name %}
              <input type="hidden" value="{{ child.vars['attr']['data-label'] }}" name="{{ name }}" />
            {% endif %}
            <div class="pl-xs pr-xs {{ class }} {% if isRequired %}has-error{% endif %}">
              <div class="placeholder" data-placeholder="{{ child.vars.attr.placeholder }}">
                <input type="text"
                       id="{{ child.vars.id }}"
                       name="{{ child.vars.full_name }}"
                       class="{{ child.vars.attr.class }}"
                       value="{{ child.vars.attr['data-label']|default('')|e }}" readonly />
              </div>
            </div>
          {% endif %}

          {%- if 'update_mautic' in child.vars.name -%}
            <div class="pr-xs {{ class }}" style="padding-left: 8px;" data-toggle="tooltip" title="{{ 'mautic.plugin.direction.data.update'|trans }}">
              <div class="row">
                <div class="form-group col-xs-12 ">
                  <div class="choice-wrapper">
                    <div class="btn-group btn-block" data-toggle="buttons" {% if child.vars['attr']['forceDirection'] %}data-force-direction="1"{% endif %}>
                      {% set checked = '0' == child.vars.value %}
                      <label class="btn-arrow{{ indexCount }} btn btn-ghost {% if checked %}active{% endif %} {% if child.vars['attr']['disabled'] %}disabled{% endif %}">
                        <input type="radio"
                               id="{{ child.vars['id'] }}_0"
                               name="{{ child.vars['full_name'] }}"
                               title=""
                               autocomplete="false"
                               value="0"
                               onchange="Mautic.matchedFields({{ indexCount }}, '{{ object }}', '{{ integration }}')"
                               {% if checked %}checked="checked"{% endif %}
                               {% if child.vars['attr']['disabled'] %}disabled{% endif %}>
                        <btn class="btn-nospin ri-arrow-left-circle-line"></btn>
                      </label>
                      {% set checked = '1' == child.vars.value %}
                      <label class="btn-arrow{{ indexCount }} btn btn-ghost {% if checked %}active{% endif %} {% if child.vars['attr']['disabled'] %}disabled{% endif %}">
                        <input type="radio" id="{{ child.vars['id'] }}_1"
                               name="{{ child.vars['full_name'] }}"
                               title=""
                               autocomplete="false"
                               value="1"
                               onchange="Mautic.matchedFields({{ indexCount }}, '{{ object }}', '{{ integration }}')"
                               {% if '1' == child.vars['value'] %}checked="checked"{% endif %}
                               {% if child.vars['attr']['disabled'] %}disabled{% endif %}>
                        <btn class="btn-nospin ri-arrow-right-circle-line"></btn>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          {%- endif -%}

          {% if ('m_' ~ indexCount) == child.vars.name %}
            <div class="pl-xs pr-xs {{ class }}">
              {% if isRequired %}<div class="has-errors">{% endif %}
              <select id="{{ child.vars.id }}"
                      name="{{ child.vars.full_name }}"
                      class="{{ child.vars.attr.class }}"
                      data-placeholder=""
                      autocomplete="false" onchange="Mautic.matchedFields({{ indexCount }}, '{{ object }}', '{{ integration }}')">
                <option value=""></option>
                {%- set mauticChoices = child.vars.attr['data-choices'] -%}
                {% for keyLabel, options in mauticChoices %}
                  {% if options is iterable %}
                    <optgroup label="{{ keyLabel }}">
                        {% for optionLabel, keyValue in options %}
                          <option value="{{ keyValue|e }}" {% if keyValue == child.vars.data %}selected{% set selected = true %}{% elseif selected is defined and selected is empty and '-1' == keyValue %}selected{% endif %}>
                              {{- optionLabel|trans -}}
                          </option>
                        {% endfor %}
                    </optgroup>
                  {% else %}
                    <option value="{{ options|e }}"{% if options == child.vars.data %}selected{% set selected = true %}{% elseif selected is defined and selected is empty and '-1' == options %}selected{% endif %}>
                        {{- keyLabel|trans -}}
                    </option>
                  {% endif %}
                {% endfor %}
              </select>
              {% if isRequired %}</div>{% endif %}
            </div>
          {% endif %}
          {% if rowCount is divisible by(numberOfFields) %}
              </div>
              {% set indexCount = indexCount + 1 %}
          {% endif %}
      {% endfor %}
    </div>
    {% if (indexCount - 1) < totalFields %}
      <div class="panel-footer">
          {{ include('@MauticCore/Helper/pagination.html.twig', {
                  'page': page,
                  'fixedPages': fixedPageNum,
                  'fixedLimit': true,
                  'target': '#IntegrationEditModal',
                  'totalItems': totalFields,
                  'jsCallback': 'Mautic.getIntegrationFields',
                  'jsArguments': [
                      {
                          'object': object,
                          'integration': integration,
                      },
                  ],
          }) }}
      </div>
    {% endif %}
</div>
{% endblock %}
