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

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

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

    parent.innerHTML = `
    <div class="card" id="${tr.id}_card">
      <img src="${tr.profileUrl}" class="card-img-top" alt="${tr.name}">
      <div class="card-body">
        <h5 class="card-title">${tr.name}</h5>
        <p class="card-text">
            Creation Date: ${tr.created} <br>
            Last Updated: ${tr.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>
    </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>
                </tr>
            </thead>
            <tbody>
                ${
        trainers.data.map(resource => `${trainerToRow(resource)}`).join("\n")
        || "no data"
    }
            </tbody>
        </table>
    `
}