{% extends "admin/base_site.html" %}
{% load unfold %}
{% load i18n admin_urls static admin_modify %}

{% block extrahead %}{{ block.super }}
    <script src="{% url 'admin:jsi18n' %}"></script>
    {{ media }}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
{% endblock %}

{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-form{% endblock %}

{% if not is_popup %}
    {% block breadcrumbs %}
        <div class="px-4 lg:px-8">
            <div class="container mb-6 mx-auto -my-3 lg:mb-12">
                <ul class="flex flex-wrap">
                    {% url 'admin:index' as link %}
                    {% trans 'Home' as name %}
                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}

                    {% url 'admin:app_list' app_label=opts.app_label as link %}
                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=opts.app_config.verbose_name %}

                    {% if has_view_permission %}
                        {% url opts|admin_urlname:'changelist' as link %}
                        {% include 'unfold/helpers/breadcrumb_item.html' with link=link  name=opts.verbose_name_plural|capfirst %}
                    {% else %}
                        {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=opts.verbose_name_plural|capfirst %}
                    {% endif %}

                    {% if add %}
                        {% blocktranslate trimmed with name=opts.verbose_name asvar breadcrumb_name %}
                            Add {{ name }}
                        {% endblocktranslate %}
                        {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=breadcrumb_name %}
                    {% else %}
                        {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=original|truncatewords:'18' %}
                    {% endif %}
                </ul>
            </div>
        </div>
    {% endblock %}
{% endif %}



{% block nav-global-side %}
    {% if has_add_permission %}
        {% include "unfold/helpers/add_link.html" %}
    {% endif %}
{% endblock %}

{% block content %}
    <div id="content-main" class="flex flex-col gap-4">
        {% block form_before %}{% endblock %}
        {% if adminform.model_admin.change_form_outer_before_template %}
            {% include adminform.model_admin.change_form_outer_before_template %}
        {% endif %}
        
        <div class="border border-base-200 border-dashed mb-4 p-3 rounded dark:border-base-700 gap-1.5">
            {% if original.lon and original.lat %}
            <div class="location-details" style="margin-bottom: 0rem; padding: 0.5rem 1rem; background-color: rgba(var(--color-primary-100), 0.3); border-radius: var(--border-radius,6px);">
                <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; align-items: center; font-size: 0.9em; color: rgb(var(--color-primary-500));" dir="rtl">
                    {% if original.country %}
                    <span class="badge" style="padding: 0.25rem 0.75rem; background-color: rgb(var(--color-primary-500)); color: white; border-radius: 20px;">
                        🇺🇳 {{ original.country }}
                    </span>
                    {% endif %}
                    
                    {% if original.region_name %}
                    <span style="display: inline-flex; align-items: center;">
                        <i class="fas fa-mountain mr-1"></i>
                        {{ original.region_name }}
                    </span>
                    {% endif %}
                    
                    {% if original.city %}
                    <span style="display: inline-flex; align-items: center;">
                        <i class="fas fa-city mr-1"></i>
                        {{ original.city }}
                    </span>
                    {% endif %}
                    
                    {% if original.zip_code %}
                    <span style="display: inline-flex; align-items: center;">
                        <i class="fas fa-mail-bulk mr-1"></i>
                        {{ original.zip_code }}
                    </span>
                    {% endif %}
                    
                    {% if original.isp %}
                    <span style="display: inline-flex; align-items: center;">
                        <i class="fas fa-network-wired mr-1"></i>
                        {{ original.isp }}
                    </span>
                    {% endif %}
                    {% if original.ip_address %}
                    <span style="display: inline-flex; align-items: center;">
                        <i class="fas fa-network-wired mr-1"></i>
                        {{ original.ip_address }}
                    </span>
                    {% endif %}
                </div>
            </div>
        
            {% if map_html %}
                <!-- Render the Folium map with a fixed height -->
                <div style="display: flex;justify-content: center;align-items: center;width: 100%;padding: 25px 0px;">
                <div style="border-radius: var(--border-radius,6px);width: 100%;max-width: 800px;">
                    {{ map_html|safe }}
                </div>
                </div>
            {% else %}
                <p>نقشه در دسترس نیست</p>
            {% endif %}
            {% else %}
                <p>موقعیت جغرافیایی موجود نیست</p>
            {% endif %}
        </div>
<!-- 
        <form {% if has_file_field %}enctype="multipart/form-data" {% endif %}{% if form_url %}action="{{ form_url }}" {% endif %}method="post" id="{{ opts.model_name }}_form" {% if adminform.model_admin.warn_unsaved_form %}class="warn-unsaved-form"{% endif %} novalidate>
            {% csrf_token %}

            {% if adminform.model_admin.change_form_before_template %}
                {% include adminform.model_admin.change_form_before_template %}
            {% endif %}

            {% block form_top %}{% endblock %}

            <div>
                {% if is_popup %}
                    <input type="hidden" name="{{ is_popup_var }}" value="1">
                {% endif %}

                {% if to_field %}
                    <input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}">
                {% endif %}

                {% include "unfold/helpers/messages/errornote.html" with errors=errors %}
                {% include "unfold/helpers/messages/error.html" with errors=adminform.form.non_field_errors %}

                {% block field_sets %}
                    {% for fieldset in adminform %}
                        {% if "tab" not in fieldset.classes %}
                            {% include 'admin/includes/fieldset.html' %}
                        {% endif %}
                    {% endfor %}

                    {% include "unfold/helpers/fieldsets_tabs.html" %}
                {% endblock %}

                {% block after_field_sets %}{% endblock %}

                {% block inline_field_sets %}
                    {% for inline_admin_formset in inline_admin_formsets %}
                        {% include inline_admin_formset.opts.template %}
                    {% endfor %}
                {% endblock %}

                {% block after_related_objects %}{% endblock %}

                {% if adminform.model_admin.change_form_after_template %}
                    {% include adminform.model_admin.change_form_after_template %}
                {% endif %}

                {% block submit_buttons_bottom %}{% submit_row %}{% endblock %}

                {% block admin_change_form_document_ready %}
                    <script id="django-admin-form-add-constants" src="{% static 'admin/js/change_form.js' %}"{% if adminform and add %} data-model-name="{{ opts.model_name }}"{% endif %} async></script>
                {% endblock %}

                {% prepopulated_fields_js %}
            </div>
        </form> -->
        {% if adminform.model_admin.change_form_outer_after_template %}
            {% include adminform.model_admin.change_form_outer_after_template %}
        {% endif %}

        {% block form_after %}{% endblock %}
    </div>
{% endblock %}

{% block extrajs %}
    <!-- Add Leaflet JS for Folium -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
{% endblock %}