{% load moderation_tags %}

<div class="p-4 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
    <h3 class="mb-4 text-lg font-semibold">Location</h3>
    <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 }}').setView([{{ location.latitude }}, {{ location.longitude }}], 13);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors'
            }).addTo(map);
            L.marker([{{ location.latitude }}, {{ location.longitude }}]).addTo(map);
         }, 100)"></div>
    <div class="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-400">
        {% if location.street_address %}<div>{{ location.street_address }}</div>{% endif %}
        <div>
            {% if location.city %}{{ location.city }}{% endif %}
            {% if location.state %}, {{ location.state }}{% endif %}
            {% if location.postal_code %} {{ location.postal_code }}{% endif %}
        </div>
        {% if location.country %}<div>{{ location.country }}</div>{% endif %}
    </div>
</div>