Widget:Skillbox

<script>

   (function () {
       const raw = document.getElementById('skillbox-data');
       if (!raw) return;

       const habilidades = [];

       for (let i = 1; i <= 15; i++) {
           const nome = raw.dataset[`hab${i}`];
           const descricao = raw.dataset[`de${i}`];
           const videoFile = raw.dataset[`vid${i}`];
           if (!nome || !videoFile || videoFile.trim() === ) continue;

           habilidades.push({
               nome,
               descricao,
               videoUrl: `https://wiki.gla.com.br/index.php/Special:FilePath/${videoFile}`,
               id: `video${i}`
           });
       }

       const tabsContainer = document.getElementById('skill-tabs');
       const videoContainer = document.getElementById('skill-videos');
       const descText = document.getElementById('desc-text');

       habilidades.forEach((hab, idx) => {
           const btn = document.createElement('button');
           btn.className = 'skillbox-tab' + (idx === 0 ? ' active' : );
           btn.dataset.video = hab.id;
           btn.textContent = hab.nome;
           tabsContainer.appendChild(btn);

           const videoWrapper = document.createElement('div');
           videoWrapper.id = hab.id;
           videoWrapper.className = 'skillbox-video' + (idx === 0 ? ' active' : );

           const video = document.createElement('video');
           video.className = 'skillbox-video-element';
           video.controls = true;
           video.preload = 'auto';

           const source = document.createElement('source');
           source.src = hab.videoUrl;
           source.type = 'video/mp4';
           video.appendChild(source);

           videoWrapper.appendChild(video);
           videoContainer.appendChild(videoWrapper);
       });

       if (habilidades.length) {
           habilidades[0].descricao = habilidades[0].descricao.replace(/(.*?)/g, '$1');
           descText.innerHTML = habilidades[0].descricao;
       }

       const tabs = document.querySelectorAll('.skillbox-tab');
       const videos = document.querySelectorAll('.skillbox-video');

       tabs.forEach((tab, idx) => {
           tab.addEventListener('click', () => {
               tabs.forEach(t => t.classList.remove('active'));
               tab.classList.add('active');

               habilidades[idx].descricao = habilidades[idx].descricao.replace(/(.*?)/g, '$1');
               descText.innerHTML = habilidades[idx].descricao;

               videos.forEach(v => {
                   const videoTag = v.querySelector('video');
                   if (v.id === habilidades[idx].id) {
                       v.classList.add('active');
                       videoTag.currentTime = 0;
                       videoTag.play();
                   } else {
                       v.classList.remove('active');
                       videoTag.pause();
                   }
               });
           });
       });

       raw.remove();
   })();

</script>

<style> .skillbox-video {

   display: none;
   width: 100%;
   max-width: 900px;
   aspect-ratio: 16 / 9;
   margin: 0 auto;
   padding: 0;

}

.skillbox-video.active {

   display: flex;
   justify-content: center;
   align-items: center;

} </style>