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

{% block money_widget %}
    {%- set attr = attr|merge({class: (attr.class|default('block pl-7'))|trim}) -%}

    <div class="relative rounded-md shadow-sm">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <span class="text-gray-500 sm:text-sm">€</span>
        </div>

        <input type="{{ type|default('number') }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}
               step="any"
               placeholder="0,00"/>
    </div>
{% endblock %}

{% block button_widget -%}
    <span class="{{ ('inline-flex rounded-md shadow-sm ' ~attr.class|default(''))|trim }}">
        {%- set attr = attr|merge({class: ('inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-primary-600 hover:bg-primary-500 focus:outline-none focus:border-primary-700 focus:shadow-outline-primary active:bg-primary-700 transition ease-in-out duration-150 ' ~ attr.class|default(''))|trim}) -%}
        {{- parent() -}}
    </span>

{%- endblock button_widget %}

{%- block form_widget_age -%}
    <div class="mt-1 relative rounded-md shadow-sm">
        <input type="{{ type }}" {{ block('widget_attributes') }} {{ block('widget_attributes') }}
               class="{{ block('input_class') }}"
                {% if value is not empty %}value="{{ value }}" {% endif %}/>
        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
            <span class="text-gray-500 sm:text-sm sm:leading-5" id="price-currency">Jahre</span>
        </div>
    </div>
{%- endblock form_widget_age -%}

{%- block checkbox_widget -%}
    <div class="flex items-center">
        {# Style the box explicitly (kept in sync with the global `[type=checkbox]` rule in
           base.css) so form checkboxes render correctly regardless of whether that base-layer
           block has been recompiled and deployed — utility classes ship in every build.
           Bare <input type="checkbox"> elements fall back to the base.css rule. #}
        <input type="checkbox"
               id="{{ id }}"
               class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:checked:bg-primary-600 dark:checked:border-primary-600 rounded" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />

        <label class="ml-3 block text-sm font-medium text-gray-700 dark:text-gray-200"
               for="{{ id }}">{{- label|trans(label_translation_parameters, translation_domain ?: null)|raw -}}</label>
    </div>

{%- endblock checkbox_widget -%}

{% block form_label -%}
    {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ 'mb-1 block text-sm font-medium leading-5 text-gray-700 dark:text-gray-50')|trim}) -%}
    {{- parent() -}}
{%- endblock form_label %}

{% block form_help -%}
    {% if form.vars.errors|length < 1 %}
        {%- set help_attr = help_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ 'mt-1 text-sm text-gray-500 dark:text-gray-400')|trim}) -%}
        {{- parent() -}}
    {% endif %}
{%- endblock form_help %}

{% block form_row -%}
    {%- 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 %}>
        {{- form_label(form) -}}
        {{- form_widget(form, widget_attr) -}}
        {{- form_help(form) -}}
        {{ form_errors(form) }}
    </div>
{%- endblock form_row %}


{%- block live_collection_entry_widget -%}

    {%- set attr = attr|merge({'class': 'space-y-6' }) -%}
    {{- block('form_widget') -}}

{%- endblock -%}


{%- block form_errors -%}
    {%- if errors|length > 0 -%}
        {% if compound %}
            {# display the global form errors #}
            <div class="my-4">
                <twig:Admin:Alert type="error">
                    <ul class="list-disc space-y-1">
                        {%- for error in errors -%}
                            <li>{{ error.message }}</li>
                        {%- endfor -%}
                    </ul>
                </twig:Admin:Alert>
            </div>
        {% else %}
            {%- for error in errors -%}
                <p class="mt-1 text-sm text-red-600">{{ error.message }}</p>
            {%- endfor -%}
        {% endif %}
    {%- endif -%}
{%- endblock form_errors -%}


{% block input_class -%}
    {% if form.vars.errors|length %}border-red-300 text-red-900 focus:shadow-outline-red{% else %}border-gray-300 focus:shadow-outline-blue focus:border-blue-300{% endif %} appearance-none block w-full px-3 py-2 border rounded-md placeholder-gray-400 focus:outline-none transition duration-150 ease-in-out sm:text-sm sm:leading-5
{% endblock input_class -%}

{% block custom_button_class -%}
    bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline
{% endblock custom_button_class -%}
