trainers.js

let trainers = {};
let tableParentId = 'table';
let detailsParentId = 'details';

function getRowId(resource) {
    return `${resource.id}_row`
}

function updateDetails(trainerId) {
    const trainer = trainers?.data?.find(item => item.id === trainerId);
    const parent = document.getElementById(detailsParentId);

    parent.innerHTML = `
    <div class="card" id="${trainer.id}_card">
      <img src="${trainer.profileUrl}" class="card-img-top" alt="${trainer.name}">
      <div class="card-body">
        <h5 class="card-title">${trainer.name}</h5>
        <p class="card-text">
            ID: ${trainer.id} </br>
            Created: ${trainer.created} </br>
            Last Update: ${trainer.lastUpDate}
        </p>
      </div>
    </div>
    `
}

function trainerToRow(trainer) {
    return `
    <tr id="${getRowId(trainer)}" onclick="updateDetails('${trainer?.id?.trim()}')">
        <th scope="row">${trainer.id}</th>
        <td>${trainer.name}</td>
        <td>${trainer.created}</td>
        <td>${trainer.lastUpDate}</td>
    </tr>
    `
}

function createTrainersTable() {
    const tableParent = document.getElementById(tableParentId);
    tableParent.innerHTML = `
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Name</th>
                    <th scope="col">Created</th>
                    <th scope="col">Last Update</th>
                </tr>
            </thead>
            <tbody>
                ${
        trainers.data.map(resource => `${trainerToRow(resource)}`).join("\n")
        || "no data"
    }
            </tbody>
        </table>
    `
}