<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{brand_name}} - AI-Agent Testing Report</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #6366F1;
            --primary-light: #818CF8;
            --primary-dark: #4F46E5;
            --secondary-color: #06B6D4;
            --accent-color: #8B5CF6;
            --background-dark: #0F172A;
            --background-card: #1E293B;
            --text-primary: #F8FAFC;
            --text-secondary: #CBD5E1;
            --success-color: #10B981;
            --warning-color: #F59E0B;
            --error-color: #EF4444;
            --border-radius: 12px;
            --glow-color: rgba(99, 102, 241, 0.15);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--background-dark);
            color: var(--text-primary);
            line-height: 1.6;
            padding-top: 40px;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Navigation */
        .fixed-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(8px);
            z-index: 1000;
            padding: 4px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            height: 20px;
        }

        .version {
            position: fixed;
            top: 0;
            right: 0;
            margin: 3px 5px;
            z-index: 1;
            font-size: 0.7rem;
            background: var(--primary-dark);
            padding: 2px 6px;
            border-radius: 4px;
            color: var(--text-primary);
            opacity: 0.8;
          }

          .logo-section {
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            color: inherit;
            transition: opacity 0.2s;
            position: fixed;
        }

        .logo-section:hover {
            opacity: 0.8;
        }

        .checkie-logo, .Checkie-logo {
            height: 20px;
            width: auto;
        }

        .brand-name {
            font-size: 0.9em;
            font-weight: 500;
        }

        .nav-links {
            display: flex;
            gap: 12px;
        }

        .nav-links a {
            color: var(--text-secondary);
            text-decoration: none;
            transition: all 0.2s ease;
            font-size: 0.85em;
            padding: 4px 10px;
            border-radius: 6px;
        }

        .nav-links a:hover {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.05);
        }

        /* Hero Section */
        .hero {
            padding: 40px 0 30px;
            text-align: center;
            background: radial-gradient(circle at 50% 30%, rgba(99, 102, 241, 0.15), transparent 70%),
                        linear-gradient(to bottom, var(--background-dark), rgba(15, 23, 42, 0.95));
            position: relative;
            overflow: hidden;
        }

        /* Add these decorative elements for AI-like styling */
        .hero::before, .hero::after {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            opacity: 0.1;
            filter: blur(80px);
            z-index: -1;
        }

        .hero::before {
            background: var(--primary-color);
            top: -100px;
            left: -100px;
        }

        .hero::after {
            background: var(--secondary-color);
            bottom: -100px;
            right: -100px;
        }

        h1 {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -0.5px;
        }

        .subtitle {
            font-size: 1.25rem;
            color: var(--text-secondary);
            max-width: 800px;
            margin: 0 auto 2rem;
        }

        /* AI-like gradient section dividers */
        section::before {
            content: '';
            display: block;
            height: 1px;
            width: 100%;
            background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
            opacity: 0.3;
            margin-bottom: 40px;
        }

        /* Modern Card Styling */
        .card {
            background: var(--background-card);
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .card:hover {
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            transform: translateY(-2px);
            border-color: rgba(99, 102, 241, 0.2);
        }

        .card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
        }

        /* Custom scrollbar for modern look */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--background-dark);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary-dark);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-color);
        }

        /* Glowing elements for AI-like appearance */
        .glow-effect {
            position: relative;
        }

        .glow-effect::before {
            content: '';
            position: absolute;
            top: -15px;
            left: -15px;
            right: -15px;
            bottom: -15px;
            background: var(--primary-color);
            z-index: -1;
            border-radius: calc(var(--border-radius) + 15px);
            opacity: 0.1;
            filter: blur(30px);
            transition: opacity 0.3s ease;
        }

        .glow-effect:hover::before {
            opacity: 0.2;
        }

        /* Continue with existing styles, but we'll modify them below */
        /* ... existing code ... */
    </style>
</head>
<body>
    <header class="fixed-header">
        <h6 class="version">Ver {{ version }}</h6>
        <div class="container">
            <div class="header-content" style="display:block">
                <a href="{{brand_url}}" target="_blank" class="logo-section">
                    <img src="{{brand_icon}}" alt="{{brand_name}} Logo" class="hero-logo" style="max-height: 30px;">
                    <span class="brand-name">{{brand_name}}</span>
                </a>
                <nav class="nav-links" style="float:right">
                    {% if perform_check %}
                    <a href="#quality-summary">Quality Summary</a>
                    {% else %}
                    <a href="#quality-summary">Title</a>
                    {% endif %}
                    {% if perform_check %}
                    <a href="#issues">Issues</a>
                    {% endif %}
                    {% if run_tests %}
                    <a href="#functional_tests">Functional Tests</a>
                    {% endif %}
                    {% if perform_check %}
                    <a href="#user-feedback">User Feedback</a>
                    {% endif %}
                </nav>
            </div>
        </div>
    </header>
    <header id="quality-summary" class="hero">
        <div class="container">
            <div style="display: flex; align-items: flex-start; gap: 30px; margin-bottom: 20px;">
                {% if perform_check %}
                <div style="flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 10px;">
                    <img src="images/anantha.jpg" alt="Test Manager" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary-color); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);">
                    <div style="text-align: center;">
                        <h3 style="color: var(--text-primary); margin: 0 0 5px 0; font-size: 1.2rem;">Anantha</h3>
                        <p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">Test Manager</p>
                    </div>
                </div>
                {% endif %}
                <div style="flex: 1;">
                    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;">
                        <div style="display: flex; align-items: center;">
                            {% if target_icon_url %}
                            <img src="{{target_icon_url}}" alt="{{target_name}} Icon" style="height: 40px; width: auto; margin-right: 15px;">
                            {% endif %}
                            <h1 class="shimmer" style="margin: 0;">{{target_name}} {{brand_report_headline}}</h1>
                        </div>
                        {% if perform_check %}
                        <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                            {% if issues_per_page %}
                            <div style="background: rgba(99, 102, 241, 0.15); padding: 6px 12px; border-radius: 20px; display: flex; align-items: center; gap: 5px;">
                                <span style="color: var(--text-primary); font-weight: 500; font-size: 0.85rem;">Issues: </span>
                                <span style="color: var(--primary-light); font-weight: 600;">
                                {% with count=0 %}
                                    {% for page_issues in issues_per_page.values %}
                                        {% with issue_count=page_issues|length %}
                                            {% with temp=count|add:issue_count %}
                                                {% if forloop.last %}{{ temp }}{% endif %}
                                            {% endwith %}
                                        {% endwith %}
                                    {% endfor %}
                                {% endwith %}
                                </span>
                            </div>
                            {% endif %}
                            {% if user_feedback_per_page %}
                            <div style="background: rgba(99, 102, 241, 0.15); padding: 6px 12px; border-radius: 20px; display: flex; align-items: center; gap: 5px;">
                                <span style="color: var(--text-primary); font-weight: 500; font-size: 0.85rem;">Feedback: </span>
                                <span style="color: var(--primary-light); font-weight: 600;">
                                {% with count=0 %}
                                    {% for feedback in user_feedback_per_page.values %}
                                        {% with persona_count=feedback.user_persona_feedback|length %}
                                            {% with temp=count|add:persona_count %}
                                                {% if forloop.last %}{{ temp }}{% endif %}
                                            {% endwith %}
                                        {% endwith %}
                                    {% endfor %}
                                {% endwith %}
                                </span>
                            </div>
                            {% endif %}
                            {% if ai_exec_results_per_page %}
                            <div style="background: rgba(99, 102, 241, 0.15); padding: 6px 12px; border-radius: 20px; display: flex; align-items: center; gap: 5px;">
                                <span style="color: var(--text-primary); font-weight: 500; font-size: 0.85rem;">Tests: </span>
                                <span style="color: var(--primary-light); font-weight: 600;">
                                {% with count=0 %}
                                    {% for area_results in ai_exec_results_per_page.values %}
                                        {% for results in area_results.values %}
                                            {% with result_count=results|length %}
                                                {% with temp=count|add:result_count %}
                                                    {% if forloop.parentloop.last and forloop.last %}{{ temp }}{% endif %}
                                                {% endwith %}
                                            {% endwith %}
                                        {% endfor %}
                                    {% endfor %}
                                {% endwith %}
                                </span>
                            </div>
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>

                    {% if perform_check %}
                    <div class="glow-effect">
                        <p class="subtitle" style="text-align: left; white-space: pre-line; font-size: 1em;">{{summary.quality_overview_paragraph}}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% if perform_check %}
            <div class="aspects-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 25px;">
                <div class="card" style="border-left: 4px solid var(--success-color);">
                    <h3 style="color: var(--text-primary); margin-bottom: 15px; font-size: 1.2rem;">Best Aspects</h3>
                    <p style="color: var(--text-secondary);">{{ summary.best_aspects }}</p>
                </div>
                <div class="card" style="border-left: 4px solid var(--error-color);">
                    <h3 style="color: var(--text-primary); margin-bottom: 15px; font-size: 1.2rem;">Areas for Improvement</h3>
                    <p style="color: var(--text-secondary);">{{ summary.worst_aspects }}</p>
                </div>
            </div>
            {% endif %}
        </div>
    </header>
    {% if perform_check %}
    <section class="quality-summary">
        <div class="container">
            <div class="container">
                <div class="quality-details">
                    <div class="card glow-effect" style="padding: 25px; margin-bottom: 30px;">
                        <h3 style="color: var(--primary-color); margin-bottom: 20px; font-size: 1.3rem;">Key Suggestions</h3>
                        <ul style="list-style-position: outside; padding-left: 20px; margin-bottom: 20px; color: var(--text-secondary);">
                            {% for suggestion in summary.suggestions %}
                            <li style="margin-bottom: 12px; position: relative; padding-left: 5px;">
                                <span style="color: var(--primary-light);">{{ suggestion }}</span>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {% endif %}
    {% if perform_check %}
    <section id="issues" class="Issues">
        <div class="container">
            {% for page_name, page_issues in issues_per_page.items %}
            <div class="page-issues" style="margin-bottom: 50px; position: relative;">
                <div class="page-header" style="display: flex; gap: 20px; margin-bottom: 30px; align-items: flex-start;">
                    <div style="position: relative; flex-shrink: 0; width: 200px; height: 200px; overflow: hidden; border-radius: 12px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1);">
                        <img src="{{ page_issues.0.screenshot_url }}"

                             alt="{{ page_name }} Screenshot"

                             class="page-screenshot"
                             onclick="openModal(this.src)"
                             style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;">
                        <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); pointer-events: none;"></div>
                    </div>
                    <div class="page-header-content" style="flex: 1;">
                        {% if forloop.first %}
                        <h2 style="font-size: 2rem; margin-bottom: 1rem; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Issues Found by AI Testers</h2>
                        {% endif %}
                        <h3 style="font-size: 1.8rem; margin-bottom: 15px; color: var(--text-primary);">{{ page_name }}</h3>
                        <p style="color: var(--text-secondary); margin-bottom: 10px;">This page contains {{ page_issues|length }} issue{% if page_issues|length != 1 %}s{% endif %} detected by our AI testers.</p>

                        {% for page_name_inner, page_info in page_data_per_page.items %}
                        {% if page_name_inner == page_name %}
                        <div style="margin-bottom: 10px;">
                            <div style="padding: 6px 10px; background: rgba(0, 0, 0, 0.3); border-radius: 6px; backdrop-filter: blur(4px); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 5px;">
                                <span style="font-size: 1em; font-weight: 600; color: var(--primary-color);">{{ page_info.load_time|floatformat:2 }}</span>
                                <span style="color: var(--text-secondary); font-size: 0.8em;">seconds load time</span>
                            </div>
                        </div>
                        <p style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 5px;">
                            <a href="{{ page_info.url }}" target="_blank" style="color: var(--primary-light); text-decoration: none; transition: color 0.2s ease; font-size: 0.9em;">{{ page_info.url }}</a>
                        </p>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>
                <div style="padding-bottom: 20px;">
                    <div style="display: flex; flex-direction: column; gap: 20px; padding: 10px 5px;">
                        {% for issue in page_issues %}
                        <div class="card glow-effect" style="width: 100%; max-width: 1000px; margin: 0 auto 20px; padding: 20px; border-left: 4px solid var(--primary-color);">
                            <div style="display: flex; gap: 15px; margin-bottom: 20px; align-items: center;">
                                <img src="{{issue.image_url}}"

                                     alt="{{ issue.tester }}'s profile"
                                     style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-color); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
                                <div>
                                    <h4 style="color: var(--text-primary); margin: 0 0 5px 0; font-size: 1.2rem;">{{ issue.tester | capfirst }}</h4>
                                    <p style="color: var(--text-secondary); margin: 0; font-size: 0.85rem;">{{ issue.byline }}</p>
                                </div>
                            </div>
                            <h4 style="color: var(--text-primary); margin: 0 0 15px 0; font-size: 1.3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 10px;">{{ issue.bug_title }}</h4>
                            <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px;">
                                <div style="background: rgba(99, 102, 241, 0.15); padding: 6px 12px; border-radius: 20px; display: flex; align-items: center; gap: 5px;">
                                    <span style="color: var(--text-primary); font-weight: 500; font-size: 0.85rem;">Priority: </span>
                                    <span style="color: {% if issue.bug_priority > 7 %}var(--error-color){% elif issue.bug_priority > 4 %}var(--warning-color){% else %}var(--success-color){% endif %}; font-weight: 600;">{{ issue.bug_priority }}/10</span>
                                </div>
                                <div style="background: rgba(99, 102, 241, 0.15); padding: 6px 12px; border-radius: 20px; display: flex; align-items: center; gap: 5px;">
                                    <span style="color: var(--text-primary); font-weight: 500; font-size: 0.85rem;">Confidence: </span>
                                    <span style="color: {% if issue.bug_confidence > 7 %}var(--success-color){% elif issue.bug_confidence > 4 %}var(--warning-color){% else %}var(--error-color){% endif %}; font-weight: 600;">{{ issue.bug_confidence }}/10</span>
                                </div>
                                {% for type in issue.bug_type %}
                                <div style="background: rgba(255, 255, 255, 0.05); padding: 6px 12px; border-radius: 20px; backdrop-filter: blur(4px);">
                                    <span style="color: var(--text-secondary); font-size: 0.85rem;">{{ type }}</span>
                                </div>
                                {% endfor %}
                            </div>
                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 20px;">
                                <div>
                                    <h5 style="color: var(--primary-light); margin: 0 0 10px 0; font-size: 1rem; font-weight: 600;">Why is this a bug?</h5>
                                    <p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">{{ issue.bug_reasoning_why_a_bug }}</p>
                                </div>
                                <div>
                                    <h5 style="color: var(--primary-light); margin: 0 0 10px 0; font-size: 1rem; font-weight: 600;">Suggested Fix</h5>
                                    <p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">{{ issue.suggested_fix }}</p>
                                </div>
                            </div>
                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
                                <div>
                                    <h5 style="color: var(--primary-light); margin: 0 0 10px 0; font-size: 1rem; font-weight: 600;">Why Fix This?</h5>
                                    <p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">{{ issue.bug_why_fix }}</p>
                                </div>
                                <div>
                                    <h5 style="color: var(--primary-light); margin: 0 0 10px 0; font-size: 1rem; font-weight: 600;">Route To</h5>
                                    <p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">{{ issue.what_type_of_engineer_to_route_issue_to }}</p>
                                </div>
                            </div>
                            {% if issue.possibly_relevant_network_call or issue.possibly_relevant_console_text %}
                            <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1);">
                                {% if issue.possibly_relevant_network_call %}
                                <div style="margin-bottom: 15px;">
                                    <h5 style="color: var(--primary-light); margin: 0 0 10px 0; font-size: 1rem; font-weight: 600;">Relevant Network Call</h5>
                                    <div style="background: rgba(0, 0, 0, 0.2); padding: 10px; border-radius: 8px; overflow-x: auto; position: relative;">
                                        <pre style="color: var(--text-primary); margin: 0; font-size: 0.85rem; font-family: monospace; white-space: pre-wrap; word-break: break-all;">{{ issue.possibly_relevant_network_call }}</pre>
                                    </div>
                                </div>
                                {% endif %}
                                {% if issue.possibly_relevant_console_text %}
                                <div>
                                    <h5 style="color: var(--primary-light); margin: 0 0 10px 0; font-size: 1rem; font-weight: 600;">Console Output</h5>
                                    <div style="background: rgba(0, 0, 0, 0.2); padding: 10px; border-radius: 8px; overflow-x: auto; position: relative;">
                                        <pre style="color: var(--text-primary); margin: 0; font-size: 0.85rem; font-family: monospace; white-space: pre-wrap; word-break: break-all;">{{ issue.possibly_relevant_console_text }}</pre>
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                            {% endif %}
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <!-- Removed scroll indicator as it's no longer needed -->
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}
    {% if run_tests %}
    <section id="functional_tests" class="Issues">
        <div class="container">
            <h2 style="font-size: 2.5rem; margin-bottom: 2rem; text-align: center; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">AI Generated Functional Test Results</h2>
            {% for page_name, ai_exec_results in ai_exec_results_per_page.items %}
            <div class="page-issues" style="margin-bottom: 50px;">
                <h3 style="font-size: 1.8rem; margin-bottom: 20px; color: var(--text-primary); padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);">Start Page: {{ page_name }}</h3>
                {% for area, results in ai_exec_results.items %}
                <div class="card glow-effect" style="margin-bottom: 40px; padding: 20px;">
                    <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 20px;">
                        {% with area|lower as area_lower %}
                            {% if area_lower == 'edge' %}
                                {% with 'samantha' as agent_name %}
                                <img src="images/{{ agent_name }}.jpg" alt="{{ agent_name }}" style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary-color); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);">
                                <div>
                                    <span style="font-weight: 600; color: var(--text-primary); font-size: 1.2rem;">{{ agent_name|title }}</span>
                                    <span style="font-size: 0.9rem; color: var(--text-secondary); display: block;">{{ area|title }} Testing Specialist</span>
                                </div>
                                {% endwith %}
                            {% elif area_lower == 'interesting' %}
                                {% with 'zara' as agent_name %}
                                <img src="images/{{ agent_name }}.jpg" alt="{{ agent_name }}" style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary-color); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);">
                                <div>
                                    <span style="font-weight: 600; color: var(--text-primary); font-size: 1.2rem;">{{ agent_name|title }}</span>
                                    <span style="font-size: 0.9rem; color: var(--text-secondary); display: block;">{{ area|title }} Testing Specialist</span>
                                </div>
                                {% endwith %}
                            {% elif area_lower == 'basic' %}
                                {% with 'ravi' as agent_name %}
                                <img src="images/{{ agent_name }}.jpg" alt="{{ agent_name }}" style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary-color); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);">
                                <div>
                                    <span style="font-weight: 600; color: var(--text-primary); font-size: 1.2rem;">{{ agent_name|title }}</span>
                                    <span style="font-size: 0.9rem; color: var(--text-secondary); display: block;">{{ area|title }} Testing Specialist</span>
                                </div>
                                {% endwith %}
                            {% elif area_lower == 'ai_unique' %}
                                {% with 'richard' as agent_name %}
                                <img src="images/{{ agent_name }}.jpg" alt="{{ agent_name }}" style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary-color); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);">
                                <div>
                                    <span style="font-weight: 600; color: var(--text-primary); font-size: 1.2rem;">{{ agent_name|title }}</span>
                                    <span style="font-size: 0.9rem; color: var(--text-secondary); display: block;">{{ area|title }} Testing Specialist</span>
                                </div>
                                {% endwith %}
                            {% elif area_lower == 'search' %}
                                {% with 'jason' as agent_name %}
                                <img src="images/{{ agent_name }}.jpg" alt="{{ agent_name }}" style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary-color); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);">
                                <div>
                                    <span style="font-weight: 600; color: var(--text-primary); font-size: 1.2rem;">{{ agent_name|title }}</span>
                                    <span style="font-size: 0.9rem; color: var(--text-secondary); display: block;">{{ area|title }} Testing Specialist</span>
                                </div>
                                {% endwith %}
                            {% elif area_lower == 'forms' %}
                                {% with 'carlos' as agent_name %}
                                <img src="images/{{ agent_name }}.jpg" alt="{{ agent_name }}" style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary-color); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);">
                                <div>
                                    <span style="font-weight: 600; color: var(--text-primary); font-size: 1.2rem;">{{ agent_name|title }}</span>
                                    <span style="font-size: 0.9rem; color: var(--text-secondary); display: block;">{{ area|title }} Testing Specialist</span>
                                </div>
                                {% endwith %}
                            {% else %}
                                {% with 'aiden' as agent_name %}
                                <img src="images/{{ agent_name }}.jpg" alt="{{ agent_name }}" style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary-color); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);">
                                <div>
                                    <span style="font-weight: 600; color: var(--text-primary); font-size: 1.2rem;">{{ agent_name|title }}</span>
                                    <span style="font-size: 0.9rem; color: var(--text-secondary); display: block;">{{ area|title }} Testing Specialist</span>
                                </div>
                                {% endwith %}
                            {% endif %}
                        {% endwith %}
                    </div>
                    {% for result in results %}
                    <div class="test-execution" data-execution-area="{{ area }}" data-execution-index="{{ forloop.counter }}" style="position: relative; padding: 25px; border-radius: 12px; margin-bottom: 30px; background: rgba(30, 41, 59, 0.5); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);">
                        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
                            <h4 style="font-weight: 700; font-size: 1.3rem; display: flex; align-items: center;
                                  {% if result.test_passed %}
                                  color: var(--success-color);
                                  {% else %}
                                  color: var(--warning-color);
                                  {% endif %}">
                                {% if result.test_passed %}
                                <span style="margin-right: 10px; font-size: 1.2rem;">✓</span>
                                {% else %}
                                <span style="margin-right: 10px; font-size: 1.2rem;">⚠</span>
                                {% endif %}
                                {{ result.test_name }}
                            </h4>
                            <div style="padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; background: {% if result.test_passed %}rgba(16, 185, 129, 0.15){% else %}rgba(245, 158, 11, 0.15){% endif %}; color: {% if result.test_passed %}var(--success-color){% else %}var(--warning-color){% endif %};">
                                {% if result.test_passed %}Passed{% else %}Failed{% endif %}
                            </div>
                        </div>
                        <p style="color: var(--text-secondary); margin-bottom: 25px; font-size: 0.95rem; line-height: 1.6;">{{ result.test_description }}</p>
                        <div class="test-steps" style="display: flex; flex-direction: row; width: 100%; gap: 20px; margin: 20px 0; overflow-x: auto; scroll-behavior: smooth; position: relative; padding: 15px; background: linear-gradient(to bottom, rgba(42, 47, 69, 0.4), rgba(15, 23, 42, 0.4)); border-radius: 12px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 30px; backdrop-filter: blur(5px);">
                            {% for step in result.test_steps %}
                            <div class="test-step" id="step-{{ forloop.parentloop.counter }}-{{ forloop.counter }}"

                                    data-step-index="{{ forloop.counter }}"
                                    data-test-index="{{ forloop.parentloop.counter }}"
                                    data-reasoning='{"page_summary": "{{ step.step_reasoning.page_summary|escapejs }}", "reasoning": "{{ step.step_reasoning.reasoning|escapejs }}", "next_step": "{{ step.step_reasoning.next_step|escapejs }}"}' style="margin: 10px; position: relative; flex: 0 0 auto; transition: transform 0.3s ease, filter 0.3s ease; filter: grayscale(100%);">
                                <div style="position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 4px solid transparent; cursor: pointer;" onclick="goToStep({{ forloop.parentloop.counter }}, {{ forloop.counter }}, '{{ area }}')">
                                    <img src="{{ step.step_image_path }}"

                                        style="max-height: 200px; width: auto; object-fit: contain; display: block; transform: scale(1); transition: transform 0.3s ease;"
                                        alt="Test Step Screenshot"

                                        class="step-screenshot">
                                    <div style="position: absolute; top: 10px; right: 10px; background-color: rgba(0, 0, 0, 0.6); color: white; font-size: 24px; font-weight: bold; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px);">
                                        {{ forloop.counter }}
                                    </div>
                                    <div class="expand-icon" onclick="event.stopPropagation(); openModal(this.parentNode.querySelector('img').src)" style="position: absolute; bottom: 10px; right: 10px; background-color: rgba(0, 0, 0, 0.6); color: white; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(2px); transition: all 0.2s ease;">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <circle cx="11" cy="11" r="8"></circle>
                                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                                            <line x1="11" y1="8" x2="11" y2="14"></line>
                                            <line x1="8" y1="11" x2="14" y2="11"></line>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="step-reasoning-container" style="margin: 15px 0; background: rgba(30, 41, 59, 0.5); border-radius: 10px; padding: 20px; font-size: 0.9em; color: var(--text-secondary); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.05);">
                            <h5 style="margin: 0 0 15px 0; font-size: 1.1em; color: var(--primary-light); font-weight: 600;">Step Details</h5>
                            <div id="reasoning-content-{{ forloop.counter }}" class="reasoning-content">
                                <!-- Reasoning content will be loaded here by JavaScript -->
                                <p style="font-style: italic; color: var(--text-secondary);">Select a step to view details</p>
                            </div>
                        </div>
                        <div class="step-controls" style="display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 20px;">
                            <button class="step-control prev-step" onclick="moveStep({{ forloop.counter }}, -1, '{{ area }}')" style="background: rgba(30, 41, 59, 0.7); border: none; color: var(--text-primary); width: 45px; height: 45px; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.05);">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="15 18 9 12 15 6"></polyline>
                                </svg>
                            </button>
                            <button class="play-pause-button" onclick="toggleAutoScroll({{ forloop.counter }}, '{{ area }}')" data-playing="false" style="background: var(--primary-dark); border: none; color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polygon points="5 3 19 12 5 21 5 3"></polygon>
                                </svg>
                            </button>
                            <button class="step-control next-step" onclick="moveStep({{ forloop.counter }}, 1, '{{ area }}')" style="background: rgba(30, 41, 59, 0.7); border: none; color: var(--text-primary); width: 45px; height: 45px; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.05);">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="9 18 15 12 9 6"></polyline>
                                </svg>
                            </button>
                        </div>
                        <div class="step-indicator" id="indicator-{{ forloop.parentloop.counter }}" style="display: flex; justify-content: center; gap: 8px; margin-top: 15px;">
                            {% for step in result.test_steps %}
                            <div class="step-dot" onclick="goToStep({{ forloop.parentloop.counter }}, {{ forloop.counter }}, '{{ area }}')" style="width: 10px; height: 10px; border-radius: 50%; background: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; opacity: 0.4;"></div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% endfor %}
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}
    {% if perform_check %}
    <section id="user-feedback" class="user-feedback">
        <div class="container">
            {% for page_name, feedback in user_feedback_per_page.items %}
            <div class="page-feedback" style="margin-bottom: 40px; position: relative;">
                <div class="page-header" style="display: flex; gap: 20px; margin-bottom: 30px; align-items: center;">
                    <div style="position: relative; flex-shrink: 0; width: 200px; height: 200px; overflow: hidden; border-radius: 12px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1);">
                        <img src="{{ feedback.screenshot_url }}"

                             alt="{{ page_name }} Screenshot"

                             onclick="openModal(this.src)"
                             style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; cursor: pointer;">
                        <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); pointer-events: none;"></div>
                    </div>
                    <div class="page-header-content" style="flex: 1;">
                        {% if forloop.first %}
                        <h2 style="font-size: 2rem; margin-bottom: 1rem; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">User Persona Feedback</h2>
                        {% endif %}
                        <h3 style="font-size: 1.8rem; margin-bottom: 15px; color: var(--text-primary);">{{ page_name }}</h3>
                        <div style="display: flex; gap: 8px; margin-bottom: 15px; flex-wrap: wrap;">
                            {% for persona in feedback.user_persona_feedback %}
                            <div style="position: relative; width: 50px; height: 50px;">
                                <img src="{{ persona.image_url }}"

                                     alt="{{ persona.name }}'s profile"
                                     style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-color); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);">
                                <span style="position: absolute; top: -5px; right: -5px; background: var(--primary-color); color: white; padding: 2px 4px; border-radius: 4px; font-size: 0.6em; font-weight: 600;">AI</span>
                            </div>
                            {% endfor %}
                        </div>
                        <p style="color: var(--text-secondary); font-size: 1em; line-height: 1.6;">{{ feedback.overall_purpose_of_page }}</p>
                    </div>
                </div>
                <div class="card glow-effect" style="margin-bottom: 40px; padding: 25px;">
                    <h3 style="color: var(--primary-color); margin-bottom: 20px; font-size: 1.4rem; text-align: center;">Overall Metrics</h3>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
                        <div style="padding: 15px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05);">
                            <h4 style="color: var(--text-primary); margin: 0 0 10px 0; font-size: 1.1rem;">Overall Score</h4>
                            <div style="display: flex; gap: 5px; margin-bottom: 10px;">
                                {% with ''|ljust:5 as range %}
                                {% for _ in range %}
                                <span style="font-size: 1.5em; color: {% if forloop.counter <= feedback.overall_score %}var(--warning-color){% else %}rgba(255, 255, 255, 0.1){% endif %}; line-height: 1;">★</span>
                                {% endfor %}
                                {% endwith %}
                            </div>
                            <p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">{{ feedback.overall_feedback_summary }}</p>
                        </div>
                        <div style="padding: 15px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05);">
                            <h4 style="color: var(--text-primary); margin: 0 0 10px 0; font-size: 1.1rem;">Visual Design</h4>
                            <div style="display: flex; gap: 5px; margin-bottom: 10px;">
                                {% with ''|ljust:5 as range %}
                                {% for _ in range %}
                                <span style="font-size: 1.5em; color: {% if forloop.counter <= feedback.overall_visual_score %}var(--warning-color){% else %}rgba(255, 255, 255, 0.1){% endif %}; line-height: 1;">★</span>
                                {% endfor %}
                                {% endwith %}
                            </div>
                            <p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">{{ feedback.overall_visual_comments }}</p>
                        </div>
                        <div style="padding: 15px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05);">
                            <h4 style="color: var(--text-primary); margin: 0 0 10px 0; font-size: 1.1rem;">Usability</h4>
                            <div style="display: flex; gap: 5px; margin-bottom: 10px;">
                                {% with ''|ljust:5 as range %}
                                {% for _ in range %}
                                <span style="font-size: 1.5em; color: {% if forloop.counter <= feedback.overall_usability_score %}var(--warning-color){% else %}rgba(255, 255, 255, 0.1){% endif %}; line-height: 1;">★</span>
                                {% endfor %}
                                {% endwith %}
                            </div>
                            <p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">{{ feedback.overall_usability_comments }}</p>
                        </div>
                        <div style="padding: 15px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05);">
                            <h4 style="color: var(--text-primary); margin: 0 0 10px 0; font-size: 1.1rem;">Content Quality</h4>
                            <div style="display: flex; gap: 5px; margin-bottom: 10px;">
                                {% with ''|ljust:5 as range %}
                                {% for _ in range %}
                                <span style="font-size: 1.5em; color: {% if forloop.counter <= feedback.overall_content_score %}var(--warning-color){% else %}rgba(255, 255, 255, 0.1){% endif %}; line-height: 1;">★</span>
                                {% endfor %}
                                {% endwith %}
                            </div>
                            <p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">{{ feedback.overall_content_comments }}</p>
                        </div>
                    </div>
                </div>
                <div style="padding-bottom: 20px;">
                    <div style="display: flex; flex-direction: column; gap: 15px; padding: 10px 5px;">
                        {% for persona in feedback.user_persona_feedback %}
                        <div class="card glow-effect" style="width: 100%; max-width: 800px; margin: 0 auto 10px; position: relative; overflow: hidden; padding: 15px;">
                            <div style="display: flex; gap: 15px; margin-bottom: 15px; align-items: center;">
                                <div style="position: relative; flex-shrink: 0;">
                                    <img src="{{ persona.image_url }}"

                                         alt="{{ persona.name }}'s profile"
                                         style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-color); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);">
                                </div>
                                <div>
                                    <h4 style="color: var(--text-primary); margin: 0 0 3px 0; font-size: 1.1rem;">{{ persona.name }}, {{ persona.age }}</h4>
                                    <div style="display: flex; gap: 3px; margin-bottom: 5px;">
                                        {% with ''|ljust:5 as range %}
                                        {% for _ in range %}
                                        <span style="font-size: 1em; color: {% if forloop.counter <= persona.persona_score %}var(--warning-color){% else %}rgba(255, 255, 255, 0.1){% endif %}; line-height: 1;">★</span>
                                        {% endfor %}
                                        {% endwith %}
                                    </div>
                                </div>
                            </div>
                            <div style="margin-bottom: 15px;">
                                <p style="color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; margin: 0 0 10px 0;">{{ persona.persona_bio }}</p>
                                <p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem; line-height: 1.5;">{{ persona.biography }}</p>
                                <p style="font-style: italic; color: var(--text-secondary); margin: 10px 0 0 0; padding: 10px; background: rgba(255, 255, 255, 0.03); border-radius: 6px; font-size: 0.9rem; line-height: 1.5; border-left: 3px solid var(--primary-color);">{{ persona.persona_feedback_summary }}</p>
                            </div>
                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
                                <div>
                                    <h5 style="color: var(--primary-light); margin: 0 0 10px 0; font-size: 0.9rem; font-weight: 600;">Actions</h5>
                                    <ul style="list-style: none; padding: 0; margin: 0;">
                                        {% for action in persona.page_actions %}
                                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative; color: var(--text-secondary); font-size: 0.85rem;">
                                            <span style="position: absolute; left: 0; top: 2px; color: var(--primary-color);">→</span>
                                            {{ action }}
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div>
                                    <h5 style="color: var(--primary-light); margin: 0 0 10px 0; font-size: 0.9rem; font-weight: 600;">Suggestions</h5>
                                    <ul style="list-style: none; padding: 0; margin: 0;">
                                        {% for suggestion in persona.persona_suggestions %}
                                        <li style="margin-bottom: 8px; padding-left: 20px; position: relative; color: var(--text-secondary); font-size: 0.85rem;">
                                            <span style="position: absolute; left: 0; top: 2px; color: var(--accent-color);">•</span>
                                            {{ suggestion }}
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}
    <div id="imageModal" class="modal">
        <span class="modal-close" style="color: white; font-size: 35px; position: absolute; right: 25px; top: 15px; cursor: pointer; z-index: 1100; text-shadow: 0 0 10px rgba(0,0,0,0.5);">&times;</span>
        <img class="modal-content" id="modalImage" style="max-width: 90%; max-height: 90vh; margin: auto; display: block; position: relative; top: 50%; transform: translateY(-50%); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);">
    </div>
    <section class="cta-section" style="text-align: center; padding: 60px 0; position: relative; overflow: hidden;">
        <!-- Add decorative elements -->
        <div style="position: absolute; width: 400px; height: 400px; border-radius: 50%; background: var(--primary-color); filter: blur(150px); opacity: 0.04; top: -200px; left: -200px; z-index: -1;"></div>
        <div style="position: absolute; width: 300px; height: 300px; border-radius: 50%; background: var(--secondary-color); filter: blur(120px); opacity: 0.05; bottom: -150px; right: -150px; z-index: -1;"></div>

        <div class="container">
            <button class="print-button" onclick="window.print()" style="background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white; border: none; padding: 14px 28px; border-radius: 12px; font-size: 1.1em; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3); position: relative; overflow: hidden;">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
                </svg>
                Print Report
                <span style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform: translateX(-100%); animation: shimmerButton 2s infinite;"></span>
            </button>
        </div>
    </section>
    <footer style="background-color: var(--background-dark); padding: 40px 0 20px; position: relative; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.05);">
        <!-- Add decorative elements -->
        <div style="position: absolute; width: 200px; height: 200px; border-radius: 50%; background: var(--primary-color); filter: blur(100px); opacity: 0.03; bottom: -100px; left: 15%; z-index: -1;"></div>

        <div class="container">
            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;">
                <div style="display: flex; align-items: center; gap: 15px;">
                    <img src="{{brand_icon}}" alt="{{brand_name}} Logo" style="height: 30px; width: auto;">
                    <p style="color: var(--text-secondary); font-size: 1rem; font-weight: 500; margin: 0;">{{brand_name}}</p>
                </div>
                <p style="color: var(--text-secondary); font-size: 0.9rem; opacity: 0.8; text-align: center; margin: 0;">&copy; 2025 {{brand_name}}. All rights reserved.</p>
                <div style="margin-top: 10px; font-size: 0.8rem; color: var(--text-secondary); opacity: 0.6; text-align: center;">
                    <p>Generated with AI-powered testing technology.</p>
                </div>
            </div>
        </div>
    </footer>
    <style>
        /* Add keyframes for shimmer effects */
        @keyframes shimmerButton {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }
        /* Modal styling */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(5px);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal.active {
            display: block;
            opacity: 1;
        }

        /* Print styles */
        @media print {
            .fixed-header, .cta-section, .step-controls, .modal, .step-indicator {
                display: none !important;
            }

            body {
                background: white;
                color: black;
                font-size: 12pt;
            }

            .container {
                max-width: 100%;
                width: 100%;
            }

            .card, .test-execution, .step-reasoning-container {
                box-shadow: none !important;
                border: 1px solid #ddd !important;
                background: white !important;
                color: black !important;
                page-break-inside: avoid;
            }

            h1, h2, h3, h4, h5, h6 {
                color: black !important;
                background: none !important;
                -webkit-text-fill-color: black !important;
                page-break-after: avoid;
            }

            p, li {
                color: #333 !important;
            }

            section {
                page-break-before: always;
            }

            /* Force background colors to print */
            * {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                color-adjust: exact !important;
            }
        }
    </style>

    <script>
        <!--
        // Store test data for JavaScript access
        window.testData = [
            {% for result in results %}
            {
                steps: [
                    {% for step in result.test_steps %}
                    {
                        step_reasoning: {
                            page_summary: "{{ step.step_reasoning.page_summary|escapejs }}",
                            reasoning: "{{ step.step_reasoning.reasoning|escapejs }}",
                            next_step: "{{ step.step_reasoning.next_step|escapejs }}"
                        }
                    }{% if not forloop.last %},{% endif %}
                    {% endfor %}
                ]
            }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ];
        -->

        {% if report_auto_download %}
        // Auto-download summary.json on page load
        document.addEventListener('DOMContentLoaded', function() {
          // Create a Blob with the JSON data
          const jsonData = JSON.stringify({
            grade: "{{summary.letter_grade}}",
            quality_overview: "{{summary.quality_overview_paragraph|escapejs}}",
            best_aspects: "{{summary.best_aspects|escapejs}}",
            worst_aspects: "{{summary.worst_aspects|escapejs}}",
            suggestions: [{% for suggestion in summary.suggestions %}"{{suggestion|escapejs}}"{% if not forloop.last %},{% endif %}{% endfor %}],
            priority_improvements: [{% for priority in summary.very_specific_issues_to_fix_to_improve_quality_in_priority_order %}"{{priority|escapejs}}"{% if not forloop.last %},{% endif %}{% endfor %}]
          });

          const blob = new Blob([jsonData], {type: 'application/json'});

          // Create a temporary download link
          const downloadLink = document.createElement('a');
          downloadLink.href = URL.createObjectURL(blob);
          downloadLink.download = 'summary.json';

          // Append to the document, trigger click, and remove
          document.body.appendChild(downloadLink);
          downloadLink.click();

          // Clean up after a short delay
          setTimeout(function() {
            document.body.removeChild(downloadLink);
            URL.revokeObjectURL(downloadLink.href);
          }, 100);
        });
        {% endif %}

        // Modal functionality
        function openModal(imgSrc) {
            const modal = document.getElementById('imageModal');
            const modalImg = document.getElementById('modalImage');
            modal.classList.add('active');
            modalImg.src = imgSrc;
        }

        // Close modal when clicking outside or on close button
        const modal = document.getElementById('imageModal');
        modal.onclick = function(e) {
            if (e.target === modal || e.target.className === 'modal-close') {
                modal.classList.remove('active');
            }
        }

        // Close modal with escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                modal.classList.remove('active');
            }
        });

        // Find which test execution is currently in view
        function findActiveExecution() {
            const testExecutions = document.querySelectorAll('.test-execution');
            let closestDistance = Infinity;
            let data = null;

            const viewportMiddle = window.scrollY + window.innerHeight / 2;

            testExecutions.forEach((execution) => {
                const rect = execution.getBoundingClientRect();
                const executionMiddle = window.scrollY + rect.top + rect.height / 2;
                const distance = Math.abs(viewportMiddle - executionMiddle);

                if (distance < closestDistance) {
                    closestDistance = distance;
                    data = {}
                    data['index'] = execution.getAttribute('data-execution-index');
                    data['area'] = execution.getAttribute('data-execution-area');
                }
            });

            return data;
        }

        function updateReasoningContent(executionIndex, stepIndex) {
            // Get the test execution
            const testExecution = document.querySelector(`.test-execution[data-execution-index="${executionIndex}"]`);
            if (!testExecution) return;

            const reasoningContainer = document.getElementById(`reasoning-content-${executionIndex}`);
            if (!reasoningContainer) return;

            const reasoningParent = reasoningContainer.parentElement;

            // If it's step 1, hide the entire reasoning container
            if (stepIndex === 1) {
                if (reasoningParent) {
                    reasoningParent.style.display = 'none';
                }
                return;
            } else {
                // Show the container for other steps
                if (reasoningParent) {
                    reasoningParent.style.display = 'block';
                }
            }

            // Get the step data
            const steps = testExecution.querySelectorAll('.test-step');
            const stepElement = steps[stepIndex - 1];
            if (!stepElement) return;

            // Get the reasoning data from the data attribute
            const reasoningData = stepElement.getAttribute('data-reasoning');
            if (!reasoningData) {
                reasoningContainer.innerHTML = '<p style="font-style: italic; color: var(--text-secondary);">No details available for this step</p>';
                return;
            }

            let stepData;
            try {
                stepData = JSON.parse(reasoningData);
            } catch (e) {
                reasoningContainer.innerHTML = '<p style="font-style: italic; color: var(--text-secondary);">Error parsing step data</p>';
                return;
            }

            // Check if this is the last step
            const isLastStep = stepIndex === steps.length;

            // Update the reasoning content
            let content = '';

            if (isLastStep) {
                // For the last step, try to get the test result from the parent test execution
                const testResult = testExecution.querySelector('.test-name-container h4').textContent.trim();
                const testPassed = testExecution.querySelector('.test-name-container h4 span') !== null;

                // Display test result information
                content += `<div style="margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1);">
                    <h5 style="margin: 0 0 10px 0; font-size: 1rem; color: var(--primary-light); font-weight: 600;">Test Result</h5>
                    <p style="margin: 0; color: var(--text-secondary); font-size: 0.9rem;">${testResult}</p>
                </div>`;

                // Display test status
                const resultStyle = testPassed ?

                    'color: var(--success-color); font-weight: 600;' :

                    'color: var(--warning-color); font-weight: 600;';

                content += `<div style="margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1);">
                    <h5 style="margin: 0 0 10px 0; font-size: 1rem; color: var(--primary-light); font-weight: 600;">Status</h5>
                    <p style="margin: 0; font-size: 0.9rem; ${resultStyle}">
                        ${testPassed ? '✓ Test Passed' : '⚠ Test Failed'}
                    </p>
                </div>`;

                // If there's any reasoning data in the last step, show it too
                if (stepData.page_summary) {
                    content += `<div style="margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1);">
                        <h5 style="margin: 0 0 10px 0; font-size: 1rem; color: var(--primary-light); font-weight: 600;">Final Page Summary</h5>
                        <p style="margin: 0; color: var(--text-secondary); font-size: 0.9rem;">${stepData.page_summary}</p>
                    </div>`;
                }

                if (stepData.reasoning) {
                    content += `<div>
                        <h5 style="margin: 0 0 10px 0; font-size: 1rem; color: var(--primary-light); font-weight: 600;">Final Reasoning</h5>
                        <p style="margin: 0; color: var(--text-secondary); font-size: 0.9rem;">${stepData.reasoning}</p>
                    </div>`;
                }
            } else {
                // For non-last steps, show the regular reasoning information
                if (stepData.page_summary) {
                    content += `<div style="margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1);">
                        <h5 style="margin: 0 0 10px 0; font-size: 1rem; color: var(--primary-light); font-weight: 600;">Page Summary</h5>
                        <p style="margin: 0; color: var(--text-secondary); font-size: 0.9rem;">${stepData.page_summary}</p>
                    </div>`;
                }

                if (stepData.reasoning) {
                    content += `<div style="margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1);">
                        <h5 style="margin: 0 0 10px 0; font-size: 1rem; color: var(--primary-light); font-weight: 600;">Reasoning</h5>
                        <p style="margin: 0; color: var(--text-secondary); font-size: 0.9rem;">${stepData.reasoning}</p>
                    </div>`;
                }

                if (stepData.next_step) {
                    content += `<div>
                        <h5 style="margin: 0 0 10px 0; font-size: 1rem; color: var(--primary-light); font-weight: 600;">Next Step</h5>
                        <p style="margin: 0; color: var(--text-secondary); font-size: 0.9rem;">${stepData.next_step}</p>
                    </div>`;
                }
            }

            if (!content) {
                content = '<p style="font-style: italic; color: var(--text-secondary);">No details available for this step</p>';
            }

            reasoningContainer.innerHTML = content;
        }

        function goToStep(executionIndex, stepIndex, area) {
            // Get the correct test execution
            const testExecution = document.querySelector(`.test-execution[data-execution-index="${executionIndex}"][data-execution-area="${area}"]`);
            if (!testExecution) return;

            const steps = testExecution.querySelectorAll('.test-step');
            const dots = testExecution.querySelectorAll('.step-dot');

            // Remove active class from all steps in this execution
            steps.forEach(step => {
                step.classList.remove('active')
                step.style.filter = "grayscale(100%)";
                step.style.transform = "scale(1)";
                step.style.zIndex = "1";
            });
            dots.forEach(dot => {
                dot.classList.remove('active')
                dot.style.background = "var(--text-secondary)";
                dot.style.transform = "scale(1)";
                dot.style.opacity = "0.4";
            });

            // Add active class to selected step (adjust for 0-based index)
            const targetIndex = stepIndex - 1;
            if (steps[targetIndex]) {
                steps[targetIndex].classList.add('active');
                steps[targetIndex].style.filter = "grayscale(0%)";
                steps[targetIndex].style.transform = "scale(1.15)";
                steps[targetIndex].style.zIndex = "10";

                if (dots[targetIndex]) {
                    dots[targetIndex].classList.add('active');
                    dots[targetIndex].style.background = "var(--primary-color)";
                    dots[targetIndex].style.transform = "scale(1.3)";
                    dots[targetIndex].style.opacity = "1";
                }

                // Scroll to the selected step
                steps[targetIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });

                // Update the reasoning content
                updateReasoningContent(executionIndex, stepIndex);
            }
        }

        function moveStep(executionIndex, direction, area) {
            // Get the correct test execution
            const testExecution = document.querySelector(`.test-execution[data-execution-index="${executionIndex}"][data-execution-area="${area}"]`);
            if (!testExecution) return;

            const steps = testExecution.querySelectorAll('.test-step');
            const dots = testExecution.querySelectorAll('.step-dot');

            let activeIndex = -1;
            steps.forEach((step, index) => {
                if (step.classList.contains('active')) {
                    activeIndex = index;
                }

                // Reset all steps to default state
                step.style.filter = "grayscale(100%)";
                step.style.transform = "scale(1)";
                step.style.zIndex = "1";
            });

            dots.forEach(dot => {
                dot.style.background = "var(--text-secondary)";
                dot.style.transform = "scale(1)";
                dot.style.opacity = "0.4";
            });

            if (activeIndex === -1 && steps.length > 0) {
                // If no step is active, activate the first one
                activeIndex = 0;
                steps[activeIndex].classList.add('active');
                if (dots[activeIndex]) dots[activeIndex].classList.add('active');
            }

            if (activeIndex !== -1) {
                // Remove active class from current step
                steps[activeIndex].classList.remove('active');
                if (dots[activeIndex]) dots[activeIndex].classList.remove('active');

                // Calculate new index
                let newIndex = activeIndex + direction;
                if (newIndex < 0) newIndex = steps.length - 1;
                if (newIndex >= steps.length) newIndex = 0;

                // Add active class to new step
                steps[newIndex].classList.add('active');
                steps[newIndex].style.filter = "grayscale(0%)";
                steps[newIndex].style.transform = "scale(1.15)";
                steps[newIndex].style.zIndex = "10";

                if (dots[newIndex]) {
                    dots[newIndex].classList.add('active');
                    dots[newIndex].style.background = "var(--primary-color)";
                    dots[newIndex].style.transform = "scale(1.3)";
                    dots[newIndex].style.opacity = "1";
                }

                // Scroll to the new active step
                steps[newIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });

                // Update the reasoning content
                updateReasoningContent(executionIndex, newIndex + 1);
            }
        }

        // Auto-scroll animation
        function toggleAutoScroll(executionIndex, area) {
            const testExecution = document.querySelector(`.test-execution[data-execution-index="${executionIndex}"][data-execution-area="${area}"]`);
            if (!testExecution) return;

            const button = testExecution.querySelector('.play-pause-button');
            const isPlaying = button.getAttribute('data-playing') === 'true';

            if (isPlaying) {
                // Stop auto-scrolling
                clearInterval(parseInt(testExecution.dataset.intervalId));
                button.setAttribute('data-playing', 'false');
                button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>';
                button.style.background = "var(--primary-dark)";
            } else {
                // Start auto-scrolling
                const intervalId = setInterval(() => {
                    moveStep(executionIndex, 1, area);
                }, 3000); // Change image every 3 seconds

                testExecution.dataset.intervalId = intervalId;
                button.setAttribute('data-playing', 'true');
                button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>';
                button.style.background = "var(--primary-color)";
            }
        }

        // Track user interaction to pause auto-scrolling
        window.userInteracted = false;
        document.addEventListener('click', function(e) {
            // Don't set userInteracted if clicking play/pause button
            if (e.target.closest('.play-pause-button')) return;

            window.userInteracted = true;
            // Reset after 10 seconds of inactivity
            clearTimeout(window.interactionTimer);
            window.interactionTimer = setTimeout(() => {
                window.userInteracted = false;
            }, 10000);
        });

        // Add keyboard navigation
        document.addEventListener('keydown', function(e) {
            if (e.key === 'ArrowLeft') {
                const activeExecution = findActiveExecution();
                if (activeExecution) {
                    moveStep(activeExecution, -1, activeExecution.area);
                }
            } else if (e.key === 'ArrowRight') {
                const activeExecution = findActiveExecution();
                if (activeExecution) {
                    moveStep(activeExecution, 1, activeExecution.area);
                }
            }
        });

        // Handle scrolling indicator for issues and personas
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize all test step galleries
            const testExecutions = document.querySelectorAll('.test-execution');
            testExecutions.forEach((execution) => {
                const executionIndex = execution.getAttribute('data-execution-index');
                const steps = execution.querySelectorAll('.test-step');
                const dots = execution.querySelectorAll('.step-dot');

                // Initialize first step as active
                if (steps.length > 0) {
                    steps[0].classList.add('active');
                    steps[0].style.filter = "grayscale(0%)";
                    steps[0].style.transform = "scale(1.15)";
                    steps[0].style.zIndex = "10";

                    if (dots.length > 0) {
                        dots[0].classList.add('active');
                        dots[0].style.background = "var(--primary-color)";
                        dots[0].style.transform = "scale(1.3)";
                        dots[0].style.opacity = "1";
                    }

                    // Hide the entire reasoning container for the first step
                    const reasoningContainer = document.getElementById(`reasoning-content-${executionIndex}`);
                    const reasoningParent = reasoningContainer?.parentElement;
                    if (reasoningParent) {
                      reasoningParent.style.display = 'none';
                    }
                }
            });

            // Fix the HTML formatting for the agent images
            const agentImages = document.querySelectorAll('.tester-info img');
            agentImages.forEach((image) => {
                image.style.width = '40px';
                image.style.height = '40px';
                image.style.borderRadius = '50%';
                image.style.objectFit = 'cover';
            });

            // Handle horizontal scrolling for issues and personas
            const scrollContainers = document.querySelectorAll('[style*="overflow-x: auto"]');
            scrollContainers.forEach(container => {
                container.addEventListener('scroll', function() {
                    // Get all dots for this container
                    const parentElement = container.closest('.page-issues, .page-feedback');
                    if (!parentElement) return;

                    const dots = parentElement.querySelectorAll('[style*="border-radius: 50%"][style*="background:"]');
                    if (!dots.length) return;

                    // Calculate which item is most visible
                    const items = container.querySelector('[style*="display: flex; gap: 20px"]').children;
                    const containerWidth = container.clientWidth;
                    const scrollLeft = container.scrollLeft;

                    let mostVisibleIndex = 0;
                    let maxVisibleArea = 0;

                    Array.from(items).forEach((item, index) => {
                        const itemLeft = item.offsetLeft;
                        const itemWidth = item.clientWidth;
                        const itemRight = itemLeft + itemWidth;

                        const visibleLeft = Math.max(itemLeft, scrollLeft);
                        const visibleRight = Math.min(itemRight, scrollLeft + containerWidth);
                        const visibleWidth = Math.max(0, visibleRight - visibleLeft);

                        if (visibleWidth > maxVisibleArea) {
                            maxVisibleArea = visibleWidth;
                            mostVisibleIndex = index;
                        }
                    });

                    // Update the dots
                    dots.forEach((dot, index) => {
                        if (index === mostVisibleIndex) {
                            dot.style.background = "var(--primary-color)";
                            dot.style.opacity = "1";
                        } else {
                            dot.style.background = "var(--text-secondary)";
                            dot.style.opacity = "0.4";
                        }
                    });
                });
            });
        });

        {% if report_auto_download %}
        // Auto-download summary.json on page load
        document.addEventListener('DOMContentLoaded', function() {
            // Create a Blob with the JSON data
            const jsonData = JSON.stringify({
                grade: "{{summary.letter_grade}}",
                quality_overview: "{{summary.quality_overview_paragraph|escapejs}}",
                best_aspects: "{{summary.best_aspects|escapejs}}",
                worst_aspects: "{{summary.worst_aspects|escapejs}}",
                suggestions: [{% for suggestion in summary.suggestions %}"{{suggestion|escapejs}}"{% if not forloop.last %},{% endif %}{% endfor %}],
                priority_improvements: [{% for priority in summary.very_specific_issues_to_fix_to_improve_quality_in_priority_order %}"{{priority|escapejs}}"{% if not forloop.last %},{% endif %}{% endfor %}]
            });

            const blob = new Blob([jsonData], {type: 'application/json'});

            // Create a temporary download link
            const downloadLink = document.createElement('a');
            downloadLink.href = URL.createObjectURL(blob);
            downloadLink.download = 'summary.json';

            // Append to the document, trigger click, and remove
            document.body.appendChild(downloadLink);
            downloadLink.click();

            // Clean up after a short delay
            setTimeout(function() {
                document.body.removeChild(downloadLink);
                URL.revokeObjectURL(downloadLink.href);
            }, 100);
        });
        {% endif %}
    </script>
</body>
</html>
