{% load moderation_tags %}

<div class="p-4 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
    <h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-300">Location</h3>
    
    <!-- Map Container -->
    <div class="h-[300px] w-full rounded-lg border border-gray-300 dark:border-gray-600" 
         id="viewMap-{{ submission.id }}"
         x-init="setTimeout(() => {
            const map = L.map('viewMap-{{ submission.id }}');
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors'
            }).addTo(map);

            {% if submission.changes.latitude and submission.changes.longitude %}
                const lat = {{ submission.changes.latitude }};
                const lng = {{ submission.changes.longitude }};
                map.setView([lat, lng], 13);
                L.marker([lat, lng]).addTo(map);
            {% else %}
                map.setView([0, 0], 2);
            {% endif %}
         }, 100)"></div>

    <!-- Address Display -->
    <div class="mt-4 space-y-1">
        {% if submission.changes.street_address %}
        <div class="flex items-center text-gray-600 dark:text-gray-400">
            <i class="w-5 mr-2 fas fa-map-marker-alt"></i>
            {{ submission.changes.street_address }}
        </div>
        {% endif %}
        
        <div class="flex items-center text-gray-600 dark:text-gray-400">
            <i class="w-5 mr-2 fas fa-city"></i>
            {% if submission.changes.city %}{{ submission.changes.city }}{% endif %}
            {% if submission.changes.state %}, {{ submission.changes.state }}{% endif %}
            {% if submission.changes.postal_code %} {{ submission.changes.postal_code }}{% endif %}
        </div>

        {% if submission.changes.country %}
        <div class="flex items-center text-gray-600 dark:text-gray-400">
            <i class="w-5 mr-2 fas fa-globe"></i>
            {{ submission.changes.country }}
        </div>
        {% endif %}
    </div>
</div>