{% extends "layout.html" %}

{% block title %}View Saved Events - OpenEventDatabase{% endblock %}

{% block css %}
<style>
    #map { 
        position: absolute; 
        top: 0; 
        bottom: 0; 
        width: 100%; 
    }
    
    .map-overlay {
        position: absolute;
        top: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.9);
        margin: 20px;
        padding: 15px;
        width: 300px;
        border-radius: 5px;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .event-list {
        margin-top: 15px;
        max-height: 60vh;
        overflow-y: auto;
    }
    
    .event-item {
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 10px;
    }
    
    .event-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .event-header h3 {
        margin: 0;
        font-size: 16px;
    }
    
    .event-actions {
        display: flex;
        gap: 5px;
    }
    
    .event-details {
        font-size: 14px;
    }
    
    .event-details p {
        margin: 5px 0;
    }
    
    .controls {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }
    
    .no-events {
        padding: 10px;
        background: #f8f8f8;
        border-radius: 4px;
        text-align: center;
        color: #666;
    }
    
    .zoom-btn, .delete-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 5px;
    }
    
    .zoom-btn {
        color: #0078ff;
    }
    
    .delete-btn {
        color: #dc3545;
    }
    
    .danger {
        background-color: #dc3545;
    }
    
    .danger:hover {
        background-color: #c82333;
    }
</style>
{% endblock %}

{% block header %}Your Saved Events{% endblock %}

{% block content %}
<div id="map"></div>

<!-- Hidden OAuth2 configuration for the JavaScript module -->
<input type="hidden" id="osmClientId" value="{{ client_id }}">
<input type="hidden" id="osmClientSecret" value="{{ client_secret }}">
<input type="hidden" id="osmRedirectUri" value="{{ client_redirect }}">

<div class="map-overlay">
    <!-- Authentication section -->
    <div id="auth-section" class="auth-section">
        <h3>OpenStreetMap Authentication</h3>
        <p>Authenticate with your OpenStreetMap account to include your username in reports.</p>
        <a href="https://www.openstreetmap.org/oauth2/authorize?client_id={{ client_id }}&redirect_uri={{ client_redirect }}&response_type=code&scope=read_prefs" class="osm-login-btn">
            <span class="osm-logo"></span>
            Login with OpenStreetMap
        </a>
        <script>
            // Replace server-side auth section with JavaScript-rendered version if available
            document.addEventListener('DOMContentLoaded', function() {
                if (window.osmAuth) {
                    const clientId = document.getElementById('osmClientId').value;
                    const redirectUri = document.getElementById('osmRedirectUri').value;
                    const authSection = document.getElementById('auth-section');
                    
                    // Only replace if osmAuth is loaded and has renderAuthSection method
                    if (osmAuth.renderAuthSection) {
                        authSection.innerHTML = osmAuth.renderAuthSection(clientId, redirectUri);
                    }
                }
            });
        </script>
    </div>
    
    <div id="event-count"></div>
    
    <div id="event-list" class="event-list"></div>
    
    <div class="controls">
        <button id="refresh-btn">
            <i class="fas fa-sync-alt"></i> Refresh
        </button>
        <button id="clear-btn" class="danger">
            <i class="fas fa-trash-alt"></i> Clear All
        </button>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/view_events.js"></script>
{% endblock %}