{% load ui %}
{% load partials %}

{% partialdef form_field %}
    <div class="mb-3">
        <label class="label mb-0 {% if field.field.required %}has-text-weight-bold{% endif %}">
            {{ field.label }}
            <div class="field has-addons mb-0">
                {% if icon %}
                    <p class="control">
                        <button tabindex="-1" type="button" class="button is-static"><span class="icon"><i class="{{ icon }}"></i></span></button>
                    </p>
                {% endif %}
                <div class="control is-expanded">{{ field }}</div>
            </div>
            <span class="has-text-danger is-size-6">{{ field.errors }}</span>
            <span class="helptext is-size-7">{{ field.help_text|default_if_falsy:'' }}</span>
        </label>
    </div>
{% endpartialdef %}

{% partialdef form_checkbox %}
    <div class="mb-3">
        <div class="level mb-0" style="display: flex; flex-direction: row; justify-content: start">
        <div class="field has-addons mb-0">
            {% if icon %}
                <p class="control">
                    <button tabindex="-1" type="button" class="button is-static"><span class="icon"><i class="{{ icon }}"></i></span></button>
                </p>
            {% endif %}
            <div class="control is-expanded">{{ field }}</div>
        </div>
            <label class="label mb-0 {% if field.field.required %}has-text-weight-bold{% endif %}" for="{{ field.id_for_label }}">{{ field.label }}</label>
        </div>
        <span class="has-text-danger is-size-6">{{ field.errors }}</span>
        <span class="helptext is-size-7">{{ field.help_text|default_if_falsy:'' }}</span>
    </div>
{% endpartialdef %}

{% partialdef form_radio %}
    <div class="mb-3">
        <label class="label mb-0 {% if field.field.required %}has-text-weight-bold{% endif %}">
            {{ field.label }}
            <div class="field has-addons mb-0 mt-2">
                {% if icon %}
                    <p class="control">
                        <button tabindex="-1" type="button" class="button is-static"><span class="icon"><i class="{{ icon }}"></i></span></button>
                    </p>
                {% endif %}
                <div class="control is-expanded">{{ field }}</div>
            </div>
            <span class="has-text-danger is-size-6">{{ field.errors }}</span>
            <span class="helptext is-size-7">{{ field.help_text|default_if_falsy:'' }}</span>
        </label>
    </div>
{% endpartialdef %}

{% partialdef textarea %}
    <label class="label mt-2 mb-3">
        <span class="{% if field.field.required %}has-text-weight-normal{% endif %}">{{ field.label }}</span>
        <span class="has-text-danger is-size-6">{{ field.errors }}</span>
        {{ field }}
    </label>
{% endpartialdef %}

{% partialdef model_field %}
    <div class="mb-3">
        <label class="label mb-0 {% if field.field.required %}has-text-weight-bold{% endif %}" for="{{ field.id_for_label }}">{{ label }}</label>
        <div class="field has-addons mb-0">
            {% if icon %}
                <p class="control">
                    <button tabindex="-1" type="button" class="button is-static"><span class="icon"><i class="{{ icon }}"></i></span></button>
                </p>
            {% endif %}
            <div class="control input is-expanded is-disabled" disabled="" style="cursor: unset">{{ value|default_if_none:'' }}</div>
        </div>
        <span class="helptext is-size-7">{{ field.help_text|default_if_falsy:'' }}</span>
    </div>
{% endpartialdef %}