function openTab(pageName, elmnt) {
    // Hide all elements with class="tabcontent" by default */
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    tablinks = document.getElementsByClassName("tablink");

    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
        tablinks[i].classList.remove("active");
    }
    
    // Show the specific tab content
    document.getElementById(pageName).style.display = "block";
    elmnt.classList.add("active");
}

jQuery(document).ready(function($) {      
    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();

    const detail = document.getElementById("detail-view");
    console.log(`Details view length: ${detail.length}.`, detail);

    detail.addEventListener("populate", event => {
        console.log('Detail view dataset', detail.dataset, detail.dataset.src);
        const validationForm = document.getElementById('validation-form');
        const resourceField = validationForm.querySelector('input[name="resource"]');
        resourceField.value = JSON.stringify({ '@id': detail.dataset.src });        
    });


 });