{% extends 'dashboard/base.html' %}
{% load static %}

{% block title %}Location API Testing - Peza API{% endblock %}
{% block breadcrumb %}Location API Testing{% endblock %}

{% block extra_css %}
<style>
  @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1');
  .gradient-text {
    color: #0969da;
  }
  
  .btn-gradient {
    background: var(--primary);
  }
  
  .code-bg {
    background: #0d1117;
  }
  
  .tab-active {
    border-bottom: 2px solid #0969da;
    color: #0969da;
    font-weight: 600;
  }
  
  .result-card {
    transition: all 0.2s ease;
  }
  
  .result-card:hover {
    box-shadow: var(--shadow-md);
  }
  .gicon {
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
    line-height: 1;
    display: inline-block;
    vertical-align: -3px;
    margin-right: 6px;
    font-style: normal;
  }
  .processing-modal {
    position: fixed;
    inset: 0;
    background: rgba(13, 17, 23, 0.45);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 60;
  }
  .processing-modal.active { display: flex; }
  .processing-card {
    width: min(92vw, 340px);
    background: #ffffff;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    padding: 18px;
    text-align: center;
  }
  .processing-spinner {
    width: 38px;
    height: 38px;
    margin: 0 auto 10px;
    border: 3px solid #d0d7de;
    border-top-color: #0969da;
    border-radius: 9999px;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
</style>
{% endblock %}

{% block content %}
<main class="mx-auto px-4 py-6">
  <div class="grid lg:grid-cols-3 gap-4">
    <!-- Left Panel: Input Form -->
    <div class="lg:col-span-2">
      <div class="bg-white rounded-lg shadow p-4 mb-4">
        <h2 class="text-lg font-bold text-gray-900 mb-4">Location API Testing</h2>
        
        <!-- API Key Selection -->
        <div class="mb-4">
          <label class="block text-gray-700 text-sm font-medium mb-2"><span class="gicon" aria-hidden="true">key</span>API Key</label>
          <select 
            id="apiKeySelect"
            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none"
          >
            <option value="">Select an API key</option>
            {% for key in api_keys %}
            <option value="{{ key.key }}" data-testing="{{ key.is_testing|yesno:'true,false' }}">{{ key.name }} ({% if key.is_testing %}playground{% else %}{{ total_requests|default:0 }}{% endif %} used){% if key.is_testing %}{% else %}/{{ limit|default:100 }}{% endif %}</option>
            {% endfor %}
          </select>
          {% if not api_keys %}
          <p class="text-xs text-red-600 mt-1">No API keys found. <a href="{% url 'api-keys-management' %}" class="underline">Create one</a></p>
          {% endif %}
        </div>
        
        <!-- Search Parameters -->
        <div class="grid md:grid-cols-2 gap-4 mb-4">
          <div>
            <label class="block text-gray-700 text-sm font-medium mb-2"><span class="gicon" aria-hidden="true">location_on</span>Location</label>
            <input 
              type="text" 
              id="location"
              value="Lilongwe"
              class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none"
              placeholder="City or area name"
            >
            <p class="text-xs text-gray-500 mt-1">Examples: Lilongwe, Blantyre, Mzuzu</p>
          </div>
          
          <div>
            <label class="block text-gray-700 text-sm font-medium mb-2"><span class="gicon" aria-hidden="true">category</span>Category</label>
            <select 
              id="category"
              class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none"
            >
              <option value="hospital">Hospital</option>
              <option value="clinic">Clinic</option>
              <option value="pharmacy">Pharmacy</option>
              <option value="restaurant">Restaurant</option>
              <option value="hotel">Hotel</option>
              <option value="school">School</option>
              <option value="bank">Bank</option>
              <option value="police">Police</option>
              <option value="all">All Categories</option>
            </select>
          </div>
        </div>
        
        <!-- Optional Parameters -->
        <div class="mb-4">
          <button 
            type="button"
            onclick="toggleOptionalParams()"
            class="text-sm text-purple-600 hover:text-purple-800 mb-2"
          >
            <span id="toggleIcon" class="gicon" aria-hidden="true">add</span><span id="toggleText">Show Options</span>
          </button>
          
          <div id="optionalParams" class="hidden space-y-3 pt-2">
            <div class="grid md:grid-cols-2 gap-3">
              <div>
                <label class="block text-gray-700 text-xs mb-1"><span class="gicon" aria-hidden="true">radio_button_checked</span>Search Radius (meters)</label>
                <div class="flex items-center gap-2">
                  <input 
                    type="range" 
                    id="radius"
                    min="1000"
                    max="50000"
                    step="1000"
                    value="5000"
                    class="flex-grow"
                  >
                  <span id="radiusValue" class="text-xs font-medium w-16 text-right">5000m</span>
                </div>
              </div>
              
              <div>
                <label class="block text-gray-700 text-xs mb-1"><span class="gicon" aria-hidden="true">format_list_numbered</span>Results Limit</label>
                <input 
                  type="number" 
                  id="limit"
                  value="20"
                  min="1"
                  max="50"
                  class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-purple-500 outline-none"
                >
              </div>
            </div>
          </div>
        </div>
        
        <!-- Test Button -->
        <button 
          onclick="testAPI()"
          id="testButton"
          class="w-full py-3 btn-gradient text-white rounded-lg font-semibold shadow hover:shadow-lg transition"
        >
          <span class="gicon" aria-hidden="true">search</span>Search Locations
        </button>
        
        <div id="loading" class="hidden mt-3 text-center">
          <div class="inline-flex items-center text-sm">
            <div class="w-4 h-4 border-2 border-purple-600 border-t-transparent rounded-full animate-spin mr-2"></div>
            <span class="text-gray-600">Searching for locations...</span>
          </div>
        </div>
        
        <!-- cURL Command -->
        <div class="mt-4">
          <div class="flex justify-between items-center mb-2">
            <h3 class="text-sm font-medium text-gray-900">cURL Command</h3>
            <button 
              onclick="copyCurlCommand()"
              class="text-xs text-purple-600 hover:text-purple-800"
            >
              <span class="gicon" aria-hidden="true">content_copy</span>Copy
            </button>
          </div>
          <div class="code-bg rounded-lg p-3">
            <pre id="curlCommand" class="text-gray-300 font-mono text-xs overflow-auto whitespace-pre-wrap">curl -H "X-API-Key: YOUR_API_KEY" \
  "https://developers.pezamw.com/api/locations/?location=Lilongwe&category=hospital"</pre>
          </div>
        </div>

        <div class="mt-4">
          <div class="flex justify-between items-center mb-2">
            <h3 class="text-sm font-medium text-gray-900">Raw Response</h3>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3 text-xs">
            <div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
              <div class="font-medium text-gray-900 mb-1">Status</div>
              <div id="responseStatusMeta" class="text-gray-700">—</div>
            </div>
            <div class="p-3 bg-gray-50 rounded-lg border border-gray-200">
              <div class="font-medium text-gray-900 mb-1">Duration</div>
              <div id="responseDurationMeta" class="text-gray-700">—</div>
            </div>
          </div>
          <div class="mb-3">
            <div class="text-sm font-medium text-gray-900 mb-2">Response Headers</div>
            <div class="code-bg rounded-lg p-3 max-h-40 overflow-auto">
              <pre id="headersOutput" class="text-gray-300 font-mono text-xs overflow-auto whitespace-pre-wrap">—</pre>
            </div>
          </div>
          <div class="code-bg rounded-lg p-3 max-h-64 overflow-auto">
            <pre id="responseOutput" class="text-gray-300 font-mono text-xs overflow-auto whitespace-pre-wrap">No response yet.</pre>
          </div>
        </div>
      </div>
      
      <!-- Results Section -->
      <div id="resultsSection" class="bg-white rounded-lg shadow p-4">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-lg font-bold text-gray-900">Search Results</h2>
          <div class="flex items-center gap-3 text-xs text-gray-600">
            <span id="resultCount">0 results</span>
            <span id="responseTime" class="hidden">-- ms</span>
          </div>
        </div>
        
        <div id="resultsContainer">
          <div class="text-center py-8 text-gray-500">
            <span class="gicon text-gray-300" style="font-size:36px;margin-right:0;display:block;" aria-hidden="true">search</span>
            <p class="text-sm">Select an API key and click "Search Locations"</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Right Panel -->
    <div>
      <!-- Code Examples -->
      <div class="bg-white rounded-lg shadow p-4 mb-4">
        <h2 class="text-lg font-bold text-gray-900 mb-3"><span class="gicon" aria-hidden="true">code</span>Code Examples</h2>
        
        <div class="flex border-b border-gray-200 mb-3">
          <button onclick="selectExample('python')" id="ex-python" class="px-3 py-2 text-xs tab-active"><span class="gicon" aria-hidden="true">data_object</span>Python</button>
          <button onclick="selectExample('node')" id="ex-node" class="px-3 py-2 text-xs text-gray-600"><span class="gicon" aria-hidden="true">deployed_code</span>Node.js</button>
          <button onclick="selectExample('curl')" id="ex-curl" class="px-3 py-2 text-xs text-gray-600"><span class="gicon" aria-hidden="true">terminal</span>cURL</button>
        </div>
        
        <!-- Python Example -->
        <div id="example-python">
          <div class="code-bg rounded p-3">
            <pre class="text-gray-300 font-mono text-xs overflow-auto">import requests

api_key = "your_api_key_here"
url = "https://developers.pezamw.com/api/locations/"
headers = {"X-API-Key": api_key}
params = {
    "location": "Lilongwe",
    "category": "hospital",
    "radius": 5000
}

response = requests.get(
    url, 
    headers=headers, 
    params=params
)
data = response.json()

if data.get('success'):
    for loc in data['locations']:
        print(f"{loc['name']} - {loc['distance']}")</pre>
            <button onclick="copyCode('python')" class="text-xs text-gray-400 hover:text-white mt-2">
              <span class="gicon" aria-hidden="true">content_copy</span>Copy
            </button>
          </div>
        </div>
        
        <!-- Node.js Example -->
        <div id="example-node" class="hidden">
          <div class="code-bg rounded p-3">
            <pre class="text-gray-300 font-mono text-xs overflow-auto">const axios = require('axios');

const apiKey = 'your_api_key_here';
const url = 'https://developers.pezamw.com/api/locations/';

axios.get(url, {
  headers: { 'X-API-Key': apiKey },
  params: {
    location: 'Lilongwe',
    category: 'hospital',
    radius: 5000
  }
})
.then(response => {
  if (response.data.success) {
    response.data.locations.forEach(loc => {
      console.log(`${loc.name} - ${loc.distance}`);
    });
  }
})
.catch(error => {
  console.error('Error:', error.response?.data);
});</pre>
            <button onclick="copyCode('node')" class="text-xs text-gray-400 hover:text-white mt-2">
              <span class="gicon" aria-hidden="true">content_copy</span>Copy
            </button>
          </div>
        </div>
        
        <!-- cURL Example -->
        <div id="example-curl" class="hidden">
          <div class="code-bg rounded p-3">
            <pre class="text-gray-300 font-mono text-xs overflow-auto">curl -X GET \
  -H "X-API-Key: your_api_key_here" \
  "https://developers.pezamw.com/api/locations/?location=Lilongwe&category=hospital&radius=5000"</pre>
            <button onclick="copyCode('curl')" class="text-xs text-gray-400 hover:text-white mt-2">
              <span class="gicon" aria-hidden="true">content_copy</span>Copy
            </button>
          </div>
        </div>
      </div>
      
      <!-- API Info -->
      <div class="bg-white rounded-lg shadow p-4">
        <h2 class="text-lg font-bold text-gray-900 mb-3">API Information</h2>
        
        <div class="space-y-3 text-sm">
          <div>
            <h4 class="font-medium text-gray-900">Endpoint</h4>
            <p class="text-xs text-gray-600 font-mono break-all">GET /api/locations/</p>
          </div>
          
          <div>
            <h4 class="font-medium text-gray-900">Authentication</h4>
            <p class="text-xs text-gray-600">X-API-Key header required</p>
          </div>
          
          <div>
            <h4 class="font-medium text-gray-900">Required Parameters</h4>
            <ul class="text-xs text-gray-600 list-disc list-inside">
              <li>location (city name)</li>
              <li>category (service type)</li>
            </ul>
          </div>
          
          <div>
            <h4 class="font-medium text-gray-900">Optional</h4>
            <ul class="text-xs text-gray-600 list-disc list-inside">
              <li>radius (default: 5000m)</li>
              <li>limit (max results)</li>
            </ul>
          </div>
          
          <div class="pt-3 border-t">
            <h4 class="font-medium text-gray-900 mb-2">Categories</h4>
            <div class="flex flex-wrap gap-1">
              <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs">hospital</span>
              <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs">clinic</span>
              <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs">pharmacy</span>
              <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs">police</span>
              <span class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs">bank</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
<div id="processingModal" class="processing-modal" role="dialog" aria-modal="true" aria-hidden="true">
  <div class="processing-card">
    <div class="processing-spinner" aria-hidden="true"></div>
    <div class="text-sm font-semibold text-gray-900">Processing location search</div>
    <div class="text-xs text-gray-600 mt-1">Please wait while we query nearby services.</div>
  </div>
</div>

<script>
  let optionalParamsVisible = false;
  function setProcessingModal(isOpen) {
    const modal = document.getElementById('processingModal');
    if (!modal) return;
    modal.classList.toggle('active', isOpen);
    modal.setAttribute('aria-hidden', isOpen ? 'false' : 'true');
  }
  
  document.addEventListener('DOMContentLoaded', () => {
    updateCurlCommand();
    
    document.getElementById('radius').addEventListener('input', function() {
      document.getElementById('radiusValue').textContent = this.value + 'm';
      updateCurlCommand();
    });
    
    ['apiKeySelect', 'location', 'category', 'limit', 'radius'].forEach(id => {
      document.getElementById(id).addEventListener('input', updateCurlCommand);
      document.getElementById(id).addEventListener('change', updateCurlCommand);
    });
  });
  
  function toggleOptionalParams() {
    optionalParamsVisible = !optionalParamsVisible;
    const section = document.getElementById('optionalParams');
    const text = document.getElementById('toggleText');
    const icon = document.getElementById('toggleIcon');
    
    if (optionalParamsVisible) {
      section.classList.remove('hidden');
      text.textContent = 'Hide Options';
      icon.textContent = 'remove';
    } else {
      section.classList.add('hidden');
      text.textContent = 'Show Options';
      icon.textContent = 'add';
    }
  }
  
  function updateCurlCommand() {
    const apiKey = document.getElementById('apiKeySelect').value || 'YOUR_API_KEY';
    const location = document.getElementById('location').value;
    const category = document.getElementById('category').value;
    const limit = document.getElementById('limit').value;
    const radius = document.getElementById('radius').value;
    
    let command = `curl -H "X-API-Key: ${apiKey.substring(0, 20)}..." \\\n  "https://developers.pezamw.com/api/locations/?location=${location}&category=${category}`;
    
    if (parseInt(radius) !== 5000) command += `&radius=${radius}`;
    if (parseInt(limit) !== 20) command += `&limit=${limit}`;
    
    command += '"';
    document.getElementById('curlCommand').textContent = command;
  }
  
  function copyCurlCommand() {
    const apiKey = document.getElementById('apiKeySelect').value || 'YOUR_API_KEY';
    const location = document.getElementById('location').value;
    const category = document.getElementById('category').value;
    const radius = document.getElementById('radius').value;
    const limit = document.getElementById('limit').value;
    
    let command = `curl -H "X-API-Key: ${apiKey}" "https://developers.pezamw.com/api/locations/?location=${location}&category=${category}`;
    if (parseInt(radius) !== 5000) command += `&radius=${radius}`;
    if (parseInt(limit) !== 20) command += `&limit=${limit}`;
    command += '"';
    
    navigator.clipboard.writeText(command)
      .then(() => showNotification('cURL command copied!'));
  }
  
  function selectExample(lang) {
    ['python', 'node', 'curl'].forEach(id => {
      const tab = document.getElementById(`ex-${id}`);
      const example = document.getElementById(`example-${id}`);
      
      if (id === lang) {
        tab.classList.add('tab-active');
        tab.classList.remove('text-gray-600');
        example.classList.remove('hidden');
      } else {
        tab.classList.remove('tab-active');
        tab.classList.add('text-gray-600');
        example.classList.add('hidden');
      }
    });
  }

  function prettyPrint(value) {
    if (typeof value === 'string') return value;
    try {
      return JSON.stringify(value, null, 2);
    } catch (error) {
      return String(value);
    }
  }
  
  function copyCode(lang) {
    const text = document.querySelector(`#example-${lang} pre`).textContent;
    navigator.clipboard.writeText(text)
      .then(() => showNotification('Code copied!'));
  }
  
  async function testAPI() {
    const apiKey = document.getElementById('apiKeySelect').value;
    const location = document.getElementById('location').value.trim();
    const category = document.getElementById('category').value;
    const limit = document.getElementById('limit').value;
    const radius = document.getElementById('radius').value;
    
    if (!apiKey) {
      showNotification('Please select an API key', 'error');
      return;
    }
    
    if (!location) {
      showNotification('Please enter a location', 'error');
      return;
    }
    
    const testButton = document.getElementById('testButton');
    const loading = document.getElementById('loading');
    testButton.disabled = true;
    loading.classList.remove('hidden');
    setProcessingModal(true);
    
    const startTime = Date.now();
    
      try {
      const params = new URLSearchParams({
        location: location,
        category: category,
        limit: limit,
        radius: radius
      });
      
      // Build headers; include playground header for testing keys
      const selectedOption = document.getElementById('apiKeySelect').selectedOptions[0];
      const isTesting = selectedOption && selectedOption.dataset && selectedOption.dataset.testing === 'true';
      const headers = {
        'X-API-Key': apiKey,
        'Accept': 'application/json'
      };

      if (isTesting) {
        // header name must match server setting PLAYGROUND_HEADER; default here is X-ALLOW-TESTING
        headers['X-ALLOW-TESTING'] = '1';
      }

      const response = await fetch(`https://developers.pezamw.com/api/locations/?${params}`, {
        method: 'GET',
        headers: headers
      });
      
      const responseTime = Date.now() - startTime;
      const responseHeaders = {};
      response.headers.forEach((value, key) => {
        responseHeaders[key] = value;
      });
      const contentType = (response.headers.get('content-type') || '').toLowerCase();
      const data = contentType.includes('application/json')
        ? await response.json()
        : await response.text();

      document.getElementById('responseStatusMeta').textContent = `${response.status} ${response.statusText}`;
      document.getElementById('responseDurationMeta').textContent = `${responseTime} ms`;
      document.getElementById('headersOutput').textContent = prettyPrint(responseHeaders);
      document.getElementById('responseOutput').textContent = prettyPrint(data);
      
      if (!response.ok) {
        throw new Error((data && data.error) || `HTTP ${response.status}: ${response.statusText}`);
      }
      
      if (data.success) {
        const locations = data.locations || [];
        displayResults(locations, responseTime, data.query);
        showNotification(`Found ${locations.length} locations in ${responseTime}ms`, 'success');
      } else {
        throw new Error(data.error || 'Unknown error');
      }
      
    } catch (error) {
      console.error('API Error:', error);
      const errorMsg = error.message || 'Failed to fetch data';
      showNotification(errorMsg, 'error');
      document.getElementById('responseStatusMeta').textContent = 'Request error';
      document.getElementById('responseDurationMeta').textContent = '—';
      document.getElementById('headersOutput').textContent = '—';
      document.getElementById('responseOutput').textContent = JSON.stringify({ error: errorMsg }, null, 2);
      
      document.getElementById('resultsContainer').innerHTML = `
        <div class="bg-red-50 border border-red-200 rounded-lg p-4">
          <div class="flex items-start">
            <span class="gicon text-red-500 mt-1 mr-3" aria-hidden="true">error</span>
            <div>
              <h4 class="text-sm font-medium text-red-800 mb-1">Error</h4>
              <p class="text-xs text-red-700">${errorMsg}</p>
              ${errorMsg.includes('timeout') || errorMsg.includes('503') ? 
                '<p class="text-xs text-red-600 mt-2">The external location service (Overpass API) is experiencing issues. Please try again in a few moments.</p>' : ''}
              ${errorMsg.includes('401') || errorMsg.includes('Invalid') ? 
                '<p class="text-xs text-red-600 mt-2">Check that your API key is valid and active.</p>' : ''}
            </div>
          </div>
        </div>
      `;
      document.getElementById('resultCount').textContent = '0 results';
    } finally {
      testButton.disabled = false;
      loading.classList.add('hidden');
      setProcessingModal(false);
    }
  }
  
  function displayResults(locations, responseTime, query) {
    const container = document.getElementById('resultsContainer');
    const countSpan = document.getElementById('resultCount');
    const timeSpan = document.getElementById('responseTime');
    
    countSpan.textContent = `${locations.length} results`;
    timeSpan.textContent = `${responseTime}ms`;
    timeSpan.classList.remove('hidden');
    
    if (locations.length === 0) {
      container.innerHTML = `
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
          <div class="flex items-start">
            <span class="gicon text-yellow-600 mt-1 mr-3" aria-hidden="true">info</span>
            <div>
              <h4 class="text-sm font-medium text-yellow-800">No Results Found</h4>
              <p class="text-xs text-yellow-700 mt-1">No ${query.category} found in ${query.location_source} within ${query.radius_meters}m radius.</p>
              <p class="text-xs text-yellow-600 mt-2">Try increasing the search radius or choosing a different category.</p>
            </div>
          </div>
        </div>
      `;
      return;
    }
    
    let html = '<div class="space-y-3">';
    locations.forEach(loc => {
      html += `
        <div class="result-card bg-white border border-gray-200 rounded-lg p-3">
          <div class="flex justify-between items-start mb-2">
            <div class="flex-1">
              <h3 class="text-sm font-bold text-gray-900">${loc.name || 'Unnamed'}</h3>
              <p class="text-xs text-gray-600 mt-1">
                <span class="gicon" aria-hidden="true">place</span>${loc.address || 'No address'}
              </p>
            </div>
            ${loc.category ? `<span class="px-2 py-1 bg-purple-100 text-purple-800 rounded text-xs ml-2">${loc.category}</span>` : ''}
          </div>
          
          <div class="grid grid-cols-2 gap-2 text-xs mt-2">
            ${loc.distance ? `
            <div class="flex items-center text-gray-700">
              <span class="gicon text-green-600 mr-2" aria-hidden="true">route</span>
              <span>${loc.distance}</span>
            </div>` : ''}
            
            ${loc.phone ? `
            <div class="flex items-center text-gray-700">
              <span class="gicon text-blue-600 mr-2" aria-hidden="true">call</span>
              <span>${loc.phone}</span>
            </div>` : ''}
            
            ${loc.website ? `
            <div class="flex items-center text-gray-700 col-span-2">
              <span class="gicon text-purple-600 mr-2" aria-hidden="true">language</span>
              <a href="${loc.website}" target="_blank" class="text-blue-600 hover:underline truncate">${loc.website}</a>
            </div>` : ''}
            
            ${loc.coordinates ? `
            <div class="flex items-center text-gray-700 col-span-2">
              <span class="gicon text-red-600 mr-2" aria-hidden="true">location_on</span>
              <span class="text-xs">${loc.coordinates.lat.toFixed(4)}, ${loc.coordinates.lon.toFixed(4)}</span>
            </div>` : ''}
          </div>
        </div>
      `;
    });
    html += '</div>';
    
    container.innerHTML = html;
  }
  
  function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 px-4 py-2 rounded-lg shadow-lg z-50 text-sm animate-slideIn ${
      type === 'error' ? 'bg-red-100 text-red-800 border border-red-300' :
      type === 'success' ? 'bg-green-100 text-green-800 border border-green-300' :
      'bg-blue-100 text-blue-800 border border-blue-300'
    }`;
    
    const iconName = type === 'success'
      ? 'check_circle'
      : type === 'error'
        ? 'error'
        : 'info';
    notification.innerHTML = `
      <div class="flex items-center">
        <span class="gicon" aria-hidden="true">${iconName}</span>
        <span>${message}</span>
      </div>
    `;
    
    document.body.appendChild(notification);
    setTimeout(() => notification.remove(), 4000);
  }
</script>

<style>
  @keyframes slideIn {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  .animate-slideIn {
    animation: slideIn 0.3s ease-out;
  }
</style>
{% endblock %}