{% use 'form_div_layout.html.twig' %}

{%- block checkbox_widget -%}
  {%- if not (unstyled ?? false) %}
    {%- from '_macros/form.html.twig' import checkbox -%}
    {{- checkbox(attr|merge({
      id: id,
      name: full_name,
      value: value ?? false,
      disabled: disabled,
      required: required,
      checked: checked,
    })) -}}
  {%- else -%}
    {{- parent() -}}
  {%- endif -%}
{%- endblock checkbox_widget %}

{%- block radio_widget -%}
  {%- if not (unstyled ?? false) %}
    {%- from '_macros/form.html.twig' import radio -%}
    {{- radio(attr|merge({
      id: id,
      name: full_name,
      value: value ?? false,
      disabled: disabled,
      required: required,
      checked: checked,
    })) -}}
  {%- else -%}
    {{- parent() -}}
  {%- endif -%}
{%- endblock radio_widget %}

{% block form_widget_simple %}
  {%- if not valid -%}
    {%- set attr = attr|merge({ class: ((attr.class ?? '')~' form-control--error')|trim }) -%}
  {%- endif -%}
  {%- if (prefix ?? '') == '' and (suffix ?? '') == '' %}
    {%- set attr = attr|merge({ class: ((attr.class ?? '')~' form-control')|trim }) -%}
    {{- parent() -}}
  {% else %}
    {%- set attr = attr|merge({ class: ((attr.class ?? '')~' decorated-form-control__widget form-control form-control--undecorated')|trim }) -%}
    <label class="decorated-form-control decorated-form-control--text {{ disabled ? 'decorated-form-control--disabled' }}">
      {%- if (prefix ?? '') != '' -%}
        <span class="fg-grey no-select no-wrap" aria-hidden="true">{{ prefix }}</span>
      {%- endif -%}
      {{- parent() -}}
      {%- if (suffix ?? '') != '' -%}
        <span class="fg-grey no-select no-wrap" aria-hidden="true">{{ suffix }}</span>
      {%- endif -%}
    </label>
  {%- endif -%}
{% endblock form_widget_simple %}

{%- block honeypot_row -%}
  <div hidden>
    {{- form_widget(form) -}}
  </div>
{%- endblock honeypot_row -%}

{% block textarea_widget %}
  {%- set attr = attr|merge({class: ((attr.class ?? '')~' form-control')|trim}) -%}
  {{- parent() -}}
{% endblock textarea_widget %}

{% block choice_widget %}
  {%- if not multiple and not expanded -%}
    <span class="styled-select">
      {%- set attr = attr|merge({class: ((attr.class ?? '')~' form-control')|trim}) -%}
      {{- parent() -}}
      <span class="styled-select__caret" aria-hidden="true"></span>
    </span>
  {%- elseif not multiple and expanded %}
    {% set attr = attr|merge({ class: ((attr.class ?? '')~' flex flex--guttered')|trim}) %}
    <div {{ block('widget_container_attributes') }}>
      {%- for child in form -%}
        <span>
          {{- form_widget(child) }}
          {{ form_label(child, null, {translation_domain: choice_translation_domain}) -}}
        </span>
      {%- endfor -%}
    </div>
  {%- else -%}
    {{- parent() -}}
  {%- endif -%}
{% endblock choice_widget %}

{# form layout #}

{%- block form_start -%}
  {%- set attr = attr|merge({ class: ((attr.class ?? '')~' form')|trim }) -%}
  {%- if not (attr.class matches '/(^| )flow(-[A-Za-z0-9-]+)?($| )/') -%}
    {%- set attr = attr|merge({ class: attr.class~' flow' }) %}
  {%- endif -%}
  {{- parent() -}}
{%- endblock form_start -%}

{%- block button_row -%}
  <div class="form__row form__button-row">
    {{- form_widget(form) -}}
  </div>
{%- endblock button_row -%}

{% block checkbox_row %}
  {{- form_errors(form) -}}
  <span class="form-flex form-flex--single-line form-flex--no-collapse">
    {{- form_widget(form) -}}
    {{- form_label(form) -}}
  </span>
  {{- form_help(form) -}}
{% endblock checkbox_row %}

{% block form_help -%}
  {%- if help is not empty -%}
    {% set help_attr = (help_attr ?? {})|merge({ class: ((help_attr.class ?? '')~' text-flow-slim')|trim }) %}
    <div id="{{ id }}_help"{% with { attr: help_attr } %}{{ block('attributes') }}{% endwith %}>
      {%- if not (raw_help ?? false) -%}
        <p class="text-sm fg-muted">
          {%- if translation_domain is same as(false) -%}
            {{- help -}}
          {%- else -%}
            {{- help|trans(help_translation_parameters, translation_domain) -}}
          {%- endif -%}
        </p>
      {%- else -%}
        {{- help|raw -}}
      {%- endif -%}
    </div>
  {%- endif -%}
{%- endblock form_help %}

{%- block form_row -%}
  <div{% with { attr: (row_attr ?? {}) } %}{{ block('attributes') }}{% endwith %}>
    {%- if help is not empty -%}
      {%- set widget_attr = (widget_attr ?? {})|merge({ attr: { 'aria-describedby': id~"_help" } }) -%}
    {%- endif -%}
    <div class="flow-slim">
      {{- form_errors(form) -}}
      <div {% with { attr: (container_attr ?? {})|merge({ class: (container_attr.class ?? '')~' form-flex form__row' }) } %}{{ block('attributes') }}{% endwith %}>
        {{- form_label(form, null, label_attr ?? {}) -}}
        {{- form_widget(form, attr|merge(widget_attr ?? {})) -}}
      </div>
      {{- form_help(form) -}}
    </div>
  </div>
{%- endblock form_row -%}

{%- block form_errors -%}
  {%- if errors|length > 0 -%}
    <ul class="form-error-list">
      {%- for error in errors -%}
        <li>{{ error.message }}</li>
      {%- endfor -%}
    </ul>
  {%- endif -%}
{%- endblock form_errors -%}

{# labels #}

{% block choice_label %}
  {#- hide required indicator when one element is always selected -#}
  {%- set show_required_indicator = show_required_indicator ?? (required and placeholder is not empty) -%}

  {{- block('form_label') -}}
{% endblock choice_label %}

{% block form_label %}
  {%- set show_required_indicator = show_required_indicator ?? required -%}
  {% if label is not same as(false) -%}
    {% if not compound -%}
      {% set label_attr = label_attr|merge({'for': id}) %}
    {%- endif -%}

    {% if label is empty -%}
      {%- if label_format is not empty -%}
        {% set label = label_format|replace({
          '%name%': name,
          '%id%': id,
        }) %}
      {%- else -%}
        {% set label = name|humanize %}
      {%- endif -%}
    {%- endif -%}

    <{{ element|default('label') }}{% if label_attr %}{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}{% endif %}>
    {%- if translation_domain is same as(false) -%}
      {{- label -}}
    {%- else -%}
      {{- label|trans({}, translation_domain) -}}
    {%- endif %}
    {% if show_required_indicator -%}
      <b class="fg-red" role="presentation" title="{{ 'help.required_field'|trans }}" aria-label="{{ 'help.required_field'|trans }}">*</b>
    {%- endif -%}
    </{{ element|default('label') }}>
  {%- endif -%}
{% endblock form_label %}

{# misc widget stuff #}

{%- block button_widget -%}
  {%- set attr = attr|merge({'class': (attr.class ?? '')~' button'}) -%}
  {{- parent() -}}
{%- endblock button_widget -%}

{% block datetime_widget %}
  {%- if widget == 'single_text' -%}
    {{ block('form_widget_simple') }}
  {%- else -%}
    <span class="compound-form-widget">
      {{- form_widget(form.date) -}}
      {{- form_widget(form.time) -}}
    </span>
  {%- endif -%}
{% endblock datetime_widget %}

{# remove surrounding <div> that breaks flexbox #}
{% block form_widget_compound %}
  {%- if form is rootform -%}
    {{- form_errors(form) -}}
  {%- endif -%}
  {{- block('form_rows') -}}
  {{- form_rest(form) -}}
{% endblock form_widget_compound %}

{# repeated form type #}

{% block repeated_errors %}
  {{- form_errors(form.first) -}}
{% endblock repeated_errors %}

{% block repeated_label %}
  {{- form_label(form.first) -}}
{% endblock repeated_label %}

{% block repeated_row %}
  {{- block('form_row') -}}
{% endblock repeated_row %}

{%- block repeated_widget -%}
  <div class="compound-form-widget">
    {{- form_widget(form.first, { attr: attr|merge(form.first.vars.attr) }) -}}
    {{- form_widget(form.second, { attr: attr|merge(form.second.vars.attr)|merge({
      'placeholder': 'placeholder.repeat',
      'aria-label': form.second.vars.label is defined
        ? form.second.vars.label|trans
        : (form.second.vars.label_format is defined
          ? form.second.vars.label_format|replace({'%name%': name, '%id%': id})
          : form.second.vars.name|humanize)
    })}) -}}
  </div>
{%- endblock repeated_widget -%}

{# forum tags #}

{%- block forum_tags_help -%}
  {%- if help is empty -%}
    {%- set raw_help = true -%}
    {%- set help -%}
      <p class="text-sm">
        <a href="{{ path('forum_tags') }}" target="_blank">
          {{ 'action.see_full_list_of_tags'|trans }}
        </a>
      </p>
    {%- endset -%}
  {%- endif -%}
  {{- block('form_help') -}}
{%- endblock forum_tags_help -%}

{# font family #}

{%- block font_family_widget -%}
  {% set attr = attr|merge({ placeholder: attr.placeholder ?? 'placeholder.default'|trans }) %}
  {{- block('form_widget') -}}
{%- endblock font_family_widget -%}

{%- block font_family_help -%}
  {%- if not help -%}
    {%- set raw_help = true -%}
    {%- set help -%}
      <p class="fg-muted text-sm">{{ 'help.preferred_fonts'|trans }}</p>

      {% if server_fonts is not empty %}
        <p class="fg-muted text-sm">
          {{ 'help.preferred_fonts_served'|trans }}
          {%- for font in server_fonts %}
            {{- loop.index != 1 ? ', ' -}}
            <strong>{{ font }}</strong>
          {%- endfor %}
        </p>
      {% endif %}

      {% if aliased_fonts is not empty %}
        <p class="fg-muted text-sm">
          {{ 'help.preferred_fonts_aliases'|trans }}
          {%- for font, fonts in aliased_fonts %}
            {{- loop.index != 1 ? ', ' -}}
            <strong><abbr title="{{ fonts|join(', ') }}">{{ font }}</abbr></strong>
          {%- endfor %}
        </p>
      {% endif %}
    {%- endset -%}
  {%- endif -%}
  {{- block('form_help') -}}
{%- endblock font_family_help -%}