<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f4f4f4;
        }
        input[type="text"], select {
            width: 100%;
            box-sizing: border-box;
        }
    </style>
    <h1>Enter Athlete Data</h1>
    <!-- Event ID Input -->
        <label for="eventId">Event ID</label>
        <input type="text" id="eventId" placeholder="Enter Event ID" required>
    <form id="dataForm" onsubmit="submitTable(event)">
        <!-- File Upload -->
            <label for="csvFileInput">Upload CSV File</label>
            <input type="file" id="csvFileInput" accept=".csv" onchange="handleCSVUpload(event)">
        <!-- Data Table -->
            <table>
                <thead>
                    <tr>
                        <th>Run ID</th>
                        <th>BIP</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Gender</th>
                        <th>FIS Code</th>
                        <th>Licence Code</th>
                        <th>Licence Type</th>
                        <th>Klub</th>
                        <th>Country</th>
                        <th>Date of Birth</th>
                        <th>Category</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Rows will be dynamically added -->
                </tbody>
            </table>
        <!-- Buttons -->
            <button type="button" onclick="addRow()">Add Row</button>
            <button type="submit">Submit</button>
    </form>
    <!-- Status message -->