{#
/**
 * @file
 * Theme override for a form element.
 *
 * Available variables:
 * - attributes: HTML attributes for the containing element.
 * - errors: (optional) Any errors for this form element, may not be set.
 * - prefix: (optional) The form element prefix, may not be set.
 * - suffix: (optional) The form element suffix, may not be set.
 * - required: The required marker, or empty if the associated form element is
 *   not required.
 * - type: The type of the element.
 * - name: The name of the element.
 * - label: A rendered label element.
 * - label_display: Label display setting. It can have these values:
 *   - before: The label is output before the element. This is the default.
 *     The label includes the #title and the required marker, if #required.
 *   - after: The label is output after the element. For example, this is used
 *     for radio and checkbox #type elements. If the #title is empty but the
 *     field is #required, the label will contain only the required marker.
 *   - invisible: Labels are critical for screen readers to enable them to
 *     properly navigate through forms but can be visually distracting. This
 *     property hides the label for everyone except screen readers.
 *   - attribute: Set the title attribute on the element to create a tooltip but
 *     output no label element. This is supported only for checkboxes and radios
 *     in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
 *     It is used where a visual label is not needed, such as a table of
 *     checkboxes where the row and column provide the context. The tooltip will
 *     include the title and required marker.
 * - description: (optional) A list of description properties containing:
 *    - content: A description of the form element, may not be set.
 *    - attributes: (optional) A list of HTML attributes to apply to the
 *      description content wrapper. Will only be set when description is set.
 * - description_display: Description display setting. It can have these values:
 *   - before: The description is output before the element.
 *   - after: The description is output after the element. This is the default
 *     value.
 *   - invisible: The description is output after the element, hidden visually
 *     but available to screen readers.
 * - disabled: True if the element is disabled.
 * - title_display: Title display setting.
 *
 * @see template_preprocess_form_element()
 */
#}

{% import _self as descriptions %}

{% set attributes = attributes|default(create_attribute()) %}

{% set label_display = label_display|default('before') %}
{% set title_display = title_display|default('before') %}
{% set description_display = description_display|default('after') %}
{% set prefix = prefix|default('') %}
{% set suffix = suffix|default('') %}

{% set bem_form_element_block = bem_form_element_block|default('form') %}

{% set bem_form_element_element = bem_form_element_element|default('element') %}

{% set bem_modifiers = [
  name ? name|clean_class,
] %}

{% set bem_form_element_modifiers = bem_form_element_modifiers|default([])|merge(bem_modifiers) %}

{% set bem_form_element_extra = bem_form_element_extra|default([
  'form-item',
  'js-form-item',
])|merge([
  type ? 'js-form-type--' ~ type|clean_class,
  type ? 'form-type--' ~ type|clean_class,
  name ? 'js-form-item--' ~ name|clean_class,
  name ? 'form-item--' ~ name|clean_class,
  title_display not in ['after', 'before'] ? 'form-no-label',
  disabled == 'disabled' ? 'form-disabled',
  errors ? 'form-item--error',
  errors ? 'form__element--error',
  prefix is not empty ? 'form__element--prefix',
  suffix is not empty ? 'form__element--suffix',
  'clearfix',
]) %}

<div{{ attributes.addClass(bem(
  bem_form_element_block,
  bem_form_element_element,
  bem_form_element_modifiers,
  bem_form_element_extra
)) }}>
  {% if label_display in ['before', 'invisible'] %}
    {% block form_element_label_before %}
      {{ label }}
    {% endblock form_element_label_before %}
  {% endif %}

  {% if description_display == 'before' and description.content %}
    {{- descriptions.description(name, description, description_display, tooltip) -}}
  {% endif %}

  {% if prefix is not empty or suffix is not empty %}
    <div class="form__element__root">
  {% endif %}

  {% if prefix is not empty %}
    <span class="form__element__prefix field-prefix">{{ prefix }}</span>
  {% endif %}

  {% block form_element_content %}
    {{ children }}
  {% endblock form_element_content %}

  {% if suffix is not empty %}
    <span class="form__element__suffix field-suffix">{{ suffix }}</span>
  {% endif %}

  {% if prefix is not empty or suffix is not empty %}
    </div>
  {% endif %}

  {% if label_display == 'after' %}
    {% block form_element_label_after %}
      {{ label }}
    {% endblock form_element_label_after %}
  {% endif %}

  {% if errors %}
    <div class="form-item__error-message">
      {% block form_element_errors %}
        {{ errors }}
      {% endblock form_element_errors %}
    </div>
  {% endif %}

  {% if description_display in ['after', 'invisible'] and description.content %}
    {{- descriptions.description(name, description, description_display, tooltip) -}}
  {% endif %}
</div>

{% macro description(name, description, description_display, tooltip) %}
  {% set description_classes = [
    'form__element__description',
    'description',
    description_display == 'invisible' ? 'visually-hidden',
  ] %}

  {% if tooltip %}
    <div class="form__element__tooltip" id="{{ name }}-tooltip" >
      <button class="form__element__tooltip__button" id="{{ name }}-tooltip-button" aria-label="help" aria-expanded="false" aria-describedby="{{ name }}-tooltip-message">?</button>
      <div class="form__element__tooltip__message" id="{{ name }}-tooltip-message" role="tooltip">
        {{- description.content -}}
      </div>
    </div>
  {% else %}
    <div{{ description.attributes.addClass(description_classes) }}>
      {{- description.content -}}
    </div>
  {% endif %}
{% endmacro %}
