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

{% block form_errors %}
{% if errors|length > 0 %}
  <ul class="form-errors">
    {% for error in errors %}
      <li class="mt-1 text-xs text-red-800">
        {{ error.message }}
      </li>
    {% endfor %}
  </ul>
{% endif %}
{% endblock %}
{%- block form_widget_simple -%}
{%- set type = type|default('text') -%}
{%- if type == 'range' or type == 'color' -%}
  {# Attribute "required" is not supported #}
  {%- set required = false -%}
{%- endif -%}
{%- if icon_prefix is defined and icon_prefix is not null -%}
  <!-- Search -->
  <div
    class="focus-within:ring-primary-hover focus-within:border-brand-300 flex h-11 items-center rounded-lg border border-gray-300 bg-transparent px-4 text-sm transition-shadow focus-within:ring-1 dark:border-gray-700 dark:bg-gray-900">
    <div class="{{ icon_prefix }}"></div>
    <input
      type="{{ type }}"
      {{ block('widget_attributes') }}
      {% if value is not empty %}
        value="{{ value }}"
      {% endif %}>
  </div>
{% else %}
  <input
    type="{{ type }}"
    {{ block('widget_attributes') }}
    {% if value is not empty %}
      value="{{ value }}"
    {% endif %}>
{% endif %}

{%- endblock form_widget_simple -%}

{%- block form_row -%}
{%- set row_attr = row_attr|merge({ class: row_attr.class|default(row_class|default('w-full')) }) -%}
{%- set widget_attr = {} -%}
{%- if help is not empty -%}
  {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
{%- endif -%}
<div {% with {attr: row_attr} %} {{ block('attributes') }} {% endwith %}>
  {% if form.vars.label %}
    {{- form_label(form) -}}
  {% endif %}
  {{- form_errors(form) -}}
  {{- form_widget(form, widget_attr) -}}
  {{- form_help(form) -}}
</div>
{%- endblock form_row -%}

{%- block widget_container_attributes -%}
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' flex flex-col gap-y-4')|trim}) -%}
{%- if id is not empty %}id="{{ id }}"{% endif -%}
{{ block('attributes') }}
{%- endblock widget_container_attributes -%}

{%- block widget_attributes -%}
{%-
  set attr =
  attr|merge({
  class: (
  attr.class|default('') ~
  widget_class|default(
  "dark:bg-dark-900 h-8 w-full rounded-lg bg-transparent px-2 py-1 text-sm text-gray-800 placeholder:text-gray-400 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 "
  ~ (icon_prefix is defined and icon_prefix is not null ? ' border-none outline-bg-transparent focus:outline-none focus:ring-0' : 'border border-gray-300 focus:ring-1 focus:ring-primary-hover dark:border-gray-700 dark:focus:border-primary')
  )
  )
  ~ (disabled ? " " ~ (widget_disabled_class|default("border-gray-300 text-gray-500")))
  ~ (errors|length ? " " ~ (widget_errors_class|default("border-red-700 is-invalid")))
  })
-%}
{{- parent() -}}
{%- endblock -%}

{%- block checkbox_row -%}
<div
  class="flex flex-col gap-2 {{ form.vars.valid == false ? 'border border-red-500 rounded-md p-2' : '' }}">
  {% set id = form.vars.id %}
  {% set value = form.vars.value %}
  <div class="cursor-pointer transition group {{ child.vars.attr.class|default('') }}">
    <label for="{{ id }}" class="flex cursor-pointer items-start gap-2">
      <div class="flex flex-row gap-2 text-sm">
        {{ form_widget(form, { attr: { class: 'hidden peer ' } }) }}
        <div
          class="peer-checked:bg-primary h-5 w-5 flex-shrink-0 rounded-full border-2 border-gray-400 transition peer-checked:border-gray-600"></div>
      </div>
    </label>
  </div>
</div>
{%- endblock checkbox_row -%}

{%- block checkbox_widget -%}
{%-
  set widget_class =
  widget_class|default("form-checkbox mr-2 h-5 w-5 cursor-pointer rounded border border-gray-300 text-indigo-500 focus:outline-none dark:border-gray-700 dark:bg-gray-700")
-%}
{{- parent() -}}
{%- endblock -%}

{%- block form_help -%}
{%- set help_attr = help_attr|merge({ class: help_attr.class|default(help_class|default('text-xs ml-0.5 italic mt-1 text-gray-600 dark:text-gray-300')) }) -%}
{{- parent() -}}
{%- endblock form_help -%}

{% block form_label %}
{% set label = label|trans(label_translation_parameters, translation_domain)|capitalize %}
{%
  set label_attr = label_attr|merge({
  'class': (label_attr.class|default('') ~ ' text-sm font-medium text-gray-700 dark:text-gray-300')|trim
  })
%}
<div class="mb-1.5 flex flex-row items-center gap-2">
  {{ parent() }}
  {% if form.vars.label and form.vars.required %}
    <div class="text-xs text-orange-950 italic dark:text-orange-200">({{ 'form.required'|trans([],'form') }})</div>
  {% endif %}
</div>
{% endblock form_label %}

{% block choice_widget_options %}
{% for group_label, choice in options %}
  {% if choice is iterable %}
    <optgroup label="{{ group_label|trans({}, translation_domain)|capitalize }}">
      {% for nested_choice in choice %}
        {{ block('choice_widget_option') }}
      {% endfor %}
    </optgroup>
  {% else %}
    {{ block('choice_widget_option') }}
  {% endif %}
{% endfor %}
{% endblock choice_widget_options %}

{% block choice_widget_option %}
<option
  value="{{ choice.value }}"
  {% if choice.attr %}
    {{- block('attributes') -}}
  {% endif -%}
  {% if choice is selectedchoice(value) %}
    selected="selected"
  {% endif %}>
  {{ choice.label|trans({}, translation_domain)|capitalize }}
</option>
{% endblock choice_widget_option %}

{%- block button_widget -%}
{%- if label is empty -%}
  {%- if label_format is not empty -%}
    {% set label = label_format|replace({ "%name%": name, "%id%": id }) %}
    {%- elseif label is not same as(false) -%}
    {% set label = name|humanize %}
  {%- endif -%}
{%- endif -%}
{%-
  set attr =
  attr|merge({
  class: attr.class|default(
  widget_class|default(
  "flex cursor-pointer items-center justify-center rounded border border-primary bg-primary px-4 py-2 text-center leading-normal text-gray-100 hover:border-primary-hover hover:bg-primary-hover hover:text-white hover:ring-0 focus:border-primary-hover focus:bg-primary-hover focus:ring-0 focus:outline-none"
  )
  )})
-%}
<button type="{{ type|default("button") }}" {{ block("button_attributes") }}>
  {%- if icon_prefix is defined and icon_prefix is not null -%}
    <svg
      class="bi bi-box-arrow-in-right inline-block h-4 w-4 ltr:mr-2 rtl:ml-2"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      stroke-width="2"
      xmlns="http://www.w3.org/2000/svg">
      {{ icon_prefix|raw }}
    </svg>
  {% endif %}
  {%- if translation_domain is same as(false) -%}
    {%- if label_html is same as(false) -%}
      {{- label -}}
    {%- else -%}
      {{- label | raw -}}
    {%- endif -%}
  {%- else -%}
    {%- if label_html is same as(false) -%}
      {{- label|trans(label_translation_parameters, translation_domain) -}}
    {%- else -%}
      {{- label|trans(label_translation_parameters, translation_domain)|raw -}}
    {%- endif -%}
  {%- endif -%}
</button>
{%- endblock -%}

{#
{% block choice_widget_expanded %}
<div class="mt-2">
  {% for child in form %}
    {% set id = child.vars.id %}
    {% set value = child.vars.value %}
    <div class="flex flex-row items-center">
      <label for="{{ id }}" class="flex cursor-pointer items-start gap-4">
        {{ form_widget(child, { attr: { class: 'mt-1' } }) }}
        <div class="flex cursor-pointer flex-col text-sm">
          <label for="{{ child.vars.id }}" class="cursor-pointer">
            {{ child.vars.label|trans({}, translation_domain) }}
          </label>
        </div>
      </label>
    </div>
  {% endfor %}
</div>
{% endblock %}
#}

{% block choice_widget_expanded %}
<div
  id="{{ form.vars.id }}"
  class="flex flex-col gap-4 mt-4 {{ form.vars.valid == false ? 'border border-red-500 rounded-md p-2' : '' }}">
  {% for child in form %}
    {% set id = child.vars.id %}
    {% set value = child.vars.value %}
    <div class="cursor-pointer transition group {{ child.vars.attr.class|default('') }}">
      <label for="{{ id }}" class="flex cursor-pointer items-start gap-4">
        <div class="flex flex-row gap-2 text-sm">
          {{ form_widget(child, { attr: { class: 'hidden peer ' } }) }}
          <div
            class="peer-checked:bg-primary h-5 w-5 flex-shrink-0 rounded-full border-2 border-gray-400 transition peer-checked:border-gray-600"></div>
          <div class="flex flex-col text-sm">
            <span
              class="font-medium text-gray-900 dark:text-gray-300">
              {{- child.vars.label|trans({}, translation_domain) -}}
            </span>
            {% if child.vars.attr['data-helper'] is defined %}
              <span class="text-gray-500">
                {{ child.vars.attr['data-helper'] | raw }}
              </span>
            {% endif %}
          </div>
        </div>
      </label>
    </div>
  {% endfor %}
</div>
{% endblock %}

{%- block textarea_widget -%}
{%
  set attr = attr|merge({
  class: (attr.class|default('') ~ ' min-h-[200px] ')|trim ~ ' '
  })
%}
<textarea {{ block('widget_attributes') }}>{{ value }}</textarea>
{%- endblock textarea_widget -%}

{% block percent_widget %}
{% set symbol = symbol|default('%') %}
<div class="relative w-full">
  {{
    form_widget(form, {
    attr: attr|merge({
    class: 'w-full pr-8 text-right'
    })
    })
  }}
  <span class="pointer-events-none absolute inset-y-0 right-2 flex items-center text-sm text-gray-400">
    {{ symbol }}
  </span>
</div>
{% endblock %}
