<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8' />
    <meta
      name='viewport'
      content='width=device-width, initial-scale=1.0'
    />
    <meta http-equiv='X-UA-Compatible' content='ie=edge' />
    <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@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link
      href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css'
      rel='stylesheet'
      integrity='sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM'
      crossorigin='anonymous'
    />
    <link
      rel='stylesheet'
      href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'
      integrity='sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=='
      crossorigin='anonymous'
      referrerpolicy='no-referrer'
    />
    {{#if runId}}
      <title>Report #{{runId}} - Testomat.io</title>
    {{else}}
      <title>Report Testomat.io</title>
    {{/if}}
    <style>
        :root {
            --primary-color: #6366f1;
            --primary-hover: #4f46e5;
            --success-color: #10b981;
            --danger-color: #ef4444;
            --warning-color: #f59e0b;
            --info-color: #3b82f6;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-800: #1f2937;
            --gray-900: #111827;
            --border-radius: 12px;
            --transition: all 0.2s ease;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: var(--gray-800);
        }

        .main-container {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(20px);
            margin: 20px auto;
            max-width: 1400px;
            border-radius: 20px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            overflow: hidden;
            overflow-y: auto;
        }

        .header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
            color: white;
            padding: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .header-title {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .header-title h1 {
            margin: 0;
            font-size: 28px;
            font-weight: 700;
            transition: color 0.3s ease;
        }

        .header-title h1.status-passed {
            color: var(--success-color);
        }

        .header-title h1.status-failed {
            color: var(--danger-color);
        }

        .header-title h1.status-skipped {
            color: var(--warning-color);
        }

        .header-title h1.status-todo {
            color: #8b5cf6;
        }

        .header-badge {
            background: rgba(255, 255, 255, 0.2);
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            backdrop-filter: blur(10px);
        }

        .header-actions {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .run-info {
            background: rgba(255, 255, 255, 0.15);
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 14px;
        }

        .btn-primary-custom {
            background: rgba(255, 255, 255, 0.9);
            color: var(--primary-color);
            border: none;
            padding: 10px 24px;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary-custom:hover {
            background: white;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            color: var(--primary-hover);
        }

        .btn-primary-custom:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .description-section {
            padding: 24px 30px 0;
            background: var(--gray-50);
        }

        .description-card {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--border-radius);
            padding: 20px 24px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        }

        .description-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--gray-700);
            margin: 0 0 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .description-title i { color: var(--gray-500); }

        .markdown-body { color: var(--gray-700); line-height: 1.55; font-size: 14px; }
        .markdown-body p { margin: 0 0 10px; }
        .markdown-body p:last-child { margin-bottom: 0; }
        .markdown-body h1,
        .markdown-body h2,
        .markdown-body h3 {
            margin: 14px 0 8px;
            color: var(--gray-800);
            line-height: 1.3;
        }
        .markdown-body h1 { font-size: 20px; }
        .markdown-body h2 { font-size: 17px; }
        .markdown-body h3 { font-size: 15px; }
        .markdown-body ul,
        .markdown-body ol { margin: 6px 0 10px 22px; padding: 0; }
        .markdown-body li { margin: 2px 0; }
        .markdown-body code {
            background: var(--gray-100);
            border-radius: 4px;
            padding: 1px 5px;
            font-size: 12.5px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        }
        .markdown-body pre {
            background: var(--gray-100);
            border-radius: 6px;
            padding: 10px 12px;
            overflow-x: auto;
            margin: 8px 0;
        }
        .markdown-body pre code { background: transparent; padding: 0; }
        .markdown-body a { color: var(--primary, #2563eb); text-decoration: underline; }
        .markdown-body blockquote {
            margin: 8px 0;
            padding: 4px 12px;
            border-left: 3px solid var(--gray-300);
            color: var(--gray-600);
        }

        .configuration-section {
            padding: 16px 30px 0;
            background: var(--gray-50);
        }

        .configuration-card {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--border-radius);
            padding: 20px 24px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        }

        .configuration-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--gray-700);
            margin: 0 0 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .configuration-title i { color: var(--gray-500); }

        .configuration-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        .configuration-table th,
        .configuration-table td {
            padding: 6px 12px;
            text-align: left;
            border-bottom: 1px solid var(--gray-100);
        }

        .configuration-table tr:last-child th,
        .configuration-table tr:last-child td { border-bottom: 0; }

        .configuration-table th {
            font-weight: 600;
            color: var(--gray-600);
            width: 30%;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 12.5px;
        }

        .configuration-table td {
            color: var(--gray-800);
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 12.5px;
            word-break: break-word;
        }

        .stats-section {
            padding: 30px;
            background: var(--gray-50);
            border-bottom: 1px solid var(--gray-200);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }

        .chart-container {
            background: white;
            padding: 25px;
            border-radius: var(--border-radius);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            min-height: 400px;
            overflow: visible !important;
        }

        .chart-section {
            width: 100%;
            overflow: hidden;
        }

        #testChart {
            width: 100% !important;
            max-width: 100% !important;
        }

        /* Google Charts tooltip stabilization */
        #testChart > div > div[style*="position: absolute"] {
            pointer-events: none !important;
            will-change: transform, opacity !important;
            backface-visibility: hidden !important;
            transform: translateZ(0) !important;
        }

        .google-visualization-tooltip {
            pointer-events: none !important;
            opacity: 1 !important;
            transition: none !important;
        }

        .stats-info {
            background: white;
            padding: 25px;
            border-radius: var(--border-radius);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 20px;
        }

        .stat-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid var(--gray-100);
        }

        .stat-card:last-child {
            border-bottom: none;
        }

        .stat-label {
            font-size: 13px;
            color: var(--gray-600);
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .stat-value {
            font-size: 16px;
            font-weight: 700;
            color: var(--gray-900);
        }

        .status-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .status-passed {
            color: var(--success-color);
        }

        .status-failed {
            color: var(--danger-color);
        }

        .status-skipped {
            color: var(--warning-color);
        }

        .status-running {
            color: var(--info-color);
        }

        .controls-section {
            padding: 30px;
            background: white;
            border-bottom: 1px solid var(--gray-200);
        }

        .search-container {
            position: relative;
            margin-bottom: 25px;
        }

        .search-input {
            width: 100%;
            padding: 15px 20px 15px 50px;
            border: 2px solid var(--gray-200);
            border-radius: var(--border-radius);
            font-size: 15px;
            transition: var(--transition);
            background: var(--gray-50);
        }

        .search-input:focus {
            outline: none;
            border-color: var(--primary-color);
            background: white;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }

        .search-icon {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray-400);
            font-size: 18px;
        }

        .filters-container {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
        }

        .filter-tabs {
            display: flex;
            gap: 8px;
            background: var(--gray-100);
            padding: 4px;
            border-radius: var(--border-radius);
        }

        .filter-tab {
            padding: 10px 20px;
            border: none;
            background: transparent;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--gray-600);
            font-size: 14px;
        }

        .filter-tab:hover {
            background: rgba(255, 255, 255, 0.5);
        }

        .filter-tab.active {
            background: white;
            color: var(--primary-color);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .filter-tab .count {
            background: var(--gray-200);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }

        .filter-tab.active .count {
            background: var(--primary-color);
            color: white;
        }

        .pagination-control {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .pagination-select {
            padding: 10px 15px;
            border: 2px solid var(--gray-200);
            border-radius: 8px;
            background: white;
            font-size: 14px;
            cursor: pointer;
            transition: var(--transition);
        }

        .pagination-select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }

        .tests-section {
            padding: 30px;
            background: white;
            min-height: 400px;
        }

        .test-item {
            background: white;
            border: 2px solid var(--gray-200);
            border-radius: var(--border-radius);
            margin-bottom: 20px;
            overflow: hidden;
            transition: var(--transition);
        }

        .test-item:hover {
            border-color: var(--primary-color);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .test-header {
            padding: 20px;
            background: var(--gray-50);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: var(--transition);
        }

        .test-header:hover {
            background: var(--gray-100);
        }

        .test-info {
            display: flex;
            align-items: center;
            gap: 15px;
            flex: 1;
        }

        .test-status-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 600;
        }

        .test-status-icon.passed {
            background: rgba(16, 185, 129, 0.1);
            color: var(--success-color);
        }

        .test-status-icon.failed {
            background: rgba(239, 68, 68, 0.1);
            color: var(--danger-color);
        }

        .test-status-icon.skipped {
            background: rgba(245, 158, 11, 0.1);
            color: var(--warning-color);
        }

        .test-details {
            flex: 1;
        }

        .test-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .artifact-upload-indicator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            color: var(--primary-color);
            font-size: 14px;
            flex-shrink: 0;
        }

        .artifact-upload-indicator:hover {
            transform: scale(1.1);
            transition: transform 0.2s ease;
        }

        .test-suite {
            font-size: 14px;
            color: var(--gray-600);
        }

        .test-meta {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .test-duration {
            display: flex;
            align-items: center;
            gap: 5px;
            color: var(--gray-500);
            font-size: 14px;
        }

        .test-badges {
            display: flex;
            gap: 8px;
        }

        .badge {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .badge-flaky {
            background: rgba(245, 158, 11, 0.1);
            color: var(--warning-color);
        }

        .badge-retry {
            background: rgba(59, 130, 246, 0.1);
            color: var(--info-color);
        }

        .expand-icon {
            color: var(--gray-400);
            transition: var(--transition);
            font-size: 18px;
        }

        .test-item.expanded .expand-icon {
            transform: rotate(180deg);
        }

        .test-content {
            display: none;
            border-top: 1px solid var(--gray-200);
        }

        .test-item.expanded .test-content {
            display: block;
        }

        .test-group {
            background: white;
            border: 2px solid var(--gray-200);
            border-radius: var(--border-radius);
            margin-bottom: 20px;
            overflow: hidden;
            transition: var(--transition);
        }

        .test-group:hover {
            border-color: var(--primary-color);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .test-group-header {
            padding: 20px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
            color: white;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: var(--transition);
        }

        .test-group-header:hover {
            filter: brightness(1.1);
        }

        .test-group-title {
            display: flex;
            align-items: center;
            gap: 15px;
            flex: 1;
        }

        .test-group-name {
            font-size: 18px;
            font-weight: 700;
        }

        .test-group-count {
            background: rgba(255, 255, 255, 0.2);
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
        }

        .test-group-stats {
            display: flex;
            gap: 20px;
            font-size: 14px;
            margin-right: 10px;
        }

        .test-group-stat {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .test-group-expand {
            color: white;
            transition: var(--transition);
            font-size: 18px;
        }

        .test-group.expanded .test-group-expand {
            transform: rotate(180deg);
        }

        .test-group-content {
            display: none;
            background: var(--gray-50);
        }

        .test-group.expanded .test-group-content {
            display: block;
        }

        .test-group-content .test-item {
            border: none;
            border-bottom: 1px solid var(--gray-200);
            border-radius: 0;
            margin-bottom: 0;
        }

        .test-group-content .test-item:last-child {
            border-bottom: none;
        }

        .test-tabs {
            display: flex;
            background: var(--gray-50);
            border-bottom: 1px solid var(--gray-200);
        }

        .test-tab {
            padding: 15px 25px;
            background: none;
            border: none;
            cursor: pointer;
            font-weight: 500;
            color: var(--gray-600);
            transition: var(--transition);
            position: relative;
        }

        .test-tab:hover {
            color: var(--primary-color);
            background: rgba(255, 255, 255, 0.5);
        }

        .test-tab.active {
            color: var(--primary-color);
            background: white;
        }

        .test-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--primary-color);
        }

        .test-tab-content {
            padding: 25px;
            display: none;
        }

        .test-tab-content.active {
            display: block;
        }

        .code-block {
            background: var(--gray-900);
            color: #e5e7eb;
            padding: 20px;
            border-radius: 8px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 14px;
            line-height: 1.5;
            overflow-x: auto;
            white-space: pre-wrap;
        }

        .steps-container {
            max-height: 500px;
            overflow-y: auto;
            border: 1px solid var(--gray-200);
            border-radius: 8px;
            background: white;
        }

        .step-item {
            padding: 12px 16px;
            border-bottom: 1px solid var(--gray-100);
            display: flex;
            align-items: flex-start;
            gap: 12px;
            transition: var(--transition);
            position: relative;
        }

        .step-item:hover {
            background: var(--gray-50);
        }

        .step-item:last-child {
            border-bottom: none;
        }

        .step-number {
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            margin-top: 2px;
        }

        .step-content {
            flex: 1;
            min-width: 0;
        }

        .step-header {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
        }

        .step-main {
            flex: 1;
            min-width: 0;
        }

        .step-text {
            font-size: 14px;
            color: var(--gray-700);
            line-height: 1.5;
            margin: 0;
            word-break: break-word;
        }

        .step-time {
            font-size: 12px;
            color: var(--gray-500);
            margin-top: 4px;
        }

        .step-toggle {
            width: 24px;
            height: 24px;
            border: none;
            border-radius: 6px;
            background: var(--gray-100);
            color: var(--gray-600);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
            transition: var(--transition);
            margin-top: 2px;
        }

        .step-toggle:hover {
            background: var(--gray-200);
            color: var(--gray-700);
        }

        .step-toggle.collapsed i {
            transform: rotate(-90deg);
        }

        .step-toggle i {
            transition: transform 0.2s ease;
        }

        .step-status {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-top: 8px;
            flex-shrink: 0;
        }

        .step-status.passed {
            background: var(--success-color);
        }

        .step-status.failed {
            background: var(--danger-color);
        }

        .step-status.skipped {
            background: var(--warning-color);
        }

        .step-category {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--gray-500);
            font-weight: 600;
            margin-top: 4px;
        }

        .step-children {
            position: relative;
            margin-left: 48px;
            padding-left: 0;
        }

        .step-children.collapsed {
            display: none;
        }

        .step-children::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--gray-300);
        }

        .step-children .step-item {
            position: relative;
        }

        .step-children .step-item::before {
            content: '';
            position: absolute;
            left: -16px;
            top: 24px;
            width: 16px;
            height: 2px;
            background: var(--gray-300);
        }

        .step-children .step-item:last-child {
            border-bottom: none;
        }

        .step-level-0 {
            padding-left: 16px;
        }

        .step-level-1 {
            padding-left: 8px;
        }

        .step-level-2 {
            padding-left: 16px;
        }

        .step-level-3 {
            padding-left: 24px;
        }

        .step-level-4 {
            padding-left: 32px;
        }

        .step-item[data-step-id] {
            position: relative;
        }

        .step-item.step-level-0::before {
            display: none;
        }

        .step-duration {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            color: var(--gray-500);
            margin-left: 8px;
        }

        .message-block {
            background: var(--gray-50);
            padding: 20px;
            border-radius: 8px;
            border-left: 4px solid var(--danger-color);
            margin-bottom: 15px;
        }

        .message-block.info {
            border-left-color: var(--info-color);
        }

        .message-block.passed {
            border-left-color: var(--success-color);
        }

        .message-block.skipped,
        .message-block.todo {
            border-left-color: var(--warning-color);
        }

        .message-block.failed {
            border-left-color: var(--danger-color);
        }

        .step-attachments {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 12px;
            margin-top: 12px;
        }

        .step-attachments .attachment-item {
            min-height: 120px;
        }

        .metadata-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
        }

        .metadata-item {
            background: var(--gray-50);
            padding: 15px;
            border-radius: 8px;
        }

        .metadata-key {
            font-weight: 600;
            color: var(--gray-700);
            margin-bottom: 5px;
            font-size: 14px;
        }

        .metadata-value {
            color: var(--gray-600);
            font-size: 14px;
            word-break: break-all;
        }

        .attachments-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }

        .attachment-item {
            background: var(--gray-50);
            border-radius: 8px;
            overflow: hidden;
            transition: var(--transition);
            cursor: pointer;
        }

        .attachment-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .attachment-image {
            width: 100%;
            height: 150px;
            object-fit: cover;
            cursor: pointer;
            transition: var(--transition);
        }

        .attachment-image:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .attachment-file {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 150px;
            background: white;
            cursor: pointer;
            transition: var(--transition);
        }

        .attachment-file:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .attachment-preview {
            position: relative;
            overflow: hidden;
        }

        .attachment-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s ease;
            color: white;
            font-size: 14px;
            font-weight: 600;
        }

        .attachment-item:hover .attachment-overlay {
            opacity: 1;
        }

        .attachment-actions {
            display: flex;
            gap: 8px;
        }

        .attachment-action {
            padding: 6px 12px;
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            color: white;
            text-decoration: none;
            font-size: 12px;
            cursor: pointer;
            transition: var(--transition);
        }

        .attachment-action:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-1px);
        }

        .attachment-icon {
            font-size: 48px;
            color: var(--gray-400);
            margin-bottom: 10px;
        }

        .attachment-name {
            padding: 12px;
            font-size: 14px;
            font-weight: 500;
            color: var(--gray-700);
            text-align: center;
            border-top: 1px solid var(--gray-200);
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .attachment-size {
            font-size: 11px;
            color: var(--gray-500);
            font-weight: 400;
        }

        .retry-info {
            background: rgba(59, 130, 246, 0.05);
            border: 1px solid rgba(59, 130, 246, 0.2);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .retry-title {
            font-weight: 600;
            color: var(--info-color);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .retry-attempts {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .retry-attempt {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: 6px;
            padding: 8px 12px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .retry-attempt.failed {
            border-color: var(--danger-color);
            color: var(--danger-color);
        }

        .retry-attempt.passed {
            border-color: var(--success-color);
            color: var(--success-color);
        }

        .traces-instruction {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            color: white;
        }

        .instruction-header {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .instruction-content ol {
            margin: 0;
            padding-left: 20px;
        }

        .instruction-content li {
            margin-bottom: 15px;
            line-height: 1.6;
        }

        .instruction-content strong {
            color: #fff;
            font-weight: 600;
        }

        .instruction-content code {
            background: rgba(0, 0, 0, 0.3);
            color: #fff;
            padding: 6px 10px;
            border-radius: 6px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 13px;
            display: inline-block;
            margin: 5px 0;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .traces-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .trace-download-item {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: 8px;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            transition: var(--transition);
        }

        .trace-download-item:hover {
            border-color: var(--primary-color);
            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
        }

        .trace-info {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
        }

        .trace-info i {
            font-size: 24px;
            color: var(--warning-color);
        }

        .trace-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--gray-700);
        }

        .trace-download-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .trace-download-btn:hover {
            background: var(--primary-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        }

        .trace-download-btn:active {
            transform: translateY(0);
        }

        .pagination-container {
            padding: 30px;
            background: white;
            border-top: 1px solid var(--gray-200);
        }

        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

        .pagination-btn {
            padding: 10px 15px;
            border: 2px solid var(--gray-200);
            background: white;
            border-radius: 8px;
            cursor: pointer;
            transition: var(--transition);
            font-weight: 500;
            color: var(--gray-700);
        }

        .pagination-btn:hover:not(:disabled) {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .pagination-btn.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }

        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: var(--gray-500);
        }

        .empty-icon {
            font-size: 64px;
            color: var(--gray-300);
            margin-bottom: 20px;
        }

        .empty-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--gray-600);
        }

        .empty-description {
            font-size: 16px;
        }

        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid var(--gray-200);
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .status-todo {
            background: rgba(139, 92, 246, 0.1);
            color: #8b5cf6;
        }

        .status-pending {
            background: rgba(156, 163, 175, 0.15);
            color: var(--gray-600);
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @media (max-width: 768px) {
            .main-container {
                margin: 5px;
                border-radius: 15px;
            }

            .header {
                padding: 15px;
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .header-actions {
                width: 100%;
                justify-content: space-between;
            }

            .stats-section {
                padding: 15px;
            }

            .stats-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .chart-container {
                min-height: auto;
                padding: 15px;
            }

            .stats-info {
                padding: 15px;
            }

            .stat-card {
                padding: 10px 0;
            }

            .stat-value {
                font-size: 20px;
            }

            .stat-label {
                font-size: 12px;
            }

            .chart-section {
                padding: 10px;
                width: 100%;
            }

            #testChart {
                width: 100% !important;
                max-width: 100% !important;
            }

            .filters-container {
                padding: 15px;
                flex-direction: column;
                gap: 15px;
            }

            .filter-tabs {
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                order: 2;
            }

            .pagination-control {
                order: 1;
                justify-content: center;
                flex-direction: column;
                gap: 10px;
            }

            .pagination-select {
                font-size: 14px;
                padding: 6px 10px;
            }

            .search-container {
                margin-bottom: 5px;
            }

            .tests-section, .controls-section {
                padding: 10px;
            }

            .test-item {
                margin-bottom: 10px;
            }

            .test-header {
                padding: 12px;
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }

            .test-meta {
                width: 100%;
                justify-content: space-between;
                padding: 0;
            }

            .test-tabs {
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
            }

            .test-tab {
                padding: 8px 12px;
                font-size: 13px;
            }

            .test-tab-content {
                padding: 12px;
            }

            .metadata-grid,
            .attachments-grid {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .metadata-item,
            .attachment-item {
                padding: 10px;
            }

            .pagination-container {
                padding: 15px;
            }

            .pagination-btn {
                padding: 8px 12px;
                font-size: 14px;
            }

            .settings-modal-content {
                width: 95%;
                max-width: none;
                margin: 10px;
            }

            .settings-meta-grid {
                grid-template-columns: 1fr;
            }

            .env-var-item {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .env-vars-list {
                max-height: 250px;
            }

            .env-var-value {
                padding: 4px 8px;
            }
        }

        @media (min-width: 769px) and (max-width: 1024px) {
            .stats-section {
                padding: 20px;
            }

            .stats-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .chart-container {
                padding: 20px;
            }

            .stats-info {
                padding: 20px;
            }

            .chart-section {
                padding: 20px;
            }

            #testChart {
                width: 100% !important;
                max-width: 100% !important;
            }

            .filters-container {
                padding: 15px 20px;
            }

            .tests-section {
                padding: 15px;
            }

            .test-header {
                padding: 15px;
            }

            .metadata-grid,
            .attachments-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .stats-section {
                padding: 10px;
            }

            .stats-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .chart-container {
                padding: 10px;
                min-height: auto;
            }

            .stats-info {
                padding: 12px;
            }

            .stat-card {
                padding: 8px 0;
            }

            .stat-value {
                font-size: 18px;
            }

            .stat-label {
                font-size: 11px;
            }

            .chart-section {
                padding: 5px;
            }

            .filter-tabs {
                gap: 5px;
            }

            .test-tab {
                padding: 6px 10px;
                font-size: 12px;
            }

            .badge {
                font-size: 10px;
                padding: 2px 6px;
            }
        }

        .text-center { text-align: center; }
        .mt-20 { margin-top: 20px; }
        .mb-20 { margin-bottom: 20px; }
        .hidden { display: none !important; }
        .fade-in {
            animation: fadeIn 0.3s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
  
        .todo-info {
            text-align: center;
            padding: 40px 20px;
            color: var(--warning-color);
        }

        .todo-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--warning-color);
        }

        .todo-title i {
            margin-right: 8px;
        }

        .todo-description {
            font-size: 14px;
            color: var(--gray-600);
            margin-bottom: 25px;
        }

        .todo-details {
            background: var(--gray-50);
            border-radius: 8px;
            padding: 20px;
            text-align: left;
            border: 1px solid var(--gray-200);
        }

        .todo-details p {
            margin: 8px 0;
            font-size: 13px;
        }

        .todo-details strong {
            color: var(--gray-700);
        }

        .test-status-icon.todo {
            background: var(--warning-color);
            color: white;
        }

        .test-status-icon.todo i {
            color: white;
        }

        .settings-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            padding: 10px 16px;
            border-radius: 8px;
            color: white;
            cursor: pointer;
            transition: var(--transition);
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .settings-btn i{ 
            transition: var(--transition);
        }

        .settings-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .settings-btn:hover i{
            transform: rotate(45deg);
        }

        .settings-modal {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
        }

        .settings-modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .settings-modal-content {
            background: white;
            border-radius: var(--border-radius);
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: modalSlideIn 0.3s ease;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .settings-modal-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
            color: white;
            padding: 20px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .settings-modal-title {
            font-size: 20px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .settings-modal-close {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 20px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .settings-modal-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg);
        }

        .settings-modal-body {
            padding: 25px;
            overflow-y: auto;
            max-height: calc(80vh - 80px);
        }

        .settings-section {
            margin-bottom: 25px;
        }

        .settings-section:last-child {
            margin-bottom: 0;
        }

        .settings-section-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-700);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .settings-meta-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 12px;
        }

        .settings-meta-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: var(--gray-50);
            border-radius: 8px;
            border: 2px solid var(--gray-200);
            cursor: pointer;
            transition: var(--transition);
        }

        .settings-meta-item:hover {
            border-color: var(--primary-color);
            background: white;
        }

        .settings-meta-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--primary-color);
        }

        .settings-meta-label {
            font-size: 14px;
            color: var(--gray-700);
            font-weight: 500;
            flex: 1;
            word-break: break-word;
        }

        .settings-meta-count {
            font-size: 11px;
            color: var(--gray-500);
            background: var(--gray-200);
            padding: 2px 8px;
            border-radius: 12px;
            font-weight: 600;
        }

        .settings-tabs-nav {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            border-bottom: 2px solid var(--gray-200);
            padding-bottom: 0;
        }

        .settings-tab {
            flex: 1;
            padding: 12px 16px;
            border: none;
            background: transparent;
            color: var(--gray-600);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
        }

        .settings-tab:hover {
            background: var(--gray-100);
            color: var(--gray-700);
        }

        .settings-tab.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }

        .settings-tab-content {
            display: none;
        }

        .settings-tab-content.active {
            display: block;
        }

        .env-vars-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .env-vars-group {
            background: var(--gray-50);
            border: 1px solid var(--gray-200);
            border-radius: 8px;
            overflow: hidden;
        }

        .env-vars-group-title {
            background: var(--gray-100);
            padding: 12px 15px;
            font-size: 13px;
            font-weight: 600;
            color: var(--gray-700);
            border-bottom: 1px solid var(--gray-200);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .env-vars-count {
            font-size: 11px;
            background: var(--primary-color);
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 500;
        }

        .env-vars-list {
            display: flex;
            flex-direction: column;
            max-height: 400px;
            overflow-y: auto;
        }

        .env-var-item {
            display: grid;
            grid-template-columns: 1fr 1fr;
            padding: 12px 15px;
            border-bottom: 1px solid var(--gray-200);
            gap: 15px;
            transition: var(--transition);
        }

        .env-var-item:last-child {
            border-bottom: none;
        }

        .env-var-item:hover {
            background: white;
        }

        .env-var-item.env-var-unset {
            background: var(--gray-100);
            opacity: 0.7;
        }

        .env-var-item.env-var-unset:hover {
            background: var(--gray-200);
        }

        .env-var-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .env-var-key {
            font-size: 12px;
            font-weight: 600;
            color: var(--primary-color);
            font-family: 'Courier New', monospace;
            word-break: break-all;
        }

        .env-var-description {
            font-size: 11px;
            color: var(--gray-600);
            line-height: 1.3;
        }

        .env-var-value {
            font-size: 12px;
            color: var(--gray-700);
            font-family: 'Courier New', monospace;
            word-break: break-all;
            padding: 6px 10px;
            background: white;
            border: 1px solid var(--gray-300);
            border-radius: 4px;
            display: flex;
            align-items: center;
        }

        .env-var-value.env-var-empty {
            background: var(--gray-100);
            color: var(--gray-500);
            font-style: italic;
            border-style: dashed;
        }

        .env-var-value.env-var-confidential {
            background: var(--gray-100);
            color: var(--gray-600);
            font-style: italic;
        }

        .settings-footer {
            padding: 15px 25px;
            background: var(--gray-50);
            border-top: 1px solid var(--gray-200);
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .settings-btn-action {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            font-size: 14px;
        }

        .settings-btn-reset {
            background: transparent;
            color: var(--gray-500);
            border: 1px solid var(--gray-300);
            margin-right: auto;
        }

        .settings-btn-reset:hover {
            background: var(--gray-100);
            color: var(--gray-700);
        }

        .settings-btn-cancel {
            background: var(--gray-200);
            color: var(--gray-700);
        }

        .settings-btn-cancel:hover {
            background: var(--gray-300);
        }

        .settings-btn-save {
            background: var(--primary-color);
            color: white;
        }

        .settings-btn-save:hover {
            background: var(--primary-hover);
        }

        /* Meta item visibility control */
        .meta-item {
            transition: var(--transition);
        }

        .meta-item.hidden {
            display: none !important;
        }
    </style>
</head>

<body>
    <div class='main-container'>
        <header class='header'>
            <div class='header-title'>
                <h1 id='mainTitle'>{{title}}</h1>
                <div class='header-badge'>Automated Tests</div>
            </div>
            <div class='header-actions'>
                {{#if runId}}
                    <div class='run-info'>
                        <i class='fas fa-hashtag'></i>
                        Run #{{runId}}
                    </div>
                {{/if}}
                <button class='settings-btn' onclick='openSettings()' title='Report Settings'>
                    <i class='fas fa-cog'></i>
                </button>
                {{#if runUrl}}
                    <a href='{{runUrl}}' target='_blank' class='btn-primary-custom'>
                        <i class='fas fa-external-link-alt'></i>
                        Full Report
                    </a>
                {{else}}
                    <button class='btn-primary-custom' disabled>
                        <i class='fas fa-external-link-alt'></i>
                        Full Report
                    </button>
                {{/if}}
            </div>
        </header>

        {{#if description}}
            <section class='description-section'>
                <div class='description-card'>
                    <h2 class='description-title'>
                        <i class='fas fa-info-circle'></i>
                        Description
                    </h2>
                    <div class='description-body markdown-body'>{{markdown description}}</div>
                </div>
            </section>
        {{/if}}

        {{#if configuration}}
            <section class='configuration-section'>
                <div class='configuration-card'>
                    <h2 class='configuration-title'>
                        <i class='fas fa-sliders-h'></i>
                        Configuration
                    </h2>
                    <table class='configuration-table'>
                        <tbody>
                            {{#each configuration}}
                                <tr>
                                    <th>{{this.key}}</th>
                                    <td>{{this.value}}</td>
                                </tr>
                            {{/each}}
                        </tbody>
                    </table>
                </div>
            </section>
        {{/if}}

        <section class='stats-section'>
            <div class='stats-grid'>
                <div class='chart-container'>
                    <div id='testChart'></div>
                </div>
                <div class='stats-info'>
                    <div class='stat-card'>
                        <div class='stat-label'>
                            <i class='fas fa-chart-line' style='font-size: 14px;'></i>
                            Execution Status
                        </div>
                        <div class='stat-value'>
                            <span class='status-badge status-{{status}}'>{{status}}</span>
                        </div>
                    </div>
                    <div class='stat-card'>
                        <div class='stat-label'>
                            <i class='fas fa-clock' style='font-size: 14px;'></i>
                            Duration
                        </div>
                        <div class='stat-value'>{{executionTime}}</div>
                    </div>
                    <div class='stat-card'>
                        <div class='stat-label'>
                            <i class='fas fa-list-check' style='font-size: 14px;'></i>
                            Total Tests
                        </div>
                        <div class='stat-value'>{{tests.length}}</div>
                    </div>
                    <div class='stat-card'>
                        <div class='stat-label'>
                            <i class='fas fa-calendar-alt' style='font-size: 14px;'></i>
                            Started At
                        </div>
                        <div class='stat-value'>{{executionDate}}</div>
                    </div>
                </div>
            </div>
        </section>

        <section class='controls-section'>
            <div class='search-container'>
                <i class='fas fa-search search-icon'></i>
                <input
                    type='text'
                    class='search-input'
                    placeholder='Search tests by name or suite...'
                    id='searchInput'
                />
            </div>
            <div class='filters-container'>
                <div class='filter-tabs'>
                    <button class='filter-tab active' data-filter='all'>
                        <i class='fas fa-list'></i>
                        All
                        <span class='count' id='countAll'>{{tests.length}}</span>
                    </button>
                    <button class='filter-tab' data-filter='passed'>
                        <i class='fas fa-check-circle'></i>
                        Passed
                        <span class='count' id='countPassed'>{{getTestsByStatus tests "passed"}}</span>
                    </button>
                    <button class='filter-tab' data-filter='failed'>
                        <i class='fas fa-times-circle'></i>
                        Failed
                        <span class='count' id='countFailed'>{{getTestsByStatus tests "failed"}}</span>
                    </button>
                    <button class='filter-tab' data-filter='skipped'>
                        <i class='fas fa-forward'></i>
                        Skipped
                        <span class='count' id='countSkipped'>{{getTestsByStatus tests "skipped"}}</span>
                    </button>
                    <button class='filter-tab' data-filter='todo'>
                        <i class='fas fa-list-check'></i>
                        Todo
                        <span class='count' id='countTodo'>{{getTestsByStatus tests "todo"}}</span>
                    </button>
                </div>
                <div class='pagination-control'>
                    <label for='pageSizeSelect' style='font-weight: 500; color: var(--gray-600);'>Tests per page:</label>
                    <select id='pageSizeSelect' class='pagination-select'>
                        <option value='10'>10</option>
                        <option value='25'>25</option>
                        <option value='50'>50</option>
                        <option value='100'>100</option>
                    </select>
                    <label for='groupingSelect' style='font-weight: 500; color: var(--gray-600); margin-left: 20px;'>Group by:</label>
                    <select id='groupingSelect' class='pagination-select'>
                        <option value='all'>All Tests</option>
                        <option value='suite'>By Suite</option>
                        <option value='file'>By File</option>
                    </select>
                </div>
            </div>
        </section>

        <section class='tests-section'>
            <div id='testsContainer'>
                {{#if tests.length}}
                    <!-- Test items will be dynamically inserted here -->
                {{else}}
                    <div class='empty-state'>
                        <div class='empty-icon'>
                            <i class='fas fa-inbox'></i>
                        </div>
                        <div class='empty-title'>No Tests Found</div>
                        <div class='empty-description'>No tests were executed in this run.</div>
                    </div>
                {{/if}}
            </div>
        </section>

        <section class='pagination-container' id='paginationContainer'>
            <!-- Pagination will be dynamically inserted here -->
        </section>
    </div>

    <div id='settingsModal' class='settings-modal'>
        <div class='settings-modal-content'>
            <div class='settings-modal-header'>
                <div class='settings-modal-title'>
                    <i class='fas fa-cog'></i>
                    Report Settings
                </div>
                <button class='settings-modal-close' onclick='closeSettings()'>
                    <i class='fas fa-times'></i>
                </button>
            </div>
            <div class='settings-modal-body'>
                <div class='settings-tabs-nav'>
                    <button class='settings-tab active' data-tab='metadata' onclick='switchSettingsTab(event)'>
                        <i class='fas fa-tags'></i>
                        Metadata
                    </button>
                    <button class='settings-tab' data-tab='envvars' onclick='switchSettingsTab(event)'>
                        <i class='fas fa-code'></i>
                        Environment Variables
                    </button>
                </div>

                <div class='settings-tab-content active' data-tab='metadata'>
                    <div class='settings-section'>
                        <div class='settings-section-title'>
                            <i class='fas fa-tags'></i>
                            Visible Metadata Fields
                        </div>
                        <div id='metaFieldsList' class='settings-meta-grid'>
                            <!-- Meta fields will be dynamically inserted here -->
                        </div>
                    </div>
                </div>

                <div class='settings-tab-content' data-tab='envvars'>
                    <div class='env-vars-container'>
                        <div class='env-vars-group'>
                            <div class='env-vars-group-title'>
                                TESTOMATIO Variables
                                <span class='env-vars-count'>{{ObjectLength envVars.testomatio}} total</span>
                            </div>
                            <div class='env-vars-list'>
                                {{#each envVars.testomatio}}
                                    <div class='env-var-item {{#unless this.isSet}}env-var-unset{{/unless}}'>
                                        <div class='env-var-info'>
                                            <div class='env-var-key'>{{@key}}</div>
                                        </div>
                                        <div class='env-var-value {{#unless this.isSet}}env-var-empty{{/unless}} {{#if this.isSensitive}}env-var-confidential{{/if}}'>
                                            {{#if this.isSensitive}}
                                                <em>confidential</em>
                                            {{else if this.isSet}}
                                                {{this.value}}
                                            {{else}}
                                                <em>(not set)</em>
                                            {{/if}}
                                        </div>
                                    </div>
                                {{/each}}
                            </div>
                        </div>
                        <div class='env-vars-group'>
                            <div class='env-vars-group-title'>
                                S3 Variables
                                <span class='env-vars-count'>{{ObjectLength envVars.s3}} total</span>
                            </div>
                            <div class='env-vars-list'>
                                {{#each envVars.s3}}
                                    <div class='env-var-item {{#unless this.isSet}}env-var-unset{{/unless}}'>
                                        <div class='env-var-info'>
                                            <div class='env-var-key'>{{@key}}</div>
                                        </div>
                                        <div class='env-var-value {{#unless this.isSet}}env-var-empty{{/unless}} {{#if this.isSensitive}}env-var-confidential{{/if}}'>
                                            {{#if this.isSensitive}}
                                                <em>confidential</em>
                                            {{else if this.isSet}}
                                                {{this.value}}
                                            {{else}}
                                                <em>(not set)</em>
                                            {{/if}}
                                        </div>
                                    </div>
                                {{/each}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='settings-footer'>
                <button class='settings-btn-action settings-btn-reset' onclick='resetToDefaults()'>
                    Reset to Defaults
                </button>
                <button class='settings-btn-action settings-btn-cancel' onclick='closeSettings()'>
                    Cancel
                </button>
                <button class='settings-btn-action settings-btn-save' onclick='saveSettings()'>
                    Apply Changes
                </button>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        let allTests = {{{ pageDispleyElements tests }}}.totalTests;
        let currentFilter = 'all';
        let currentPage = 1;
        let pageSize = 10;
        let searchTerm = '';
        let hasTodoTests = false;
        let reportTitle = '{{title}}';
        let groupingMode = 'all';

        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawTestChart);

        function createMetadataItems(metadata) {
            if (!metadata || Object.keys(metadata).length === 0) return '';

            return Object.entries(metadata).map(([key, value]) => `
                <div class='metadata-item meta-item' data-meta-key='${key}'>
                    <div class='metadata-key'>${key}</div>
                    <div class='metadata-value'>${typeof value === 'object' ? JSON.stringify(value, null, 2) : value}</div>
                </div>
            `).join('');
        }

        function drawTestChart() {
            const passedTests = {{getTestsByStatus tests "passed"}};
            const failedTests = {{getTestsByStatus tests "failed"}};
            const skippedTests = {{getTestsByStatus tests "skipped"}};
            const todoTests = {{getTestsByStatus tests "todo"}};

            const rows = [
                ['Status', 'Count'],
                ['Passed', passedTests],
                ['Failed', failedTests],
                ['Skipped', skippedTests],
            ];

            if (todoTests > 0) rows.push(['Todo', todoTests]);

            const data = google.visualization.arrayToDataTable(rows);

            const screenWidth = window.innerWidth;
            let chartHeight = 350;
            let chartAreaHeight = '80%';
            let chartAreaWidth = '95%';
            let pieSliceFontSize = 12;
            let legendFontSize = 12;

            if (screenWidth < 480) {
                chartHeight = 180;
                chartAreaHeight = '70%';
                chartAreaWidth = '90%';
                pieSliceFontSize = 9;
                legendFontSize = 9;
            } else if (screenWidth < 768) {
                chartHeight = 220;
                chartAreaHeight = '75%';
                chartAreaWidth = '92%';
                pieSliceFontSize = 10;
                legendFontSize = 10;
            } else if (screenWidth < 1024) {
                chartHeight = 260;
                chartAreaHeight = '75%';
                chartAreaWidth = '94%';
                pieSliceFontSize = 11;
                legendFontSize = 11;
            }

            const options = {
                title: reportTitle + ' Distribution',
                pieHole: 0.4,
                colors: todoTests > 0
                ? ['#10b981', '#ef4444', '#f59e0b', '#8b5cf6']
                : ['#10b981', '#ef4444', '#f59e0b'],
                legend: { position: 'bottom', alignment: 'center' },
                height: chartHeight,
                width: '100%',
                chartArea: {
                    left: '5%',
                    top: 20,
                    width: chartAreaWidth,
                    height: chartAreaHeight
                },
                pieSliceTextStyle: {
                    fontSize: pieSliceFontSize
                },
                legend: {
                    position: 'bottom',
                    alignment: 'center',
                    textStyle: {
                        fontSize: legendFontSize
                    },
                    maxLines: 1
                },
                titleTextStyle: {
                    fontSize: screenWidth < 768 ? 14 : 16
                },
                enableInteractivity: true,
                sliceVisibilityThreshold: 0,
                tooltip: {
                    trigger: 'hover',
                    showColorCode: true
                }
            };

            const chart = new google.visualization.PieChart(document.getElementById('testChart'));

            google.visualization.events.addListener(chart, 'ready', function() {
                const chartContainer = document.getElementById('testChart');
                chartContainer.style.overflow = 'visible';
            });

            chart.draw(data, options);
        }

        function createTestItem(test, index) {
            const testItem = document.createElement('div');
            testItem.className = 'test-item fade-in';
            testItem.dataset.testId = `test-${index}`;
            testItem.dataset.testIndex = index;

            if (test.traces) {
                if (!window.testTraces) window.testTraces = {};
                if (typeof test.traces === 'string') {
                    try {
                        window.testTraces[index] = JSON.parse(test.traces);
                    } catch (e) {
                        console.error('Failed to parse traces:', e);
                        window.testTraces[index] = [];
                    }
                } else {
                    window.testTraces[index] = test.traces;
                }
            }

            const statusClass = test.status.toLowerCase();
            const hasRetries = test.retries && test.retries.retryCount > 0;
            const hasTraces = test.traces && (typeof test.traces === 'string' ? test.traces.trim().length > 0 : test.traces.length > 0);
            const hasArtifacts = test.artifacts && test.artifacts.length > 0;
            const hasMetadata = test.meta && Object.keys(test.meta).length > 0;
            const hasStack = statusClass === 'failed' && test.stack && (typeof test.stack === 'string' ? test.stack.trim().length > 0 : true);
            const attemptsCount = (test.retries && Array.isArray(test.retries.attempts)) ? test.retries.attempts.length : 0;
            const retryCount = Math.max(0, attemptsCount - 1);
            const isTodo = statusClass === 'todo';
            const isSkippedOrTodo = statusClass === 'skipped' || statusClass === 'todo';
            const displayTime = isSkippedOrTodo ? '-' : formatDuration(test.run_time || 0);
            const hasMessage = hasMeaningfulMessage(test.message);
            const initialTab = getInitialTestTab({ isTodo, hasMessage, hasSteps: test.stepsArray?.length || test.steps });
            const initialMessageClass = initialTab === 'message' ? ' active' : '';
            const initialStepsClass = initialTab === 'steps' ? ' active' : '';
            const initialInfoClass = initialTab === 'info' ? ' active' : '';

            testItem.innerHTML = `
                <div class='test-header' onclick='toggleTest(this)'>
                    <div class='test-info'>
                        <div class='test-status-icon ${statusClass}'>
                            <i class='fas fa-${getStatusIcon(statusClass)}'></i>
                        </div>
                        <div class='test-details'>
                            <div class='test-title'>
                                ${test.title || 'Untitled Test'}
                                ${test.artifactsUploaded ? `
                                    <span class='artifact-upload-indicator' title='Artifacts uploaded to storage'>
                                        <i class='fas fa-cloud-upload-alt'></i>
                                    </span>
                                ` : ''}
                            </div>
                            <div class='test-suite'>${test.suite_title || 'Unknown Suite'}</div>
                        </div>
                    </div>
                    <div class='test-meta'>
                        <div class='test-duration'>
                            <i class='fas fa-clock'></i>
                            ${displayTime}
                        </div>
                        <div class='test-badges'>
                            ${test.flaky ? '<span class=\"badge badge-flaky\">Flaky</span>' : ''}
                            ${hasRetries ? `<span class=\"badge badge-retry\">Retries: ${test.retries.retryCount}</span>` : ''}
                        </div>
                        <i class='fas fa-chevron-down expand-icon'></i>
                    </div>
                </div>
                <div class='test-content'>
                    <div class='test-tabs'>
                        ${isTodo ? `
                            <button class='test-tab${initialInfoClass}' onclick='showTestTab(this, \"info\")'>
                                <i class='fas fa-info-circle'></i> Info
                            </button>
                        ` : `
                            <button class='test-tab${initialStepsClass}' onclick='showTestTab(this, \"steps\")'>
                                <i class='fas fa-list-ol'></i> Steps
                            </button>
                            <button class='test-tab${initialMessageClass}' onclick='showTestTab(this, \"message\")'>
                                <i class='fas fa-comment-dots'></i> Message
                            </button>
                            ${hasStack ? `<button class='test-tab' onclick='showTestTab(this, \"stack\")'>
                                <i class='fas fa-layer-group'></i> Stack
                            </button>` : ''}
                            ${hasRetries ? `<button class='test-tab' onclick='showTestTab(this, \"retries\")'>
                                <i class='fas fa-redo'></i> Retries
                            </button>` : ''}
                            ${hasArtifacts ? `<button class='test-tab' onclick='showTestTab(this, \"attachments\")'>
                                <i class='fas fa-paperclip'></i> Attachments
                            </button>` : ''}
                            ${hasMetadata ? `<button class='test-tab' onclick='showTestTab(this, \"metadata\")'>
                                <i class='fas fa-tags'></i> Metadata
                            </button>` : ''}
                            ${hasTraces ? `<button class='test-tab' onclick='showTestTab(this, \"traces\")'>
                                <i class='fas fa-bug'></i> Traces
                            </button>` : ''}
                        `}
                    </div>
                    ${isTodo ? `
                        <div class='test-tab-content${initialInfoClass}' data-tab='info'>
                            <div class='todo-info'>
                                <div class='todo-title'>
                                    <i class='fas fa-list-ul'></i>
                                    TODO Test
                                </div>
                                <div class='todo-description'>
                                    This test is marked as TODO and needs to be implemented.
                                </div>
                                <div class='todo-details'>
                                    <p><strong>Test Title:</strong> ${test.title || 'Untitled TODO Test'}</p>
                                    <p><strong>Suite:</strong> ${test.suite_title || 'Unknown Suite'}</p>
                                    <p><strong>Status:</strong> Implementation required</p>
                                </div>
                            </div>
                        </div>
                    ` : `
                        <div class='test-tab-content${initialStepsClass}' data-tab='steps'>
                            <div class='steps-container' id='steps-${index}'>
                                ${(() => {
                                    const hasStepsArray = test.stepsArray && Array.isArray(test.stepsArray) && test.stepsArray.length > 0;
                                    const hasStepsString = test.steps && typeof test.steps === 'string' && test.steps.trim().length > 0;

                                    if (hasStepsArray) {
                                        return renderStepsTree(test.stepsArray);
                                    } else if (hasStepsString) {
                                        const isErrorMessage = test.steps.match(/^Error:/i);

                                        if (!isErrorMessage) {
                                            return renderStepsTree(test.steps);
                                        }
                                    }

                                    return '<div style=\'padding: 20px; color: var(--gray-500); text-align: center;\'>No steps recorded</div>';
                                })()}
                            </div>
                        </div>
                        <div class='test-tab-content${initialMessageClass}' data-tab='message'>
                            <div class='message-block ${statusClass}'>
                                <strong>${statusClass.toUpperCase()}:</strong><br>
                                ${test.message || 'No message available'}
                            </div>
                        </div>
                        ${hasStack ? `<div class='test-tab-content' data-tab='stack'>
                            <div class='code-block'>${test.stack}</div>
                        </div>` : ''}
                    `}
                    ${hasRetries ? `<div class='test-tab-content' data-tab='retries'>
                        <div class='retry-info'>
                            <div class='retry-title'>
                                <i class='fas fa-redo'></i>
                                Retry Information (${retryCount} retries, ${attemptsCount} attempts)
                            </div>
                            <div class='retry-attempts'>
                                ${createRetryAttempts(test.retries)}
                            </div>
                        </div>
                    </div>` : ''}
                    ${hasArtifacts ? `<div class='test-tab-content' data-tab='attachments'>
                        <div class='attachments-grid'>
                            ${createAttachmentItems(test.artifacts)}
                        </div>
                    </div>` : ''}
                    ${Object.keys(test.meta || {}).length > 0 ? `<div class='test-tab-content' data-tab='metadata'>
                        <div class='metadata-grid' data-test-meta></div>
                    </div>` : ''}
                    ${hasTraces ? `<div class='test-tab-content' data-tab='traces'>
                        <div class='trace-viewer-container'></div>
                    </div>` : ''}
                </div>
            `;

            return testItem;
        }

        function getStatusIcon(status) {
            const icons = {
                'passed': 'check',
                'failed': 'times',
                'skipped': 'forward',
                'pending': 'clock',
                'todo': 'circle'
            };
            return icons[status] || 'question';
        }

        function formatDuration(milliseconds) {
            if (!milliseconds || milliseconds === 0 || milliseconds === null) return '0ms';

            const totalSeconds = Math.floor(milliseconds / 1000);
            const minutes = Math.floor(totalSeconds / 60);
            const seconds = totalSeconds % 60;
            const ms = milliseconds % 1000;

            if (minutes > 0) {
                return `${minutes}m ${seconds}s ${ms}ms`;
            } else if (seconds > 0) {
                return `${seconds}s ${ms}ms`;
            } else {
                return `${ms}ms`;
            }
        }

        function hasMeaningfulMessage(message) {
            return typeof message === 'string' && message.trim().length > 0 && message !== 'No message available';
        }

        function getInitialTestTab({ isTodo, hasMessage }) {
            if (isTodo) return 'info';
            if (hasMessage) return 'message';
            return 'steps';
        }

        function parseStepsToHtml(stepsText) {
            if (!stepsText || stepsText === 'No steps recorded') {
                return `<div class="step-item">
                <div class="step-content">
                    <p class="step-text">${stepsText || 'No steps recorded'}</p>
                </div>
                </div>`;
            }

            const raw = String(stepsText);
            const lines = raw
                .split(/<br\s*\/?>|\n/gi)
                .map(l => l.trim())
                .filter(Boolean);

            let stepNumber = 1;
            let html = '';

            lines.forEach(line => {
                const trimmedLine = line.trim();

                const numberedMatch = trimmedLine.match(/^(\d+)\.\s*(.+)$/);
                if (numberedMatch) {
                    const [, num, text] = numberedMatch;
                    stepNumber = parseInt(num, 10);
                    html += createStepHtml(text, stepNumber);
                    stepNumber++;
                    return;
                }

                const checkmarkMatch = trimmedLine.match(/^([✓✗])\s*(.+)$/);
                if (checkmarkMatch) {
                    const [, symbol, text] = checkmarkMatch;
                    const status = symbol === '✓' ? 'passed' : 'failed';
                    html += createStepHtml(text, stepNumber, status);
                    stepNumber++;
                    return;
                }

                const arrowMatch = trimmedLine.match(/^(→|▶|▸|▹)\s*(.+)$/);
                if (arrowMatch) {
                    const [, symbol, text] = arrowMatch;
                    html += createStepHtml(text, stepNumber, null, symbol);
                    stepNumber++;
                    return;
                }

                const bracketMatch = trimmedLine.match(/^\[([^\]]+)\]\s*(.+)$/);
                if (bracketMatch) {
                    const [, category, text] = bracketMatch;
                    html += createStepHtml(text, stepNumber, null, category);
                    stepNumber++;
                    return;
                }

                const keywordMatch = trimmedLine.match(/^(When|Then|And|Given|But|When\s+I|Then\s+I|And\s+I|Given\s+I|But\s+I)\s+(.+)$/i);
                if (keywordMatch) {
                    const [, keyword, text] = keywordMatch;
                    html += createStepHtml(text, stepNumber, null, keyword);
                    stepNumber++;
                    return;
                }

                html += createStepHtml(trimmedLine, stepNumber);
                stepNumber++;
            });

                return html || `<div class="step-item">
                    <div class="step-content">
                    <p class="step-text">No valid steps found</p>
                    </div>
                </div>`;
            }

        function renderStepsTree(steps, depth = 0) {
            if (Array.isArray(steps) && steps.length > 0) {
                let html = '';
                let stepNumber = 1;

                steps.forEach((step, index) => {
                    if (!step) return;

                    const hasChildren = step.steps && Array.isArray(step.steps) && step.steps.length > 0;
                    const stepId = `step-${depth}-${index}`;
                    const status = step.status || 'passed';
                    const duration = step.duration || 0;
                    const category = step.category || '';
                    const hasArtifacts = Array.isArray(step.artifacts) && step.artifacts.length > 0;

                    html += `
                        <div class="step-item step-level-${depth}" data-step-id="${stepId}">
                            <div class="step-content">
                                <div class="step-header">
                                    <div class="step-number">${stepNumber}</div>
                                    <div class="step-main">
                                        <p class="step-text">${step.title || 'Untitled step'}</p>
                                        ${category && category !== 'user' ? `<div class="step-category">${category}</div>` : ''}
                                        ${duration > 0 ? `<div class="step-time"><span class="step-duration"><i class="fas fa-clock"></i> ${formatDuration(duration)}</span></div>` : ''}
                                        ${hasArtifacts ? `<div class="step-attachments">${createAttachmentItems(step.artifacts)}</div>` : ''}
                                    </div>
                                    ${hasChildren ? `
                                        <button class="step-toggle" type="button" aria-expanded="true" onclick="toggleStepChildren(this)">
                                            <i class="fas fa-chevron-down"></i>
                                        </button>
                                    ` : ''}
                                    <div class="step-status ${status}"></div>
                                </div>
                            </div>
                        </div>
                    `;

                    if (hasChildren) {
                        html += `
                            <div class="step-children" data-parent-step-id="${stepId}">
                                ${renderStepsTree(step.steps, depth + 1)}
                            </div>
                        `;
                    }

                    stepNumber++;
                });

                return html;
            }

            if (typeof steps === 'string') {
                return parseStepsToHtml(steps);
            }

            return `<div class="step-item">
                <div class="step-content">
                    <p class="step-text">${steps}</p>
                </div>
            </div>`;
        }

        function createStepHtml(text, number, status = null, category = null) {
            const statusClass = status || 'passed';
            const categoryText = category && category !== 'user' ? `<div class="step-category">${category}</div>` : '';
            const durationIcon = status ? `<div class="step-time"><span class="step-duration"><i class="fas fa-clock"></i> auto</span></div>` : '';

            return `<div class="step-item">
                <div class="step-content">
                    <div class="step-header">
                        <div class="step-number">${number}</div>
                        <div class="step-main">
                            <p class="step-text">${text}</p>
                            ${categoryText}
                            ${durationIcon}
                        </div>
                        <div class="step-status ${statusClass}"></div>
                    </div>
                </div>
            </div>`;
        }

        function toggleStepChildren(button) {
            const stepItem = button.closest('.step-item');
            if (!stepItem) return;

            const stepId = stepItem.getAttribute('data-step-id');
            if (!stepId) return;

            const children = stepItem.parentElement.querySelector(`.step-children[data-parent-step-id="${stepId}"]`);
            if (!children) return;

            const collapsed = children.classList.toggle('collapsed');
            button.classList.toggle('collapsed', collapsed);
            button.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
        }

        function createRetryAttempts(retries) {
            const attempts = Array.isArray(retries?.attempts) ? retries.attempts : [];
            if (!attempts.length) return '';

            return attempts.map((a, idx) => {
                const status = String(a?.status || 'unknown').toLowerCase();
                const isFinal = idx === attempts.length - 1;

                const icon =
                    status === 'passed' ? 'check' :
                    status === 'failed' ? 'times' :
                    status === 'skipped' ? 'forward' :
                    'question';

                const cls =
                    status === 'passed' ? 'passed' :
                    status === 'failed' ? 'failed' :
                    status === 'skipped' ? 'skipped' :
                    'unknown';

                return `
                    <div class='retry-attempt ${cls}'>
                        <i class='fas fa-${icon}'></i>
                        Attempt ${idx + 1}${isFinal ? ' (final)' : ''}
                    </div>
                `;
            }).join('');
        }

       function normalizeArtifact(artifact) {
            if (!artifact) return { filePath: '', displayName: 'attachment' };

            if (typeof artifact === 'string') {
                return { filePath: artifact, displayName: artifact };
            }

            if (typeof artifact === 'object') {
                const filePath =
                (typeof artifact.path === 'string' && artifact.path) ||
                (typeof artifact.url === 'string' && artifact.url) ||
                (typeof artifact.href === 'string' && artifact.href) ||
                (typeof artifact.file === 'string' && artifact.file) ||
                '';

                const displayName =
                (typeof artifact.name === 'string' && artifact.name) ||
                (typeof artifact.fileName === 'string' && artifact.fileName) ||
                filePath ||
                'attachment';

                return { filePath, displayName };
            }

            const s = String(artifact);
                return { filePath: s, displayName: s };
            }

            function safeBasename(p) {
            return String(p || '')
                .split(/[\\/]/)
                .pop();
            }

        function createAttachmentItems(artifacts) {
            if (!Array.isArray(artifacts) || artifacts.length === 0) return '';

            return artifacts
                .map((artifact) => {
                const { filePath, displayName } = normalizeArtifact(artifact);
                const fileName = safeBasename(displayName || filePath) || 'attachment';

                if (!filePath) {
                    return `
                    <div class='attachment-item'>
                        <div class='attachment-file'>
                        <i class='fas fa-file' style='font-size: 48px; color: var(--gray-400);'></i>
                        <div style='margin-top: 10px; font-size: 14px; color: var(--gray-600);'>${fileName}</div>
                        <div style='margin-top: 6px; font-size: 12px; color: var(--gray-500);'>inline attachment</div>
                        </div>
                    </div>
                    `;
                }

                const isImage = /\.(jpg|jpeg|png|gif|webp)$/i.test(filePath) || /\.(jpg|jpeg|png|gif|webp)$/i.test(fileName);

                if (isImage) {
                    return `
                    <div class='attachment-item' onclick='openAttachment("${filePath}")''>
                        <img src='${filePath}' alt='${fileName}' class='attachment-image'>
                        <div class='attachment-name'>${fileName}</div>
                    </div>
                    `;
                }

                const icon = getFileIcon(filePath);
                return `
                    <div class='attachment-item' onclick='openAttachment("${filePath}")''>
                    <div class='attachment-file'>
                        <i class='fas fa-${icon}' style='font-size: 48px; color: var(--gray-400);'></i>
                        <div style='margin-top: 10px; font-size: 14px; color: var(--gray-600);'>${fileName}</div>
                    </div>
                    </div>
                `;
                })
                .join('');
        }

        function getFileIcon(filePath) {
            if (typeof filePath !== 'string') return 'file';
            const ext = (filePath.split('.').pop() || '').toLowerCase();
            const icons = {
                pdf: 'file-pdf',
                zip: 'file-archive',
                rar: 'file-archive',
                mp4: 'file-video',
                avi: 'file-video',
                mov: 'file-video',
                webm: 'file-video',
                mp3: 'file-audio',
                wav: 'file-audio',
                txt: 'file-alt',
                log: 'file-alt',
                json: 'file-code',
                xml: 'file-code',
                csv: 'file-excel',
                xlsx: 'file-excel',
                doc: 'file-word',
                docx: 'file-word',
            };
            return icons[ext] || 'file';
        }

        function toggleTest(header) {
            const testItem = header.closest('.test-item');
            testItem.classList.toggle('expanded');
        }

        function showTestTab(tab, tabName) {
            const testContent = tab.closest('.test-content');
            const allTabs = testContent.querySelectorAll('.test-tab');
            const allContents = testContent.querySelectorAll('.test-tab-content');

            allTabs.forEach(t => t.classList.remove('active'));
            allContents.forEach(c => c.classList.remove('active'));

            tab.classList.add('active');
            testContent.querySelector(`[data-tab=\"${tabName}\"]`).classList.add('active');

            if (tabName === 'traces') {
                const testItem = tab.closest('.test-item');
                const testIndex = testItem.dataset.testIndex;
                loadTraceForTest(testIndex);
            }
        }

        async function loadTraceForTest(testIndex) {
            const testItem = document.querySelector(`.test-item[data-test-index="${testIndex}"]`);
            if (!testItem) return;

            let traces = window.testTraces && window.testTraces[testIndex];
            if (!traces || !Array.isArray(traces) || traces.length === 0) return;

            traces = traces.filter(t => {
                if (typeof t === 'string' && t.trim().length > 0) return true;
                if (t && t.dataUrl && typeof t.dataUrl === 'string' && t.dataUrl.trim().length > 0) return true;
                return false;
            });
            if (traces.length === 0) return;

            const viewerDiv = testItem.querySelector('.trace-viewer-container');
            if (!viewerDiv) return;

            if (viewerDiv.dataset.loaded === 'true') return;

            let html = `
                <div class="traces-instruction">
                    <div class="instruction-header">
                        <i class="fas fa-info-circle"></i>
                        <span>How to view trace files</span>
                    </div>
                    <div class="instruction-content">
                        <ol>
                            <li>Download the trace file using the button below</li>
                            <li>Extract the .zip archive if needed</li>
                            <li><strong>Playwright traces:</strong><br>
                                <code>npx playwright show-trace trace.zip</code><br>
                                Or VS Code extension: "Playwright Test for VS Code"
                            </li>
                            <li><strong>TestCafe traces:</strong><br>
                                <code>testcafe show-trace trace.zip</code>
                            </li>
                            <li><strong>Other traces:</strong><br>
                                Check your testing framework documentation
                            </li>
                        </ol>
                    </div>
                </div>
            `;

            html += '<div class="traces-list">';

            for (let idx = 0; idx < traces.length; idx++) {
                const trace = traces[idx];
                const traceDataUrl = typeof trace === 'string' ? trace : trace.dataUrl;
                let traceName = 'trace.zip';

                if (typeof trace === 'object' && trace.name) {
                    traceName = trace.name;
                } else if (idx === 0) {
                    traceName = 'test-failed-trace.zip';
                } else {
                    traceName = `trace-${idx + 1}.zip`;
                }

                html += `
                    <div class="trace-download-item">
                        <div class="trace-info">
                            <i class="fas fa-file-archive"></i>
                            <span class="trace-name">${traceName}</span>
                        </div>
                        <button class="trace-download-btn" onclick='downloadTrace("${testIndex}", ${idx})'>
                            <i class="fas fa-download"></i>
                            Download Trace
                        </button>
                    </div>
                `;
            }

            html += '</div>';
            viewerDiv.innerHTML = html;
            viewerDiv.dataset.loaded = 'true';
        }

        function downloadTrace(testIndex, traceIdx) {
            const traces = window.testTraces && window.testTraces[testIndex];
            if (!traces || !Array.isArray(traces) || traceIdx >= traces.length) return;

            const trace = traces[traceIdx];
            const traceDataUrl = typeof trace === 'string' ? trace : trace.dataUrl;
            const traceName = typeof trace === 'object' && trace.name ? trace.name :
                             (traceIdx === 0 ? 'test-failed-trace.zip' : `trace-${traceIdx + 1}.zip`);

            const link = document.createElement('a');
            link.href = traceDataUrl;
            link.download = traceName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }

        function openAttachment(filePath) {
            const url = String(filePath || '').trim();

            const ok = /^(https?:\/\/|file:\/\/|\/|\.\/|\.\.\/)/i.test(url);
            if (!ok) return;

            const w = window.open(url, '_blank', 'noopener,noreferrer');
            if (w) w.opener = null;
        }

        function groupTestsBySuite(tests) {
            const groups = {};

            tests.forEach(test => {
                const suite = test.suite_title || 'Unknown Suite';
                if (!groups[suite]) {
                    groups[suite] = [];
                }
                groups[suite].push(test);
            });

            return Object.entries(groups).map(([name, tests]) => ({
                name,
                type: 'suite',
                tests
            }));
        }

        function groupTestsByFile(tests) {
            const groups = {};

            tests.forEach(test => {
                const file = test.file || 'Unknown File';
                if (!groups[file]) {
                    groups[file] = [];
                }
                groups[file].push(test);
            });

            return Object.entries(groups).map(([name, tests]) => ({
                name,
                type: 'file',
                tests
            }));
        }

        function filterTests() {
            const filteredTests = allTests.filter(test => {
                const matchesFilter = currentFilter === 'all' || test.status.toLowerCase() === currentFilter;
                const matchesSearch = searchTerm === '' ||
                    (test.title && test.title.toLowerCase().includes(searchTerm.toLowerCase())) ||
                    (test.suite_title && test.suite_title.toLowerCase().includes(searchTerm.toLowerCase()));

                return matchesFilter && matchesSearch;
            });

            return filteredTests;
        }

        function renderTests() {
            const container = document.getElementById('testsContainer');
            const filteredTests = filterTests();

            if (groupingMode === 'suite') {
                const groups = groupTestsBySuite(filteredTests);
                renderGroupedTests(container, groups);
                return;
            } else if (groupingMode === 'file') {
                const groups = groupTestsByFile(filteredTests);
                renderGroupedTests(container, groups);
                return;
            }

            const startIndex = (currentPage - 1) * pageSize;
            const endIndex = startIndex + pageSize;
            const paginatedTests = filteredTests.slice(startIndex, endIndex);

            if (paginatedTests.length === 0) {
                container.innerHTML = `
                    <div class='empty-state'>
                        <div class='empty-icon'>
                            <i class='fas fa-search'></i>
                        </div>
                        <div class='empty-title'>No Tests Found</div>
                        <div class='empty-description'>No tests match your current filter criteria.</div>
                    </div>
                `;
            } else {
                container.innerHTML = '';
                paginatedTests.forEach((test, index) => {
                    const testItem = createTestItem(test, startIndex + index);
                    container.appendChild(testItem);
                });
            }

            renderPagination(filteredTests.length);
            setTimeout(populateMetadataFields, 50);
        }

        function populateMetadataFields() {
            const metaGrids = document.querySelectorAll('[data-test-meta]');
            metaGrids.forEach(grid => {
                const testItem = grid.closest('.test-item');
                if (!testItem) return;

                const testIndex = parseInt(testItem.getAttribute('data-test-index'));
                const test = allTests[testIndex];
                if (!test || !test.meta) return;

                Object.entries(test.meta).forEach(([key, value]) => {
                    const metaItem = document.createElement('div');
                    metaItem.className = 'metadata-item meta-item';
                    metaItem.setAttribute('data-meta-key', key);

                    const keyDiv = document.createElement('div');
                    keyDiv.className = 'metadata-key';
                    keyDiv.textContent = key;

                    const valueDiv = document.createElement('div');
                    valueDiv.className = 'metadata-value';
                    valueDiv.textContent = typeof value === 'object' ? JSON.stringify(value, null, 2) : value;

                    metaItem.appendChild(keyDiv);
                    metaItem.appendChild(valueDiv);
                    grid.appendChild(metaItem);
                });
            });

            setTimeout(applyMetaVisibility, 10);
        }

        function renderGroupedTests(container, groups) {
            if (groups.length === 0) {
                container.innerHTML = `
                    <div class='empty-state'>
                        <div class='empty-icon'>
                            <i class='fas fa-search'></i>
                        </div>
                        <div class='empty-title'>No Tests Found</div>
                        <div class='empty-description'>No tests match your current filter criteria.</div>
                    </div>
                `;
                return;
            }

            container.innerHTML = '';

            const startIndex = (currentPage - 1) * pageSize;
            const endIndex = startIndex + pageSize;
            const paginatedGroups = groups.slice(startIndex, endIndex);

            paginatedGroups.forEach(group => {
                const groupItem = createTestGroup(group);
                container.appendChild(groupItem);
            });

            renderPagination(groups.length);
            setTimeout(populateMetadataFields, 50);
        }

        function createTestGroup(group) {
            const groupElement = document.createElement('div');
            groupElement.className = 'test-group';

            const passedCount = group.tests.filter(t => t.status.toLowerCase() === 'passed').length;
            const failedCount = group.tests.filter(t => t.status.toLowerCase() === 'failed').length;
            const skippedCount = group.tests.filter(t => t.status.toLowerCase() === 'skipped').length;
            const todoCount = group.tests.filter(t => t.status.toLowerCase() === 'todo').length;

            const groupIcon = group.type === 'suite' ? 'layer-group' : 'file-code';

            const header = document.createElement('div');
            header.className = 'test-group-header';
            header.innerHTML = `
                <div class='test-group-title'>
                    <i class='fas fa-${groupIcon}'></i>
                    <div class='test-group-name'>${group.name}</div>
                    <div class='test-group-count'>${group.tests.length} tests</div>
                </div>
                <div class='test-group-stats'>
                    ${passedCount > 0 ? `<div class='test-group-stat' style='color: #10b981;'><i class='fas fa-check-circle'></i> ${passedCount}</div>` : ''}
                    ${failedCount > 0 ? `<div class='test-group-stat' style='color: #ef4444;'><i class='fas fa-times-circle'></i> ${failedCount}</div>` : ''}
                    ${skippedCount > 0 ? `<div class='test-group-stat' style='color: #f59e0b;'><i class='fas fa-forward'></i> ${skippedCount}</div>` : ''}
                    ${todoCount > 0 ? `<div class='test-group-stat' style='color: #8b5cf6;'><i class='fas fa-clock'></i> ${todoCount}</div>` : ''}
                </div>
                <i class='fas fa-chevron-down test-group-expand'></i>
            `;
            header.onclick = () => toggleTestGroup(header);
            groupElement.appendChild(header);

            const content = document.createElement('div');
            content.className = 'test-group-content';

            group.tests.forEach((test, index) => {
                const testItem = createTestItem(test, index);
                content.appendChild(testItem);
            });

            groupElement.appendChild(content);

            return groupElement;
        }

        function toggleTestGroup(header) {
            const group = header.parentElement;
            group.classList.toggle('expanded');
        }

        function renderPagination(totalItems) {
            const container = document.getElementById('paginationContainer');
            const totalPages = Math.ceil(totalItems / pageSize);

            if (totalPages <= 1) {
                container.innerHTML = '';
                return;
            }

            let paginationHTML = '<div class=\"pagination\">';

            paginationHTML += `
                <button class='pagination-btn' onclick='goToPage(${currentPage - 1})'
                        ${currentPage === 1 ? 'disabled' : ''}>
                    <i class='fas fa-chevron-left'></i>
                </button>
            `;

            const maxVisiblePages = 5;
            let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
            let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

            if (endPage - startPage < maxVisiblePages - 1) {
                startPage = Math.max(1, endPage - maxVisiblePages + 1);
            }

            for (let i = startPage; i <= endPage; i++) {
                paginationHTML += `
                    <button class='pagination-btn ${i === currentPage ? 'active' : ''}'
                            onclick='goToPage(${i})'>${i}</button>
                `;
            }

            paginationHTML += `
                <button class='pagination-btn' onclick='goToPage(${currentPage + 1})'
                        ${currentPage === totalPages ? 'disabled' : ''}>
                    <i class='fas fa-chevron-right'></i>
                </button>
            `;

            paginationHTML += '</div>';
            container.innerHTML = paginationHTML;
        }

        function goToPage(page) {
            const filteredTests = filterTests();
            const totalPages = Math.ceil(filteredTests.length / pageSize);

            if (page < 1 || page > totalPages) return;

            currentPage = page;
            renderTests();
        }

        function updateCounts() {
            const by = (s) => allTests.filter(t => String(t.status || '').toLowerCase() === s).length;

            const counts = {
                all: allTests.length,
                passed: by('passed'),
                failed: by('failed'),
                skipped: by('skipped'),
                todo: by('todo'),
            };

            document.getElementById('countAll').textContent = counts.all;
            document.getElementById('countPassed').textContent = counts.passed;
            document.getElementById('countFailed').textContent = counts.failed;
            document.getElementById('countSkipped').textContent = counts.skipped;

            const todoEl = document.getElementById('countTodo');
            if (todoEl) todoEl.textContent = counts.todo;

            const todoTab = document.querySelector('.filter-tab[data-filter="todo"]');
            if (todoTab) todoTab.style.display = counts.todo > 0 ? '' : 'none';
        }

        function updateTitleColor() {
            const by = (s) => allTests.filter(t => String(t.status || '').toLowerCase() === s).length;
            const failed = by('failed');
            const passed = by('passed');
            const skipped = by('skipped');
            const todo = by('todo');

            const mainTitle = document.getElementById('mainTitle');
            if (!mainTitle) return;

            mainTitle.classList.remove('status-passed', 'status-failed', 'status-skipped', 'status-todo');

            if (failed > 0) {
                mainTitle.classList.add('status-failed');
            } else if (passed > 0) {
                mainTitle.classList.add('status-passed');
            } else if (skipped > 0) {
                mainTitle.classList.add('status-skipped');
            } else if (todo > 0) {
                mainTitle.classList.add('status-todo');
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            const filterTabs = document.querySelectorAll('.filter-tab');
            filterTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    filterTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');

                    currentFilter = this.dataset.filter;
                    currentPage = 1;
                    renderTests();
                });
            });

            
            const searchInput = document.getElementById('searchInput');
            searchInput.addEventListener('input', function() {
                searchTerm = this.value.trim();
                currentPage = 1;
                renderTests();
            });

            const pageSizeSelect = document.getElementById('pageSizeSelect');
            pageSizeSelect.addEventListener('change', function() {
                pageSize = parseInt(this.value);
                currentPage = 1;
                renderTests();
            });

            const groupingSelect = document.getElementById('groupingSelect');
            groupingSelect.addEventListener('change', function() {
                groupingMode = this.value;
                currentPage = 1;
                renderTests();
            });

            const badge = document.querySelector('.status-badge');
            if (badge) {
                const s = badge.textContent.trim().toLowerCase();
                badge.classList.add(`status-${s}`);
            }

            updateCounts();
            updateTitleColor();
            renderTests();
        });

        window.addEventListener('resize', function() {
            if (document.getElementById('testChart')) {
                drawTestChart();
            }
        });

        function formatFileSize(bytes) {
            if (!bytes) return '';
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            if (bytes === 0) return '0 Bytes';
            const i = Math.floor(Math.log(bytes) / Math.log(1024));
            return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
        }


        let visibleMetaKeys = new Set();
        const SETTINGS_STORAGE_KEY = 'testomatio_report_settings';

        function collectAllMetaKeys() {
            const metaKeys = new Map();

            allTests.forEach(test => {
                if (test.meta && typeof test.meta === 'object') {
                    Object.keys(test.meta).forEach(key => {
                        metaKeys.set(key, (metaKeys.get(key) || 0) + 1);
                    });
                }
            });

            return metaKeys;
        }

        function openSettings() {
            const modal = document.getElementById('settingsModal');
            modal.classList.add('active');

            const savedSettings = localStorage.getItem(SETTINGS_STORAGE_KEY);
            if (savedSettings) {
                visibleMetaKeys = new Set(JSON.parse(savedSettings));
            } else {
                const metaKeys = collectAllMetaKeys();
                visibleMetaKeys = new Set(metaKeys.keys());
            }

            renderSettingsMetaList();
        }

        function closeSettings() {
            const modal = document.getElementById('settingsModal');
            modal.classList.remove('active');
        }

        function switchSettingsTab(event) {
            const clickedTab = event.currentTarget;
            const targetTab = clickedTab.getAttribute('data-tab');

            const allTabs = document.querySelectorAll('.settings-tab');
            allTabs.forEach(tab => tab.classList.remove('active'));

            const allContents = document.querySelectorAll('.settings-tab-content');
            allContents.forEach(content => content.classList.remove('active'));

            clickedTab.classList.add('active');

            const targetContent = document.querySelector(`.settings-tab-content[data-tab="${targetTab}"]`);
            if (targetContent) {
                targetContent.classList.add('active');
            }
        }

        function resetToDefaults() {
            const metaKeys = collectAllMetaKeys();
            visibleMetaKeys = new Set(metaKeys.keys());

            const checkboxes = document.querySelectorAll('#metaFieldsList input[type="checkbox"]');
            checkboxes.forEach(cb => {
                cb.checked = true;
            });

            console.log('[Settings] Reset to defaults - all meta fields visible');
        }

        function renderSettingsMetaList() {
            const container = document.getElementById('metaFieldsList');
            const metaKeys = collectAllMetaKeys();

            if (metaKeys.size === 0) {
                container.innerHTML = `
                    <div style='grid-column: 1/-1; text-align: center; color: var(--gray-500); padding: 40px;'>
                        <i class='fas fa-tag' style='font-size: 48px; margin-bottom: 15px; opacity: 0.3;'></i>
                        <p style='margin: 0;'>No metadata fields found in tests</p>
                    </div>
                `;
                return;
            }

            const sortedKeys = Array.from(metaKeys.entries()).sort((a, b) => b[1] - a[1]);

            container.innerHTML = sortedKeys.map(([key, count]) => `
                <label class='settings-meta-item'>
                    <input
                        type='checkbox'
                        value='${key}'
                        ${visibleMetaKeys.has(key) ? 'checked' : ''}
                        onchange='toggleMetaKey("${key}")'
                    >
                    <span class='settings-meta-label'>${key}</span>
                    <span class='settings-meta-count'>${count}</span>
                </label>
            `).join('');
        }

        function toggleMetaKey(key) {
            if (visibleMetaKeys.has(key)) {
                visibleMetaKeys.delete(key);
            } else {
                visibleMetaKeys.add(key);
            }
        }

        function saveSettings() {
            localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(Array.from(visibleMetaKeys)));

            applyMetaVisibility();

            closeSettings();
        }

        function applyMetaVisibility() {
            const allMetaItems = document.querySelectorAll('.meta-item[data-meta-key]');

            allMetaItems.forEach(item => {
                const key = item.getAttribute('data-meta-key');
                if (visibleMetaKeys.has(key)) {
                    item.classList.remove('hidden');
                } else {
                    item.classList.add('hidden');
                }
            });
        }

        function initializeSettings() {
            const savedSettings = localStorage.getItem(SETTINGS_STORAGE_KEY);

            if (savedSettings) {
                try {
                    const parsed = JSON.parse(savedSettings);
                    visibleMetaKeys = new Set(parsed);
                } catch (e) {
                    console.error('[Settings] Failed to parse saved settings, using defaults', e);
                    const metaKeys = collectAllMetaKeys();
                    visibleMetaKeys = new Set(metaKeys.keys());
                }
            } else {
                const metaKeys = collectAllMetaKeys();
                visibleMetaKeys = new Set(metaKeys.keys());
            }

        }

        document.addEventListener('DOMContentLoaded', function() {
            initializeSettings();
        });

        const originalRenderTests = renderTests;
        renderTests = function() {
            originalRenderTests();
            setTimeout(applyMetaVisibility, 50);
        };
    </script>
</body>
</html>