{{define "content"}}
<div class="container marketing">
    <h3 class="text-center mb-4">Failed Authentication Attempts</h3>
    
    <div class="mb-3">
        <a href="/@/security" class="btn btn-secondary">&larr; Back to Security Dashboard</a>
    </div>

    <div class="alert alert-warning" role="alert">
        <strong>⚠️ Security Warning:</strong> This system logs attempted passwords for security analysis. 
        <ul class="mb-0 mt-2">
            <li>Ensure this database is encrypted and access is strictly controlled</li>
            <li>Never share or export this data without proper authorization</li>
            <li>Be aware that users may have mistyped legitimate passwords</li>
            <li>Comply with relevant data protection regulations (GDPR, etc.)</li>
        </ul>
    </div>

    <div class="alert alert-info" role="alert">
        <strong>📌 IP Blocking Policy:</strong> Only failed attempts to the admin panel (<code>/@/*</code>) count toward IP blocking. 
        API endpoint failures (like <code>/nic/update</code>) are logged but do NOT trigger automatic IP blocks.
    </div>

    <style>
        /* Alternating yellow shades for API rows */
        .table-warning-light {
            background-color: #fff9e6 !important; /* Lighter yellow */
        }
        
        .table-warning {
            background-color: #fff3cd !important; /* Standard yellow */
        }
        
        /* Tooltip container for positioning */
        .tooltip-container {
            position: relative;
            display: inline-block;
        }
        
        /* Speech bubble tooltip */
        .speech-tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 10px;
            padding: 8px 12px;
            background: #2c3e50;
            color: #fff;
            border-radius: 6px;
            font-size: 13px;
            font-family: 'Courier New', monospace;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s, visibility 0.2s;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        
        /* Password tooltips: single line, auto-width */
        .pwd-btn + .speech-tooltip {
            white-space: nowrap;
            max-width: 90vw; /* Don't exceed viewport */
        }
        
        /* User Agent tooltips: multi-line, 50% table width */
        .ua-btn + .speech-tooltip,
        .ua-btn .speech-tooltip {
            white-space: normal;
            max-width: 50%; /* 50% of container width */
            min-width: 200px;
            word-wrap: break-word;
            text-align: left;
        }
        
        /* Arrow pointing down */
        .speech-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: #2c3e50;
        }
        
        /* Show tooltip when active */
        .speech-tooltip.active {
            opacity: 1;
            visibility: visible;
        }
        
        /* Clickable tooltip styling with cursor */
        .tooltip-btn {
            cursor: pointer;
            transition: all 0.2s;
            border: none;
            background: transparent;
            padding: 2px 6px;
            border-radius: 3px;
            position: relative;
        }
        
        .tooltip-btn:hover {
            background-color: rgba(0,0,0,0.05);
        }
        
        .tooltip-btn.active {
            background-color: #ffc107 !important;
        }
        
        /* User Agent button - make it look clickable */
        .ua-btn {
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .ua-btn:hover {
            background-color: rgba(0,0,0,0.03);
        }
        
        /* Copy feedback animation */
        .copy-feedback {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            background: #28a745;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            white-space: nowrap;
            z-index: 2000;
            animation: fadeInOut 1.5s ease-in-out;
            pointer-events: none;
        }
        
        @keyframes fadeInOut {
            0% { opacity: 0; transform: translateX(-50%) translateY(5px); }
            20% { opacity: 1; transform: translateX(-50%) translateY(0); }
            80% { opacity: 1; transform: translateX(-50%) translateY(0); }
            100% { opacity: 0; transform: translateX(-50%) translateY(-5px); }
        }
        
        /* Truncated text styling */
        .truncated {
            /* No underline - clean look */
        }
    </style>

    <table class="table table-striped" style="font-size: 14px">
        <thead>
            <tr>
                <th>Timestamp</th>
                <th>IP Address</th>
                <th>Username</th>
                <th>Password Attempted</th>
                <th>Path</th>
                <th>User Agent</th>
            </tr>
        </thead>
        <tbody>
            {{range $index, $auth := .failedAuths}}
            {{$isAPI := not (hasPrefix $auth.Path "/@/")}}
            {{$rowClass := ""}}
            {{if $isAPI}}
                {{if eq (mod $index 2) 0}}
                    {{$rowClass = "table-warning"}}
                {{else}}
                    {{$rowClass = "table-warning-light"}}
                {{end}}
            {{end}}
            <tr class="{{$rowClass}}">
                <td>{{$auth.Timestamp.Format "01/02/2006 15:04:05"}}</td>
                <td><code>{{$auth.IPAddress}}</code></td>
                <td>{{if $auth.Username}}<strong>{{$auth.Username}}</strong>{{else}}<em class="text-muted">no credentials</em>{{end}}</td>
                <td>
                    {{if $auth.Password}}
                    <div class="tooltip-container">
                        <button class="btn btn-sm btn-outline-secondary tooltip-btn pwd-btn">👁</button>
                        <div class="speech-tooltip">
                            <code style="color: #ffc107; font-weight: bold;">{{$auth.Password}}</code>
                        </div>
                    </div>
                    {{else}}
                    <em class="text-muted">no password</em>
                    {{end}}
                </td>
                <td>
                    <code>{{$auth.Path}}</code>
                    {{if hasPrefix $auth.Path "/@/"}}
                    <span class="badge badge-danger ml-1">Admin</span>
                    {{else}}
                    <span class="badge badge-secondary ml-1">API</span>
                    {{end}}
                </td>
                <td>
                    {{if $auth.UserAgent}}
                    {{$ua := $auth.UserAgent}}
                    {{if gt (len $ua) 10}}
                    <div class="tooltip-container">
                        <button class="tooltip-btn ua-btn" title="Click to copy">
                            <span class="truncated">{{slice $ua 0 10}}...</span>
                        </button>
                        <div class="speech-tooltip">
                            <span style="color: #fff;">{{$ua}}</span>
                        </div>
                    </div>
                    {{else}}
                    <span class="ua-btn" style="cursor: pointer;" title="Click to copy">{{$ua}}</span>
                    {{end}}
                    {{else}}
                    <em class="text-muted">none</em>
                    {{end}}
                </td>
            </tr>
            {{end}}
        </tbody>
    </table>

    {{if not .failedAuths}}
    <div class="alert alert-success text-center" role="alert">
        <h4 class="alert-heading">No Failed Attempts</h4>
        <p>There are no recorded failed authentication attempts. Excellent!</p>
    </div>
    {{end}}

    <div class="alert alert-info mt-4" role="alert">
        <strong>📋 Note:</strong> Failed authentication records are automatically cleaned up after 30 days.
        IP addresses are blocked after <strong>3 failed ADMIN PANEL attempts</strong> within a 72-hour period and blocked for 7 days.
        <br><strong>API endpoint failures do NOT trigger IP blocking.</strong>
    </div>
</div>

<script>
$(document).ready(function() {
    console.log('Failed auths page JavaScript loaded');
    
    // Helper function to copy text to clipboard
    function copyToClipboard(text, button) {
        // Modern clipboard API
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(function() {
                showCopyFeedback(button, 'Copied!');
            }).catch(function(err) {
                console.error('Failed to copy:', err);
                fallbackCopy(text, button);
            });
        } else {
            // Fallback for older browsers
            fallbackCopy(text, button);
        }
    }
    
    // Fallback copy method
    function fallbackCopy(text, button) {
        var textArea = document.createElement('textarea');
        textArea.value = text;
        textArea.style.position = 'fixed';
        textArea.style.left = '-999999px';
        document.body.appendChild(textArea);
        textArea.select();
        try {
            document.execCommand('copy');
            showCopyFeedback(button, 'Copied!');
        } catch (err) {
            console.error('Fallback copy failed:', err);
            showCopyFeedback(button, 'Copy failed');
        }
        document.body.removeChild(textArea);
    }
    
    // Show copy feedback animation
    function showCopyFeedback(button, message) {
        var feedback = $('<div class="copy-feedback">' + message + '</div>');
        $(button).closest('.tooltip-container, td').append(feedback);
        setTimeout(function() {
            feedback.remove();
        }, 1500);
    }
    
    // Password tooltips: Click to toggle AND copy
    $(document).on('click', '.pwd-btn', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        var button = $(this);
        var tooltip = button.siblings('.speech-tooltip');
        var password = button.closest('.tooltip-container').find('.speech-tooltip code').text();
        
        // Copy password to clipboard
        copyToClipboard(password, button);
        
        // Close all other tooltips first
        $('.speech-tooltip').removeClass('active');
        $('.tooltip-btn').removeClass('active');
        
        // Toggle this one
        if (tooltip.hasClass('active')) {
            tooltip.removeClass('active');
            button.removeClass('active');
        } else {
            tooltip.addClass('active');
            button.addClass('active');
        }
    });
    
    // User Agent tooltips: Hover to show, Click to copy
    $(document).on('mouseenter', '.ua-btn', function() {
        var tooltip = $(this).siblings('.speech-tooltip');
        tooltip.addClass('active');
    });
    
    $(document).on('mouseleave', '.ua-btn', function() {
        var tooltip = $(this).siblings('.speech-tooltip');
        // Small delay to allow moving mouse to tooltip
        setTimeout(function() {
            if (!tooltip.is(':hover')) {
                tooltip.removeClass('active');
            }
        }, 100);
    });
    
    // Click on User Agent to copy
    $(document).on('click', '.ua-btn', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        var button = $(this);
        var userAgent = button.closest('.tooltip-container').find('.speech-tooltip span').text();
        
        // If there's no tooltip (short UA), get text directly
        if (!userAgent) {
            userAgent = button.text().trim();
        }
        
        copyToClipboard(userAgent, button);
    });
    
    // Keep tooltip open if hovering over it
    $(document).on('mouseenter', '.ua-btn + .speech-tooltip', function() {
        $(this).addClass('active');
    });
    
    $(document).on('mouseleave', '.ua-btn + .speech-tooltip', function() {
        $(this).removeClass('active');
    });
    
    // Close password tooltips when clicking anywhere else on page
    $(document).on('click', function(e) {
        if (!$(e.target).closest('.pwd-btn').length) {
            $('.pwd-btn').removeClass('active');
            $('.pwd-btn').siblings('.speech-tooltip').removeClass('active');
        }
    });
    
    console.log('Found', $('.pwd-btn').length, 'password buttons');
    console.log('Found', $('.ua-btn').length, 'user agent buttons');
});
</script>
{{end}}