<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exam Answer Sheet</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
            background-color: #fff;
            color: #2d2f31;
            line-height: 1.6;
        }
        
        /* Navbar */
        .navbar {
            background: #fff;
            border-bottom: 1px solid #d1d7dc;
            padding: 16px 24px;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .navbar-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .navbar-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1c1d1f;
        }
        
        .navbar-links {
            display: flex;
            gap: 24px;
            align-items: center;
        }
        
        .navbar-link {
            color: #1c1d1f;
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 600;
            padding: 8px 0;
            transition: color 0.2s;
        }
        
        .navbar-link:hover {
            color: #5624d0;
        }
        
        .navbar-link.active {
            color: #5624d0;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 24px;
        }
        
        /* Header Section */
        .header {
            background: #fff;
            padding: 0 0 32px 0;
            margin-bottom: 40px;
            border-bottom: 1px solid #d1d7dc;
        }
        
        .header h1 {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: #1c1d1f;
        }
        
        .questions-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }
        
        .questions-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1c1d1f;
        }
        
        .expand-all-btn {
            background: #1c1d1f;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .expand-all-btn:hover {
            background: #3e3f40;
        }
        
        .exam-meta {
            display: flex;
            gap: 32px;
            flex-wrap: wrap;
        }
        
        .meta-item {
            display: flex;
            flex-direction: column;
            padding: 16px;
            border: 1px solid #d1d7dc;
            border-radius: 4px;
            background: #fff;
            min-width: 120px;
        }
        
        .meta-label {
            font-size: 0.875rem;
            color: #6a6f73;
            margin-bottom: 8px;
        }
        
        .meta-value {
            font-size: 1rem;
            font-weight: 600;
            color: #1c1d1f;
        }
        
        .difficulty-badge {
            display: inline-block;
            font-size: 0.875rem;
            font-weight: 600;
            text-transform: capitalize;
            color: #1c1d1f;
        }
        
        /* Question Card */
        .question-card {
            background: #fff;
            padding: 32px;
            margin-bottom: 24px;
            border: 1px solid #d1d7dc;
        }
        
        .question-header {
            margin-bottom: 0;
            padding-bottom: 0;
            cursor: pointer;
            user-select: none;
            display: flex;
            align-items: center;
        }
        
        .question-header.expanded {
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid #d1d7dc;
        }
        
        .question-header:hover {
            opacity: 0.8;
        }
        
        .question-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        
        .question-content.expanded {
            max-height: 10000px;
            transition: max-height 0.5s ease-in;
        }
        
        .expand-icon {
            display: inline-block;
            margin-left: auto;
            font-size: 0.875rem;
            color: #6a6f73;
            transition: transform 0.3s;
            flex-shrink: 0;
        }
        
        .question-header.expanded .expand-icon {
            transform: rotate(90deg);
        }
        
        .question-number {
            display: inline-block;
            background: #1c1d1f;
            color: white;
            width: 32px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            font-size: 0.875rem;
            font-weight: 700;
            margin-right: 12px;
            flex-shrink: 0;
        }
        
        .question-title {
            flex: 1;
            font-size: 1.25rem;
            font-weight: 700;
            color: #1c1d1f;
            line-height: 1.4;
        }
        
        .section {
            margin-bottom: 32px;
        }
        
        .section:last-child {
            margin-bottom: 0;
        }
        
        .section-title {
            font-size: 1rem;
            font-weight: 700;
            color: #1c1d1f;
            margin-bottom: 12px;
        }
        
        .content {
            padding: 20px;
            background: #f7f9fa;
            color: #2d2f31;
        }
        
        .content p {
            margin-bottom: 12px;
        }
        
        .content code {
            background: #f7f9fa;
            color: #1c1d1f;
            padding: 4px 8px;
            border: 1px solid #d1d7dc;
            border-radius: 4px;
            font-family: 'Monaco', 'Courier New', monospace;
            font-size: 0.875rem;
            display: inline-block;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .content code:hover {
            background: #e8e8e8;
        }
        
        .content pre {
            background: #f7f9fa;
            border: 1px solid #d1d7dc;
            border-radius: 4px;
            padding: 16px;
            margin: 16px 0;
            overflow-x: auto;
            position: relative;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .content pre:hover {
            background: #f0f0f0;
        }
        
        .content pre code {
            background: transparent;
            border: none;
            padding: 0;
            display: block;
            white-space: pre;
        }
        
        .copy-message {
            position: absolute;
            top: 8px;
            right: 8px;
            background: #1c1d1f;
            color: white;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            z-index: 10;
        }
        
        .copy-message.show {
            opacity: 1;
        }
        
        /* Performance Data */
        .performance-data {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }
        
        .performance-item {
            padding: 8px 12px;
            background: #f7f9fa;
            border: 1px solid #d1d7dc;
            font-size: 0.875rem;
        }
        
        .performance-label {
            font-weight: 600;
            margin-right: 4px;
            color: #6a6f73;
        }
        
        .performance-value {
            font-family: 'Monaco', 'Courier New', monospace;
            color: #1c1d1f;
        }
        
        /* Error State */
        .error-message {
            background: #fcebea;
            color: #c0392b;
            padding: 24px;
            border-left: 4px solid #c0392b;
            margin: 24px 0;
        }
        
        /* Exam In Progress Message */
        .exam-in-progress-message {
            background: #fff;
            border: 1px solid #d1d7dc;
            border-radius: 4px;
            padding: 48px;
            margin: 40px 0;
            text-align: center;
        }
        
        .exam-in-progress-message h2 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1c1d1f;
            margin-bottom: 16px;
        }
        
        .exam-in-progress-message p {
            font-size: 1rem;
            color: #6a6f73;
            line-height: 1.6;
        }
        
        /* Footer */
        .footer {
            margin-top: 60px;
            padding-top: 24px;
            border-top: 1px solid #d1d7dc;
            text-align: center;
            color: #6a6f73;
            font-size: 0.875rem;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                padding: 24px 16px;
            }
            
            .navbar-content {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
            
            .navbar-links {
                gap: 16px;
            }
            
            .header h1 {
                font-size: 1.5rem;
            }
            
            .question-card {
                padding: 20px;
            }
            
            .question-title {
                font-size: 1.125rem;
            }
            
            .exam-meta {
                gap: 20px;
            }
        }
        
        /* Print Styles */
        @media print {
            .question-card {
                page-break-inside: avoid;
                border: 1px solid #d1d7dc;
            }
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar">
        <div class="navbar-content">
            <div class="navbar-title">Sailor.sh</div>
            <div class="navbar-links">
                <a href="/answer" class="navbar-link active">Answers</a>
                <a href="/result" class="navbar-link">Results</a>
            </div>
        </div>
    </nav>
    
    <div class="container">
        % if exam_in_progress:
        <div class="exam-in-progress-message">
            <h2>Assessment in Progress</h2>
            <p>The answer key is currently unavailable. Please complete your assessment and submit your work to access the detailed solutions and explanations.</p>
        </div>
        % elif error:
        <div class="error-message">
            <strong>Error:</strong> {{error}}
        </div>
        % else:
        
        <!-- Header Section -->
        <div class="header">
            <h1>{{exam_summary.get('name', 'Exam Answer Sheet')}} - Answers</h1>
            <div class="exam-meta">
                <div class="meta-item">
                    <div class="meta-label">Duration</div>
                    <div class="meta-value">{{exam_summary.get('duration', 0)}} minutes</div>
                </div>
                <div class="meta-item">
                    <div class="meta-label">Difficulty</div>
                    <div class="meta-value">
                        <span class="difficulty-badge">
                            {{exam_summary.get('difficulty', 'N/A')}}
                        </span>
                    </div>
                </div>
                <div class="meta-item">
                    <div class="meta-label">Total Marks</div>
                    <div class="meta-value">{{exam_summary.get('total_marks', 0)}}</div>
                </div>
            </div>
        </div>
        
        <!-- Questions Header -->
        <div class="questions-header">
            <h2 class="questions-title">Questions ({{exam_summary.get('number_of_questions', 0)}})</h2>
            <button class="expand-all-btn" id="expandAllBtn">Expand All</button>
        </div>
        
        <!-- Questions Section -->
        % for question in questions:
        <div class="question-card">
            <div class="question-header" data-question-id="{{question['order']}}">
                <div class="question-number">{{question['order']}}</div>
                <h2 class="question-title">{{question['title']}}</h2>
                <span class="expand-icon">▶</span>
            </div>
            
            <div class="question-content" data-question-id="{{question['order']}}">
                <!-- Environment Details Section -->
                % if question.get('performance_data'):
                <div class="section">
                    <div class="section-title">Environment Details</div>
                    <div class="performance-data">
                        <div class="performance-item">
                            <span class="performance-label">Hostname:</span>
                            <span class="performance-value">{{question['performance_data'].get('machine_hostname', 'N/A')}}</span>
                        </div>
                        <div class="performance-item">
                            <span class="performance-label">Namespace:</span>
                            <span class="performance-value">{{question['performance_data'].get('namespace', 'N/A')}}</span>
                        </div>
                    </div>
                </div>
                % end
                
                <!-- Question Section -->
                <div class="section">
                    <div class="section-title">Question</div>
                    <div class="content">
                        {{!question['question']}}
                    </div>
                </div>
                
                <!-- Answer Section -->
                <div class="section">
                    <div class="section-title">Answer & Explanation</div>
                    <div class="content answer-content">
                        {{!question['answer_explanation']}}
                    </div>
                </div>
            </div>
        </div>
        % end
        
        % end
        
        <!-- Footer -->
        <div class="footer">
            All rights reserved sailor.sh
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Handle code blocks (pre elements)
            const codeBlocks = document.querySelectorAll('.content pre');
            
            codeBlocks.forEach(function(block) {
                // Create copy message element
                const copyMessage = document.createElement('div');
                copyMessage.className = 'copy-message';
                copyMessage.textContent = 'Copied to clipboard';
                block.style.position = 'relative';
                block.appendChild(copyMessage);
                
                block.addEventListener('click', function() {
                    const code = block.querySelector('code');
                    const text = code ? code.textContent : block.textContent;
                    
                    // Copy to clipboard
                    navigator.clipboard.writeText(text).then(function() {
                        // Show message
                        copyMessage.classList.add('show');
                        
                        // Hide message after 2 seconds
                        setTimeout(function() {
                            copyMessage.classList.remove('show');
                        }, 2000);
                    }).catch(function(err) {
                        console.error('Failed to copy:', err);
                    });
                });
            });
            
            // Handle inline code elements
            const inlineCodes = document.querySelectorAll('.content code:not(pre code)');
            
            inlineCodes.forEach(function(code) {
                code.style.cursor = 'pointer';
                
                code.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const text = code.textContent;
                    
                    navigator.clipboard.writeText(text).then(function() {
                        // Create temporary message
                        const message = document.createElement('div');
                        message.className = 'copy-message';
                        message.textContent = 'Copied';
                        message.style.position = 'fixed';
                        message.style.top = '20px';
                        message.style.right = '20px';
                        message.style.zIndex = '1000';
                        document.body.appendChild(message);
                        
                        message.classList.add('show');
                        
                        setTimeout(function() {
                            message.classList.remove('show');
                            setTimeout(function() {
                                document.body.removeChild(message);
                            }, 200);
                        }, 2000);
                    }).catch(function(err) {
                        console.error('Failed to copy:', err);
                    });
                });
            });
            
            // Expand/Collapse functionality
            const questionHeaders = document.querySelectorAll('.question-header');
            const questionContents = document.querySelectorAll('.question-content');
            const expandAllBtn = document.getElementById('expandAllBtn');
            let allExpanded = false;
            
            // Initialize all questions as collapsed
            questionContents.forEach(function(content) {
                content.classList.remove('expanded');
            });
            
            // Handle individual question header clicks
            questionHeaders.forEach(function(header) {
                header.addEventListener('click', function() {
                    const questionId = header.getAttribute('data-question-id');
                    const content = document.querySelector('.question-content[data-question-id="' + questionId + '"]');
                    
                    if (content.classList.contains('expanded')) {
                        content.classList.remove('expanded');
                        header.classList.remove('expanded');
                    } else {
                        content.classList.add('expanded');
                        header.classList.add('expanded');
                    }
                    
                    updateExpandAllButton();
                });
            });
            
            // Handle Expand All button
            expandAllBtn.addEventListener('click', function() {
                if (allExpanded) {
                    // Collapse all
                    questionContents.forEach(function(content) {
                        content.classList.remove('expanded');
                    });
                    questionHeaders.forEach(function(header) {
                        header.classList.remove('expanded');
                    });
                    expandAllBtn.textContent = 'Expand All';
                    allExpanded = false;
                } else {
                    // Expand all
                    questionContents.forEach(function(content) {
                        content.classList.add('expanded');
                    });
                    questionHeaders.forEach(function(header) {
                        header.classList.add('expanded');
                    });
                    expandAllBtn.textContent = 'Collapse All';
                    allExpanded = true;
                }
            });
            
            // Update expand all button text based on current state
            function updateExpandAllButton() {
                const expandedCount = document.querySelectorAll('.question-content.expanded').length;
                if (expandedCount === questionContents.length) {
                    expandAllBtn.textContent = 'Collapse All';
                    allExpanded = true;
                } else if (expandedCount === 0) {
                    expandAllBtn.textContent = 'Expand All';
                    allExpanded = false;
                } else {
                    expandAllBtn.textContent = 'Expand All';
                    allExpanded = false;
                }
            }
        });
    </script>
</body>
</html>
