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

{%- macro checkbox(content, checked, value="on", type="checkbox") -%}
    {%- if checked -%}
        {%- do kwargs.setdefault("attrs", {}).setdefault("checked", true) -%}
    {%- endif %}
    {{ ui.input(content, value=value or "on", type=type, **kwargs) }}
{%- endmacro %}

{%- macro extra_field(index, data={}, errors={}, name_template='extras__{index}__') -%}
    {%- set prefix = name_template.format(index=index) -%}
    <fieldset {{ ui.util.attrs(kwargs) }}>
        <legend>{{ _('Custom Field') }}</legend>
        {{ ui.input(name=prefix ~ "key", label=_("Key"), value=data.key, errors=errors[prefix~"key"]) }}
        {{ ui.input(name=prefix ~ "value", label=_("Value"), value=data.value, errors=errors[prefix~"value"]) }}
        {{ ui.button(_("Remove"), style="danger", attrs={"onclick": "this.closest('fieldset').remove()"}) }}
    </fieldset>
{%- endmacro %}

{%- macro extra_fields_collection(extras=[], errors={}, limit=3) -%}
    <div {{ ui.util.attrs(kwargs) }} data-module="custom-fields">
        {%- for extra in extras -%}
            {{ ui.extra_field(index=loop.index0, data=extra, errors=errors) }}
        {%- endfor %}
        {%- set num_extras = extras|count %}
        {%- set max_extras = [limit - num_extras, 1]|max + num_extras %}
        {%- for index in range(num_extras, max_extras) -%}
            {{ ui.extra_field(index=index) }}
        {%- endfor %}

        <template id="custom-field-template">
            {{ ui.extra_field('TPL') }}
        </template>
        {{ ui.button(_("Add"), data={"index": max_extras}, attrs={"onclick": "
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);
            "}, **kwargs) }}

    </div>
{%- endmacro %}

{%- macro field_errors(errors) -%}
    {%- if errors -%}
        <div {{ ui.util.attrs(kwargs) }}>
            {%- for error in errors -%}
                <span role="alert">{{ error }}</span>{% if not loop.last %}<br/>{% endif %}
            {%- endfor %}
        </div>
    {%- endif %}
{%- endmacro %}

{%- macro file_input(content, accept, capture, multiple) -%}
    {%- if multiple -%}
        {%- do kwargs.setdefault("attrs", {}).setdefault("multiple", true) -%}
    {%- endif %}
    {%- if accept -%}
        {%- do kwargs.setdefault("attrs", {}).setdefault("accept", accept) -%}
    {%- endif %}
    {%- if capture -%}
        {%- do kwargs.setdefault("attrs", {}).setdefault("capture", capture) -%}
    {%- endif %}
    {{ ui.input(content, type="file", **kwargs) }}
{%- endmacro %}

{%- macro form(content, method, action, enctype, include_csrf=true) -%}
    {{ ui.form_start(method, action, enctype, **kwargs) }}
    {{ h.csrf_input() if include_csrf and method and method|upper != "GET" }}
    {{ content }}
    {{ ui.form_end() }}
{%- endmacro %}

{%- macro form_actions(content) -%}
    <div{{ ui.util.attrs(kwargs) }}>{{ content }}</div>
{%- endmacro %}

{%- macro form_end(content) -%}
    {%- do kwargs -%}
    {{ content }}
    </form>
{%- endmacro %}

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

{%- macro form_start(method, action, enctype) -%}
    <form
        {{ ui.util.attrs(kwargs) }}
        {%- if method %} method="{{ method }}"{%- endif %}
        {%- if action %} action="{{ action }}"{%- endif %}
        {%- if enctype %} enctype="{{ enctype }}"{%- endif -%}
    >
{%- endmacro %}

{%- macro hidden_input(name, value) -%}
    <input {{ ui.util.attrs(kwargs) }} type="hidden" name="{{ name }}" value="{{ value or "" }}">
{%- endmacro %}

{%- macro form_annotation() -%}
{%- endmacro %}

{%- macro field_info(content) -%}
    <div {{ ui.util.attrs(kwargs) }} class="input-help">{{ content }}</div>
{%- endmacro %}

{%- macro input(content, name, id, label, value, required, placeholder, type, errors=[]) -%}
    {%- 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 aria_attrs = kwargs.setdefault("aria", {}) -%}
    {%- if content %}{%- do aria_attrs.setdefault("describedby", help_id) -%}{%- endif -%}
    {%- if errors  %}{%- do aria_attrs.setdefault("invalid", "true") -%}{%- endif -%}

    <div>
        {%- if label -%}
            <label for="{{ field_id }}">{{ label }}</label>
        {%- endif %}
        {{ ui.field_info(content, attrs={"id": help_id}) if content }}
        <input
            {{ ui.util.attrs(kwargs) }}
            type="{{ type or "text" }}"
            {%- if name %} name="{{ name }}"{% endif %}
            {%- if field_id %} id="{{ field_id }}"{%- endif %}
            {%- if value %} value="{{ value }}"{% endif %}
            {%- if placeholder %} placeholder="{{ placeholder }}"{% endif %}
            {%- if required %} required{% endif %}
            {%- if content and not kwargs.aria %}aria-describedby="{{ help_id }}"{% endif %}
            {%- if errors and not kwargs.aria %}aria-invalid="true"{% endif %}
        >
        {%- if errors %}
            <div>
                {{ ui.field_errors(errors) }}
            </div>
        {%- endif %}
    </div>
{%- endmacro %}

{%- macro markdown_popover(id, title=_("Markdown formatting")) -%}
    {%- call ui.util.call(ui.popover, title=title, id=id) -%}
        {%- if content -%}
            {{ content }}
        {%- else -%}
            {%- trans -%}
            <p>__Bold text__ or _italic text_</p>
            <p># title
                <br>## secondary title
                <br>### etc
            </p>
            <p>* list
                <br>* of
                <br>* items
            </p>
            <p>http://auto.link.ed/</p>
            <p>
                <strong>
                    <a href='http://daringfireball.net/projects/markdown/syntax' target='_blank'>Full markdown syntax</a>
                </strong>
            </p>
            <p>
                <strong>Please note:</strong>
                HTML tags are stripped out for security reasons
            </p>
            {%- endtrans %}
        {%- endif %}
    {%- endcall -%}
{%- endmacro %}

{%- macro markdown(content, name, id, label, value, placeholder, required, errors=[]) -%}
    {%- 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() %}
    {{ ui.markdown_popover(id=popover_id) }}

    <div>
        {%- if label -%}
            <label for="{{ field_id }}">{{ label }}</label>
        {%- endif %}
        {{ ui.field_info(content, attrs={"id": help_id}) if content }}
        {%- call ui.util.call(ui.field_info) -%}
            <sub>
                You can use <strong>{{ ui.popover_handle(_("Markdown formatting"), id=popover_id) }}</strong> here
            </sub>
        {%- endcall %}
        <textarea
            {{ ui.util.attrs(kwargs) }}
            {%- if field_id %} id="{{ field_id }}"{%- endif %}
            {%- if placeholder %} placeholder="{{ placeholder }}"{% endif %}
            {%- if name %} name="{{ name }}"{% endif %}
            {%- if required %} required{% endif %}
            {%- if content %} aria-describedby="{{ help_id }}"{% endif %}
            {%- if errors %} aria-invalid="true"{% endif %}
        >{{ value or "" }}</textarea>

        {%- if errors %}
            <div>
                {{ ui.field_errors(errors) }}
            </div>
        {%- endif %}
    </div>
{%- endmacro %}

{%- macro radio(content, checked, value="on") -%}
    {{ ui.checkbox(content, checked=checked, value=value or "on", type="radio", **kwargs) }}
{%- endmacro %}

{%- macro range_input(content, min_value, max_value, step) -%}
    {%- if min_value is defined -%}
        {%- do kwargs.setdefault("attrs", {}).setdefault("min", min_value) -%}
    {%- endif %}
    {%- if max_value is defined -%}
        {%- do kwargs.setdefault("attrs", {}).setdefault("max", max_value) -%}
    {%- endif %}
    {%- if step is defined -%}
        {%- do kwargs.setdefault("attrs", {}).setdefault("step", step) -%}
    {%- endif %}
    {{ ui.input(content, type="range", **kwargs) }}
{%- endmacro %}

{%- macro select(content, selected, options) -%}
    {%- set selected_values = selected if selected is not string and selected is iterable else [selected or ""] %}
    {%- call ui.util.call(ui.select_box, content, selected=selected, options=options or [], **kwargs) -%}
        {%- for option in (options or []) %}
            {%- if option is string %}
                {% set value, text = option, option %}
            {%- else -%}
                {% set value = option.value %}
                {% set text = 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, name, id, label, multiple, required, autocomplete, errors=[]) -%}
    {%- 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>
        {%- if label -%}
            <label for="{{ field_id }}">{{ label }}</label>
        {%- endif %}
        {{ ui.field_info(nested_content, attrs={"id": help_id}) if nested_content }}
        <select
            {{ ui.util.attrs(kwargs) }}
            {%- if name %} name="{{ name }}"{%- endif %}
            {%- if field_id %} id="{{ field_id }}"{%- endif %}
            {%- if required %} required{%- endif %}
            {%- if multiple %} multiple{%- endif %}
            {%- if nested_content %} aria-describedby="{{ help_id }}"{% endif %}
            {%- if errors %} aria-invalid="true"{% endif %}
        >
            {{ content }}
        </select>
        {%- if errors %}
            <div>
                {{ ui.field_errors(errors) }}
            </div>
        {%- endif %}
    </div>
{%- endmacro %}

{%- macro select_option(content, value, selected) -%}
    <option {{ ui.util.attrs(kwargs) }} value="{{ value }}" {{ "selected" if selected }}>{{ content }}</option>
{%- endmacro %}

{%- macro submit(content, value, name) -%}
    {%- do kwargs.setdefault("attrs", {}).update({"value": value, "name": name}) -%}
    {{ ui.button(content, type="submit", **kwargs) }}
{%- endmacro %}

{%- macro textarea(content, name, id, label, value, placeholder, required, errors=[]) -%}
    {%- 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>
        {%- if label -%}
            <label for="{{ field_id }}">{{ label }}</label>
        {%- endif %}
        {{ ui.field_info(content, attrs={"id": help_id}) if content }}
        <textarea
            {{ ui.util.attrs(kwargs) }}
            {%- if field_id %} id="{{ field_id }}"{%- endif %}
            {%- if placeholder %} placeholder="{{ placeholder }}"{% endif %}
            {%- if name %} name="{{ name }}"{% endif %}
            {%- if required %} required{% endif %}
            {%- if content %} aria-describedby="{{ help_id }}"{% endif %}
            {%- if errors %} aria-invalid="true"{% endif %}
        >{{ value or "" }}</textarea>
        {%- if errors %}
            <div>
                {{ ui.field_errors(errors) }}
            </div>
        {%- endif %}
    </div>
{%- endmacro %}

{% macro image_upload()  %}
    {{ _image_upload(*varargs, **kwargs) }}
{%- endmacro -%}

{%- macro fieldset(content, legend) -%}
    <fieldset>
        {%- if legend -%}
            <legend>{{ legend }}</legend>
        {%- endif %}
        {{ content }}
    </fieldset>
{%- endmacro %}