<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ slide_title }} - Finite State Report{% endblock %}</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
        }
        
        .container {
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            border: 1px solid #dee2e6;
            min-height: 100%;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #e9ecef;
        }
        
        .logo-container {
            margin-bottom: 20px;
        }
        
        .company-logo {
            max-height: 50px;
            width: auto;
            margin: 0 auto;
            display: block;
        }
        
        .header h1 {
            color: #2c3e50;
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .header .subtitle {
            color: #6c757d;
            font-size: 1.1em;
        }
        
        .metadata {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 30px;
            font-size: 0.9em;
            color: #6c757d;
        }
        
        .chart-container {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
            border: 1px solid #dee2e6;
        }
        
        .chart-wrapper {
            position: relative;
            height: 400px;
            margin: 20px 0;
        }
        
        .chart-row {
            display: flex;
            margin-bottom: 30px;
        }
        
        .chart-row > * {
            margin-right: 20px;
        }
        
        .chart-row > *:last-child {
            margin-right: 0;
        }
        
        .chart-half {
            flex: 1;
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            border: 1px solid #dee2e6;
        }
        
        .chart-half .chart-wrapper {
            height: 300px;
        }
        
        .table-container {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
            border: 1px solid #dee2e6;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
            min-width: 600px;
            table-layout: fixed;
        }
        
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #dee2e6;
            word-wrap: break-word;
            overflow-wrap: break-word;
            max-width: 300px;
            min-width: 100px;
        }
        
        th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: #495057;
            z-index: 10;
        }
        
        tr:hover {
            background-color: #f8f9fa;
        }
        
        .footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #e9ecef;
            color: #6c757d;
            font-size: 0.9em;
        }
        
        .finite-state-logo {
            color: #007bff;
            font-weight: bold;
        }
        
        @media print {
            body {
                background-color: white;
            }
            
            .container {
                max-width: none;
            }
            
            .chart-container, .chart-half, .table-container {
                border: 1px solid #dee2e6;
            }
        }
        
        /* Add responsive breakpoints for smaller screens */
        
        /* Add JavaScript for resizable columns */
        .resizable {
            position: relative;
        }
        
        .resizable::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: rgba(0, 0, 0, 0.1);
            cursor: col-resize;
        }
        
        .resizable:hover::after {
            background: rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="logo-container">
                <img src="https://finitestate.io/hs-fs/hubfs/FS-Logo-Final-01.png?width=256&height=50&name=FS-Logo-Final-01.png" 
                     alt="Finite State Logo" 
                     class="company-logo">
            </div>
            <h1>{{ slide_title }}</h1>
            <div class="subtitle">Finite State Security Report</div>
        </div>
        
        <div class="metadata">
            <strong>Report:</strong> {{ recipe_name }} | 
            <strong>Period:</strong> {{ start_date }} to {{ end_date }} | 
            <strong>Generated:</strong> {{ generated_at }} | 
            <strong>Records:</strong> {{ metadata.transformed_count }}
            {% if folder_path %} | <strong>Folder:</strong> {{ folder_path }}{% endif %}
            {% if project_filter %} | <strong>Project:</strong> {{ project_filter }}{% endif %}
        </div>
        
        {% block content %}{% endblock %}
        
        <div class="footer">
            <p>Generated by <span class="finite-state-logo">Finite State</span> Security Reporting System</p>
        </div>
    </div>
    
    <script>
        // Make table columns resizable
        document.addEventListener('DOMContentLoaded', function() {
            const tables = document.querySelectorAll('table');
            
            tables.forEach(table => {
                const headers = table.querySelectorAll('th');
                
                headers.forEach((header, index) => {
                    header.classList.add('resizable');
                    
                    let isResizing = false;
                    let startX, startWidth;
                    
                    header.addEventListener('mousedown', function(e) {
                        isResizing = true;
                        startX = e.pageX;
                        startWidth = header.offsetWidth;
                        
                        document.addEventListener('mousemove', handleMouseMove);
                        document.addEventListener('mouseup', handleMouseUp);
                        
                        e.preventDefault();
                    });
                    
                    function handleMouseMove(e) {
                        if (!isResizing) return;
                        
                        const width = startWidth + (e.pageX - startX);
                        if (width > 50) { // Minimum width
                            header.style.width = width + 'px';
                            
                            // Also resize corresponding cells in the column
                            const cells = table.querySelectorAll(`td:nth-child(${index + 1})`);
                            cells.forEach(cell => {
                                cell.style.width = width + 'px';
                            });
                        }
                    }
                    
                    function handleMouseUp() {
                        isResizing = false;
                        document.removeEventListener('mousemove', handleMouseMove);
                        document.removeEventListener('mouseup', handleMouseUp);
                    }
                });
            });
        });
    </script>
</body>
</html>
 