{% macro required_asterisk() %}
    <span class="text-red-500">*</span>
{% endmacro %}

{% macro form_help(field) %}
    {% if field.description %}
        <div class="form-help">{{ field.description }}</div>
    {% endif %}
{% endmacro %}

{% macro form_label(field) %}
    <label for="{{ field.label.field_id }}">
        {{ field.label.text }}
        {% if field.flags.required %}
            {{ required_asterisk() }}
        {% endif %}
    </label>
{% endmacro %}

{% macro form_errors(field) %}
    <ul class="form-errors">
        {% for error in field.errors %}
            <li>{{ error }}</li>
        {% endfor %}
    </ul>
{% endmacro %}

{% macro form_input(field) %}
    {{ field }}
{% endmacro %}

{% macro form_field(field) %}
    {% if field.type in ['CheckboxField', 'BooleanField'] %}
        {{ checkbox_field(field) }}
    {% elif field.type == 'HiddenField' %}
        {{ form_input(field) }}
    {% elif field.type == 'FileField' %}
        {{ file_field(field) }}
    {% elif field.type == 'MultipleFileField' %}
        {{ multiple_file_field(field) }}
    {% else %}
        <div class="form-group">
            {{ form_label(field) }}
            {{ form_input(field) }}
            {{ form_help(field) if field.description else '' }}
            {{ form_errors(field) if field.errors else '' }}
        </div>
    {% endif %}
{% endmacro %}

{% macro checkbox_input(field) %}
    <div class="form-check">
        {{ form_input(field) }}
        {{ form_label(field) }}
    </div>
{% endmacro %}

{% macro checkbox_field(field) %}
    <div class="form-group">
        {{ checkbox_input(field) }}
        {{ form_help(field) if field.description else '' }}
        {{ form_errors(field) if field.errors else '' }}
    </div>
{% endmacro %}

{% macro radio_input(field) %}
    <div class="form-radio-list">
        {% for element in field %}
            <label for="{{ element.label.field_id }}">{{ element }} {{ element.label.text }}</label>
        {% endfor %}
    </div>
{% endmacro %}

{% macro radio_field(field) %}
    <div class="form-group form-group-radio">
        {{ form_label(field) }}
        {{ radio_input(field) }}
        {{ form_help(field) if field.description else '' }}
        {{ form_errors(field) if field.errors else '' }}
    </div>
{% endmacro %}

{% macro file_input(field) %}
    <div>
        {{ form_input(field) }}
        {% if field.data %}
            <div class="mt-1 flex items-center gap-5" x-data="{delete: false}">
                <div class="rounded-md p-1.5 bg-gray-100 max-auto inline-flex gap-4">
                    <span>{{ field.data }}</span>
                </div>
                <div class="flex items-center gap-2">
                    <input type="checkbox" name="{{ field.name }}-delete" x-ref="delete{{ field.id }}">
                    <span
                        class="mb-0 cursor-pointer select-none"
                        @click="$refs['delete{{ field.id }}'].checked = !$refs['delete{{ field.id }}'].checked">
                        {{ _('Delete') }}
                    </span>
                </div>
            </div>
        {% endif %}
    </div>
{% endmacro %}

{% macro file_field(field) %}
    <div class="form-group">
        {{ form_label(field) }}
        {{ file_input(field) }}
        {{ form_help(field) if field.description else '' }}
        {{ form_errors(field) if field.errors else '' }}
    </div>
{% endmacro %}

{% macro render_row(layout) %}
    <div class="border border-gray-300 rounded-md mb-3">
        <header class="flex items-center justify-between border-b border-gray-200 bg-slate-50 px-2 py-1">
            <div></div>
            <div>
                <button type="button" class="delete-icon" @click="deleted.push(index)">
                    {{ tabler_icon('trash') }}
                </button>
            </div>
        </header>
        <main class="p-2">
            {{ layout }}
        </main>
    </div>
{% endmacro %}

{% macro list_field_item(field) %}
    <div class="mb-3 border border-gray-300 rounded-md">
        <div class="flex items-center bg-gray-100 px-2 py-0.5">
            <div class="ml-auto">
                <button class="delete-icon" type="button" @click="deleted.push(index)">
                    {{ tabler_icon('trash') }}
                </button>
            </div>
        </div>
        <div class="p-2">{{ form_field(field) }}</div>
    </div>
{% endmacro %}

{% macro list_field(field) %}
    <div x-data="{deleted: [], newCounter: 0, startIndex: {{ field|length }} }">
        <div class="mb-5">
            {% for subfield in field %}
                <template x-if="!deleted.includes({{ loop.index0 }})" x-data="{ index: {{ loop.index0 }} }">
                    {{ list_field_item(subfield) }}
                </template>
            {% endfor %}

            <template x-for="_index in newCounter">
                <template x-if="!deleted.includes(_index + startIndex)" x-data="{index: _index + startIndex}">
                    {{ list_field_item(field.empty) }}
                </template>
            </template>
        </div>
        <div>
            <button type="button" class="btn btn-link" @click="newCounter += 1">
                {{ tabler_icon('plus') }} {{ _('Add a new item') }}
            </button>
        </div>
    </div>
{% endmacro %}

{% macro form_form_field(field) %}
    {{ field }}
{% endmacro %}

{% macro ajax_select_input(field) %}
    <select
        id="{{ field.id }}"
        name="{{ field.name }}"
        :disabled="state == 'loading'"
        x-data="select({value: '{{ field.data|default("", true) }}', loader: '{{ field.loader }}'})"
        x-model="value"
    >
        <option></option>
        <template x-for="choice in choices">
            <option :value="choice[0]" x-text="choice[1]"></option>
        </template>
    </select>
{% endmacro %}

{% macro grid_layout(field, layout) %}
    <div class="grid grid-cols-{{ layout.columns }} gap-{{ layout.gap }}">
        {% for subfield in field %}
            {{ form_field(subfield) }}
        {% endfor %}
    </div>
{% endmacro %}

{% macro trix_input(field) %}
    <style>
        trix-toolbar {
            position: sticky;
            top: 0;
            z-index: 1;
            background: white;
        }

        .trix-button-group--file-tools {
            display: none !important;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.0-beta.0/dist/trix.css">
    <script type="text/javascript" src="https://unpkg.com/trix@2.0.0-beta.0/dist/trix.umd.min.js"></script>

    <textarea id="{{ field.id }}"
              name="{{ field.name }}"
              style="display: none">{{ field.data|e|default('', true) }}</textarea>
    <trix-editor input="{{ field.id }}" class="rich-text"></trix-editor>
{% endmacro %}

{% macro image_input(field) %}
    {% set preview_image = media_url_or_redirect(field.data) if field.data else '' %}
    <x-image-field id="{{ field.id }}"
                   name="{{ field.name }}"
                   button-label="{{ field.button_label }}"
                   delete-label="{{ field.delete_label }}"
                   accept="{{ field.accept|join(',') }}"
                   size="{{ field.size }}"
                   shape="{{ field.shape }}"
                   preview-image="{{ preview_image }}">

    </x-image-field>
{% endmacro %}
