(function (el) {
    let data = [{"picture":"https://i.vimeocdn.com/video/2143116434-07d6a9c8a949de3ce78a563572adadb0d69fd0ab87eef674aab68f002fe0deba-d?region=us","duration":1595,"date":"Apr 7","live":"false","name":"Chapel","player_embed_url":"https://player.vimeo.com/video/1180891895?h=591a724dee"}];
    let tmpl = `
    <div class="chapel-videos">
        <div class="block-inner">
            <div class="col">
                <div class="contents">
                    <h1>{{title}}</h1>
                    <p>{{content}}</p>
                    <div class="other-links"><a class="button" href="{{live_link}}">{{live_link_label}}</a></div>
                </div>
            </div>
            <div class="col">
                <div class="chapel">

                </div>
            </div>
        </div>
    </div>
`;
    let styles = `.chapel-videos .block-inner{display:flex;flex-direction:row;align-items:center;}.chapel-videos .block-inner .col{width:50%;}.chapel-videos .block-inner .col .contents{display:flex;flex-direction:column;gap:1rem;width:90%;justify-content:center;margin:auto;}.chapel-videos .block-inner .col .contents h1{font-size:3rem;position:relative;margin:0;letter-spacing:-.1rem;padding:0;color:#a80000;}.chapel-videos .block-inner .col .contents p{margin:0;}.chapel-videos .block-inner .col .contents .chapel-links{display:flex;flex-direction:row;gap:1rem;}.chapel-videos .block-inner .col .contents .chapel-links .chapel-link{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;line-height:1.2;cursor:pointer;padding:.5rem;border-radius:.5rem;background:#f5f5f5;}.chapel-videos .block-inner .col .contents .chapel-links .chapel-link:hover{background:#a80000;}.chapel-videos .block-inner .col .contents .chapel-links .chapel-link:hover .name{color:#fff;}.chapel-videos .block-inner .col .contents .chapel-links .chapel-link .thumb img{border-radius:.5rem;}.chapel-videos .block-inner .col .contents .other-links .button{padding:1rem 1.5rem;}.chapel-videos .block-inner .col .chapel{width:90%;margin:auto;}.chapel-videos .block-inner .col .chapel .embedded-iframe{border-radius:.5rem;}.chapel-videos .block-inner .col .chapel .chapel-details .chapel-name{margin:0;font-size:1.25rem;font-weight:600;}@media screen and (min-width:768px) and (max-width:991px){.chapel-videos .block-inner{flex-direction:column!important;gap:1rem;}.chapel-videos .block-inner .col{width:100%;}.chapel-videos .block-inner .col .contents h1{font-size:2rem;}.chapel-videos .block-inner .col .contents .other-links{padding-top:0;}}@media screen and (max-width:767px){.chapel-videos .block-inner{flex-direction:column!important;gap:1rem;}.chapel-videos .block-inner .col{width:100%;}.chapel-videos .block-inner .col .contents h1{font-size:2rem;}.chapel-videos .block-inner .col .contents .other-links{padding-top:0;}}`;
     
    if (el) {
        el.innerHTML = `${tmpl}<style>${styles}</style>`;
        let title = data[0].name == 'Chapel' ? 'Chapel, ' + data[0].date.replace(' ', '. ') : data[0].name;
        el.querySelector('.chapel').innerHTML = `<div class="embedded-iframe"><iframe id="vimeo" src="${data[0].player_embed_url}?like=0&share=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div><div class="chapel-details"><div class="chapel-name">${title}</div></div>`;
        /*for (let i = data.length - 1; i >= 0; i--) {
            if (i == 0) {
                console.log(data[i]); 
                el.querySelector('.chapel').innerHTML = `<div class="embedded-iframe"><iframe id="vimeo" src="${data[i].player_embed_url}?like=0&share=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div><div class="chapel-details"><div class="chapel-name">${data[i].name}, ${data[i].date}</div></div>`
            } else { 
                let vidNum = data[i].player_embed_url.match(/\d+/)[0]
                html += `<a class="chapel-link" href="https://vimeo.com/${vidNum}" target="_blank"><div class="thumb"><img src="${data[i].picture}"/></div><div class="name">${data[i].name}, ${data[i].date}</div></div>`;
            }
        }
        //el.querySelector('.chapel-links').innerHTML = html; 
        el.addEventListener('click', function (e) {
            let target = e.target.closest('[data-video]'); 
            if (target) { 
                el.querySelector('iframe').setAttribute('src', target.dataset.video); 
                el.querySelector('.chapel-name').innerHTML = target.dataset.name + ', ' + target.dataset.date;
            }
        }); */
    }
})(document.querySelector('#'));