{% from 'macros/form.html' import image_upload as _image_upload %}

{%- macro checkbox(content, name=None, id=None, label=None, required=false, value="on", errors=None, checked=false) -%}
    {%- set field_id = id or (name and "field-" ~ name) or (label and ui.util.id()) or "" -%}
    {%- set help_id = ui.util.id() if content -%}
    <div class="form-group form-checkbox">
        <div class="form-controls">
            <label class="form-checkbox-label" for="{{ field_id }}">
                <input type="checkbox"
                    {{ ui.util.attrs(kwargs, {"name": name, "id": field_id, "value": value or "on", "required": required, "checked": checked, "aria-describedby": help_id if content, "aria-invalid": "true" if errors}) }}
                >
                {{ label or "" }}
                {%- if required -%}<span class="form-required" title="{{ _('Required') }}">*</span>{%- endif -%}
            </label>
            {{ ui.field_info(content, attrs={"id": help_id}) if content }}
            {{ ui.field_errors(errors) if errors }}
        </div>
    </div>
{%- endmacro %}

{%- macro extra_field(content, index=None, data=None, errors=None, name_template='extras__{index}__') -%}
    {%- set prefix = name_template.format(index=index) -%}
    {%- set data = data or {} -%}
    {%- set errors = errors or {} -%}
    <fieldset {{ ui.util.attrs(kwargs, {"class": "extra-field"}) }}>
        <legend>{{ _('Custom Field') }}</legend>
        <div class="grid">
            {{ ui.input(name=prefix ~ "key", label=_("Key"), value=data.key, errors=errors.get(prefix~"key")) }}
            {{ ui.input(name=prefix ~ "value", label=_("Value"), value=data.value, errors=errors.get(prefix~"value")) }}
        </div>
        {{ content }}
        {{ ui.button(_("Remove"), style="danger", on={"click": "this.closest('fieldset').remove()"}) }}
    </fieldset>
{%- endmacro %}

{%- macro extra_fields_collection(extras=None, errors=None, limit=3) -%}
    {%- set extras = extras or [] -%}
    {%- set errors = errors or {} -%}
    <div {{ ui.util.attrs(kwargs, {"class": "extra-fields-collection", "data-module": "custom-fields"}) }}>
        {%- for extra in extras -%}
            {{ ui.extra_field(index=loop.index0, data=extra, errors=errors) }}
        {%- endfor %}
        {%- set num_extras = extras|count %}
        {%- if num_extras < limit %}
            {%- for index in range(num_extras, limit) -%}
                {{ ui.extra_field(index=index) }}
            {%- endfor %}
        {%- endif %}

        <template id="custom-field-template">
            {{ ui.extra_field('TPL') }}
        </template>
        {{ ui.button(_("Add"), data={"index": [limit, num_extras]|max}, on={"click": "
            const tpl = document.getElementById('custom-field-template').content.cloneNode(true);
            tpl.querySelectorAll('input').forEach(el => {
              el.name = el.name.replace('TPL', this.dataset.index);
              el.id = el.id.replace('TPL', this.dataset.index);
            });
            tpl.querySelectorAll('label').forEach(el => {
              el.setAttribute('for', el.getAttribute('for').replace('TPL', this.dataset.index));
            });
            ++this.dataset.index;
            this.parentNode.insertBefore(tpl, this);
        "}) }}
    </div>
{%- endmacro %}

{%- macro field_errors(errors=None) -%}
    {%- if errors -%}
        <div {{ ui.util.attrs(kwargs, {"class": "field-errors", "role": "alert"}) }}>
            {%- for error in errors -%}
                <div class="error-message">{{ error }}</div>
            {%- endfor %}
        </div>
    {%- endif %}
{%- endmacro %}

{%- macro file_input(content, accept=None, capture=None, multiple=false, name=None, id=None, label=None, required=false, errors=None) -%}
    {{ ui.input(content, name=name, id=id, label=label, required=required, errors=errors, type="file", accept=accept, capture=capture, multiple=multiple, **kwargs) }}
{%- endmacro %}

{%- macro form_errors(errors=None) -%}
    {% if errors %}
        <div {{ ui.util.attrs(kwargs, {"class": "form-errors", "role": "alert"}) }}>
            <p><strong>{{ _('The form contains invalid entries:') }}</strong></p>
            <ul>
                {% for key, error in errors.items() %}
                    <li>{% if key %}{{ key }}: {% endif %}{{ error }}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
{%- endmacro %}

{%- macro form_annotation(content) -%}
    <div {{ ui.util.attrs(kwargs, {"class": "form-annotation"}) }}>{{ content }}</div>
{%- endmacro %}

{%- macro field_info(content) -%}
    <div {{ ui.util.attrs(kwargs, {"class": "field-info"}) }}>{{ content }}</div>
{%- endmacro %}

{%- macro input(content, name=None, id=None, label=None, value=None, required=false, placeholder=None, type="text", errors=None) -%}
    {%- set field_id = id or (name and "field-" ~ name) or (label and ui.util.id()) or "" -%}
    {%- set help_id = ui.util.id() if content -%}

    <div class="form-group">
        {%- if label -%}
            <label class="form-label" for="{{ field_id }}">
                {{ label }}
                {%- if required -%}<span class="form-required" title="{{ _('Required') }}">*</span>{%- endif -%}
            </label>
        {%- endif %}
        <div class="form-controls">
            <input
                {{ ui.util.attrs(kwargs, {"class": "form-control", "type": type or "text", "name": name, "id": field_id, "value": value, "placeholder": placeholder, "required": required, "aria-describedby": help_id if content, "aria-invalid": "true" if errors}) }}
            >
            {{ ui.field_info(content, attrs={"id": help_id}) if content }}
            {{ ui.field_errors(errors) if errors }}
        </div>
    </div>
{%- endmacro %}

{%- macro markdown(content, name=None, id=None, label=None, value=None, placeholder=None, required=false, errors=None) -%}
    {%- set field_id = id or (name and "field-" ~ name) or (label and ui.util.id()) or "" -%}
    {%- set help_id = ui.util.id() if content -%}
    {% set popover_id = ui.util.id() %}

    <div class="form-group">
        {%- if label -%}
            <label class="form-label" for="{{ field_id }}">
                {{ label }}
                {%- if required -%}<span class="form-required" title="{{ _('Required') }}">*</span>{%- endif -%}
            </label>
        {%- endif %}
        <div class="form-controls">
            <div class="markdown-editor" data-module="markdown-editor">
                 <textarea
                    {{ ui.util.attrs(kwargs, {"class": "form-control", "name": name, "id": field_id, "placeholder": placeholder, "required": required, "aria-describedby": help_id if content, "aria-invalid": "true" if errors}) }}
                >{{ value or "" }}</textarea>
                <div class="markdown-help">
                    {{ ui.popover_handle(_("Markdown formatting"), id=popover_id) }}
                    {{ ui.modal(id=popover_id, title=_("Markdown formatting")) }}
                </div>
            </div>
            {{ ui.field_info(content, attrs={"id": help_id}) if content }}
            {{ ui.field_errors(errors) if errors }}
        </div>
    </div>
{%- endmacro %}

{%- macro radio(content, name=None, id=None, label=None, required=false, value="on", errors=None, checked=false) -%}
    {%- set field_id = id or (name and "field-" ~ name) or (label and ui.util.id()) or "" -%}
    {%- set help_id = ui.util.id() if content -%}
    <div class="form-group form-radio">
        <div class="form-controls">
            <label class="form-radio-label" for="{{ field_id }}">
                <input type="radio"
                    {{ ui.util.attrs(kwargs, {"name": name, "id": field_id, "value": value or "on", "required": required, "checked": checked, "aria-describedby": help_id if content, "aria-invalid": "true" if errors}) }}
                >
                {{ label or "" }}
                {%- if required -%}<span class="form-required" title="{{ _('Required') }}">*</span>{%- endif -%}
            </label>
            {{ ui.field_info(content, attrs={"id": help_id}) if content }}
            {{ ui.field_errors(errors) if errors }}
        </div>
    </div>
{%- endmacro %}

{%- macro range_input(content, name=None, id=None, label=None, value=None, required=false, errors=None, min_value=None, max_value=None, step=None) -%}
    {{ ui.input(content, name=name, id=id, label=label, value=value, required=required, errors=errors, type="range", min=min_value, max=max_value, step=step, **kwargs) }}
{%- endmacro %}

{%- macro select(content, name=None, id=None, label=None, multiple=false, required=false, errors=None, selected=None, options=None) -%}
    {%- set selected_values = selected if selected is not string and selected is iterable else ([selected or ""]) %}
    {%- call ui.util.call(ui.select_box, content, name=name, id=id, label=label, multiple=multiple, required=required, errors=errors, **kwargs) -%}
        {%- for option in (options or []) %}
            {%- if option is string %}
                {% set value, text = option, option %}
            {%- else -%}
                {% set value = option.value %}
                {% set text = option.label or option.text or option.value %}
            {%- endif %}
            {{ ui.select_option(text, value, selected=value in selected_values) }}
        {%- endfor %}
    {%- endcall %}
{%- endmacro %}

{%- macro select_box(content, nested_content=None, name=None, id=None, label=None, multiple=false, required=false, errors=None) -%}
    {%- set field_id = id or (name and "field-" ~ name) or (label and ui.util.id()) or "" -%}
    {%- set help_id = ui.util.id() if nested_content -%}
    <div class="form-group">
        {%- if label -%}
            <label class="form-label" for="{{ field_id }}">
                {{ label }}
                {%- if required -%}<span class="form-required" title="{{ _('Required') }}">*</span>{%- endif -%}
            </label>
        {%- endif %}
        <div class="form-controls">
            <select
                {{ ui.util.attrs(kwargs, {"class": "form-control", "name": name, "id": field_id, "required": required, "multiple": multiple, "aria-describedby": help_id if nested_content, "aria-invalid": "true" if errors}) }}
            >
                {{ content }}
            </select>
            {{ ui.field_info(nested_content, attrs={"id": help_id}) if nested_content }}
            {{ ui.field_errors(errors) if errors }}
        </div>
    </div>
{%- endmacro %}

{%- macro textarea(content, name=None, id=None, label=None, value=None, placeholder=None, required=false, errors=None) -%}
    {%- set field_id = id or (name and "field-" ~ name) or (label and ui.util.id()) or "" -%}
    {%- set help_id = ui.util.id() if content -%}

    <div class="form-group">
        {%- if label -%}
            <label class="form-label" for="{{ field_id }}">
                {{ label }}
                {%- if required -%}<span class="form-required" title="{{ _('Required') }}">*</span>{%- endif -%}
            </label>
        {%- endif %}
        <div class="form-controls">
            <textarea
                {{ ui.util.attrs(kwargs, {"class": "form-control", "name": name, "id": field_id, "placeholder": placeholder, "required": required, "aria-describedby": help_id if content, "aria-invalid": "true" if errors}) }}
            >{{ value or "" }}</textarea>
            {{ ui.field_info(content, attrs={"id": help_id}) if content }}
            {{ ui.field_errors(errors) if errors }}
        </div>
    </div>
{%- endmacro %}