{% extends "_base.html" %}
{% load i18n %}
{% load static %}
{% load widget_tweaks %}
{% block content %}
    <form method="post" data-unsaved-warning>
        {% csrf_token %}
        <div class="flex justify-between mb-4">
            <h1 class="heading">
                {% if form.instance.id %}
                    {% blocktranslate trimmed with poi_category_name=form.instance.name %}
                        Edit location category "{{ poi_category_name }}"
                    {% endblocktranslate %}
                {% else %}
                    {% translate "Create new location category" %}
                {% endif %}
            </h1>
            {% if perms.cms.change_poicategory %}
                <button class="btn">
                    {% translate "Save" %}
                </button>
            {% endif %}
        </div>
        <div class="flex flex-wrap">
            <div class="w-full">
                <div class="mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
                    <div class="w-full p-4 rounded bg-water-500">
                        <h3 class="heading font-bold text-black">
                            <i icon-name="map-pin" class="mr-2"></i> {% translate "Map marker" %}
                        </h3>
                    </div>
                    <div class="px-4 pb-4 grid xl:grid-cols-2 gap-4">
                        <div>
                            <label for="{{ form.icon.id_for_label }}">
                                {{ form.icon.label }}
                            </label>
                            <div class="flex">
                                {# djlint:off H006 #}
                                <img id="poi-category-icon-preview"
                                     class="w-10 mr-2"
                                     data-base-path="{% get_static_prefix %}/svg/poi-category-icons/"
                                     src="{% if form.instance.icon %}{% get_static_prefix %}/svg/poi-category-icons/{{ form.instance.icon }}.svg{% endif %}"
                                     alt="" />
                                {# djlint:on #}
                                <div class="relative flex-grow">
                                    {% render_field form.icon|add_error_class:"border-red-500" id="poi-category-icon-field" %}
                                </div>
                            </div>
                        </div>
                        <div>
                            <label for="{{ form.color.id_for_label }}">
                                {{ form.color.label }}
                            </label>
                            <div class="flex">
                                <span id="poi-category-color-preview"
                                      class="w-12 rounded-l"
                                      style="background-color: {{ form.instance.color }}"></span>
                                <div class="relative flex-grow">
                                    {% render_field form.color|add_error_class:"border-red-500" %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full mb-4 rounded border border-solid border-blue-500 shadow-2xl bg-white">
                    <div class="w-full p-4 rounded bg-water-500">
                        <h3 class="heading font-bold text-black">
                            <i icon-name="tag" class="mr-2"></i> {% translate "Category name" %}
                        </h3>
                    </div>
                    <div class="px-4 pb-4">
                        {% for form in formset %}
                            {{ form.category.as_hidden }}
                            {{ form.language.as_hidden }}
                            {{ form.id.as_hidden }}
                            {{ form.name.label_tag }}
                            {% render_field form.name|add_error_class:"border-red-500" %}
                        {% endfor %}
                        {{ formset.management_form }}
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock content %}
