#!/usr/bin/perl
use strict;
use warnings;

# Define the filename
my $filename = 'ui_list_example.html';

# Open the file for writing
open(my $fh, '>', $filename) or die "Could not open file '$filename' $!";

# Print the HTML header
print $fh <<'HTML_HEADER';
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #eef2f5;
            margin: 0;
            padding: 20px;
        }
        .table-container {
            max-width: 100%;
            margin-bottom: 20px;
            overflow-x: auto;
        }
        table {
            width: 100%;
            border-collapse: separate; /* Use separate borders for spacing */
            border-spacing: 0 5px; /* Adds 5px space between rows */
            margin-top: 10px;
        }
        th {
            padding: 12px 15px;
            text-align: left;
            background-color: #4a90e2;
            color: white;
            font-weight: bold;
            position: sticky;
            top: 0;
            z-index: 1;
        }
        tr {
            background-color: white;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            border-radius: 5px; /* Adds rounded corners to rows */
            transition: transform 0.2s, box-shadow 0.2s;
        }
        td {
            padding: 12px 15px;
        }
        tr:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	    color: #ae0000;
        }
        .table-container::-webkit-scrollbar {
            height: 8px;
        }
        .table-container::-webkit-scrollbar-thumb {
            background-color: #ccc;
            border-radius: 5px;
        }
        .table-container::-webkit-scrollbar-track {
            background: #f0f0f0;
        }
    </style>
    <title>Enhanced UI List Example</title>
</head>
<body>
    <h1>UI-style List of Records (30 Rows)</h1>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                    <th>Column 4</th>
                    <th>Column 5</th>
                    <th>Column 6</th>
                    <th>Column 7</th>
                    <th>Column 8</th>
                    <th>Column 9</th>
                    <th>Column 10</th>
                </tr>
            </thead>
            <tbody>
HTML_HEADER

# Generate 30 rows
for my $row (1..30) {
    print $fh "                <tr>\n";
    for my $col (1..10) {
        print $fh "                    <td>Row $row, Col $col</td>\n";
    }
    print $fh "                </tr>\n";
}

# Print the HTML footer
print $fh <<'HTML_FOOTER';
            </tbody>
        </table>
    </div>
</body>
</html>
HTML_FOOTER

# Close the file
close $fh;

print "HTML document generated as '$filename'\n";
