{% extends "base.html" %}

{% block content %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const defaultTimeCheckbox = document.getElementById('use-default-time');
        const startDateInput = document.getElementById('start-date');
        const endDateInput = document.getElementById('end-date');
        
        // Function to toggle date fields enabled/disabled based on checkbox
        function toggleDateFields() {
            if (defaultTimeCheckbox.checked) {
                startDateInput.disabled = true;
                endDateInput.disabled = true;
            } else {
                startDateInput.disabled = false;
                endDateInput.disabled = false;
            }
        }
        
        // Initial setup
        toggleDateFields();
        
        // Set up event listener
        defaultTimeCheckbox.addEventListener('change', toggleDateFields);
    });
</script>
<h2>Combined VPN Sessions View</h2>

<div class="navigation-links">
    <a href="/" class="nav-link">Back to Log Files</a>
</div>

<div class="api-info">
    <h3>API Endpoints</h3>
    <p>Get combined data via API: <a href="/api/all-entries" target="_blank">/api/all-entries</a></p>
    <p>Filter by gateway: <a href="/api/all-entries?gateway={{ selected_gateway }}" target="_blank">/api/all-entries?gateway={{ selected_gateway }}</a></p>
    <p>Filter by date range: <a href="/api/all-entries?start_date={{ start_date }}&end_date={{ end_date }}" target="_blank">/api/all-entries?start_date={{ start_date }}&end_date={{ end_date }}</a></p>
    <p>Use default time (last 30 min): <a href="/api/all-entries?use_default_time" target="_blank">/api/all-entries?use_default_time</a></p>
    <p>Search: <a href="/api/all-entries?search={{ search_term }}" target="_blank">/api/all-entries?search={{ search_term }}</a></p>
    <p>Combined filters: <a href="/api/all-entries?gateway={{ selected_gateway }}&start_date={{ start_date | replace("T", "T") }}&end_date={{ end_date | replace("T", "T") }}&search={{ search_term }}" target="_blank">/api/all-entries?gateway={{ selected_gateway }}&start_date={{ start_date }}&end_date={{ end_date }}&search={{ search_term }}</a></p>
    <p><small>Note: For API calls, date/time must be in ISO format (YYYY-MM-DDThh:mm:ss)</small></p>
</div>

<div class="filter-section">
    <form method="get" class="filter-form">
        <div class="filter-row">
            <div class="filter-item">
                <label for="gateway-select">Gateway:</label>
                <select id="gateway-select" name="gateway">
                    <option value="">All Gateways</option>
                    {% for gateway in gateways %}
                    <option value="{{ gateway }}" {% if gateway == selected_gateway %}selected{% endif %}>{{ gateway }}</option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="filter-item">
                <label for="start-date">From Date/Time:</label>
                <input type="datetime-local" id="start-date" name="start_date" value="{{ start_date }}" step="60">
            </div>
            
            <div class="filter-item">
                <label for="end-date">To Date/Time:</label>
                <input type="datetime-local" id="end-date" name="end_date" value="{{ end_date }}" step="60">
            </div>
            
            <div class="filter-item">
                <label for="search-input">Search:</label>
                <input type="text" id="search-input" name="search" value="{{ search_term or '' }}" placeholder="Search in all fields...">
            </div>
            
            <div class="filter-item">
                <label for="use-default-time" class="checkbox-label">
                    <input type="checkbox" id="use-default-time" name="use_default_time" {% if not start_date and not end_date %}checked{% endif %}>
                    Use default time range (last 30 min)
                </label>
            </div>
            
            <div class="filter-item">
                <button type="submit" class="filter-button">Apply Filters</button>
                <a href="/combined" class="reset-button">Reset</a>
            </div>
        </div>
    </form>
</div>

<div class="table-responsive">
    <table class="log-table">
        <thead>
            <tr>
                {% for col in columns %}
                <th>
                    {% if col.startswith('_') %}
                        {{ col[1:] | capitalize }}
                    {% else %}
                        {{ col }}
                    {% endif %}
                </th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row in rows %}
            <tr>
                {% for col in columns %}
                <td>
                    {% if col == '_source_file' %}
                        <a href="/view/{{ row[col] }}">{{ row[col] }}</a>
                    {% elif col == '_timestamp' and row[col] %}
                        {{ row[col].strftime('%Y-%m-%d %H:%M:%S UTC') }}
                    {% else %}
                        {% if row[col] is string %}
                            {{ row[col].strip() }}
                        {% elif row[col] is none %}
                            <!-- Empty for None values -->
                        {% else %}
                            {{ row[col] }}
                        {% endif %}
                    {% endif %}
                </td>
                {% endfor %}
            </tr>
            {% else %}
            <tr>
                <td colspan="{{ columns|length }}">No matching logs found</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% endblock %}