{{#fields}}
    {{#logged_username}}
        <div class="row ml-0">
            {{{header_text}}}
        </div>
        <div class="row lead ml-0">
            {{{description_text}}}
        </div>
        <div class="row">
            <div class="col-3 getting_started_playlist_navigation">
                <ul class = "nav flex-column">
                    {{#step_text_final}}
                        <li class = "nav-item gs_nav_item_link" playlist_index = "{{index}}">
                            {{#already_watched}}
                                <i class="fa fa-check-square-o" aria-hidden="true" style = "margin-right:10px;"></i>
                            {{/already_watched}}
                            {{^already_watched}}
                                <i class="fa fa-square-o" aria-hidden="true" style = "margin-right:10px;"></i>
                            {{/already_watched}}
                            <a>{{value}}</a>
                        </li>
                    {{/step_text_final}}
                </ul>
            </div>

            {{#walk_me_html}}
                <div class="col-4 getting_started_walk_me">
                    {{{walk_me_html}}}
                </div>
            {{/walk_me_html}}

            <div class="col-7 getting_started_video">
                {{{step_help_html}}}
                <div class="brightcove_video_html_container">
                    {{{brightcove_video_html}}}
                </div>
                <div class="extra_html_container">
                    <h5>Ready to test your skills?</h5>
                    <a class = "btn btn-primary btn-green" href_link = "online-training/take-quiz" onclick = "__gotoPage(this);">Take the Getting Started with Aconex quiz.</a>
                </div>
            </div>
        </div>

        <script type = "text/javascript">
            var gsPlayer = false;

            function __gotoPage(link) {
                let urlObject = new URL(window.location.href); 
                let gotoURL = urlObject.origin + (SCSRenderAPI.sitePrefix ? SCSRenderAPI.sitePrefix : "/") + (SCS.pageLanguageCode && SCS.pageLanguageCode !== undefined && SCS.pageLanguageCode !== null ? SCS.pageLanguageCode : SCS.siteInfo.properties.defaultLanguage) + "/" + $(link).attr('href_link');
                window.location.href = gotoURL;
            }
        
            function initializePage() {
                $('.getting_started_walk_me .walk_me_content').each(function(index, item) {
                    if(!$(item).hasClass('wmc_0'))
                        $(item).hide();
                });
        
                $('.getting_started_video .step_help_link').each(function(index, item) {
                    if(!$(item).hasClass('shl_0'))
                        $(item).hide();
                });

                $('.brightcove_video_html_container').show();
                $('.extra_html_container').hide();
            }
        
            function initializePlaylistNavigation() {
                // videojs.getPlayer('myPlayerID').ready(function() {
                //     gsPlayer = this;
                // });
                
                $('.gs_nav_item_link').click(function() {
                    let playlistIndex = $.trim($(this).attr('playlist_index'));
        
                    if($('.getting_started_walk_me').length > 0)
                    {
                        $('.getting_started_walk_me .walk_me_content').each(function(index, item) {
                            $(item).hide();
                            if($(item).hasClass('wmc_' + playlistIndex))
                                $(item).show();
                        });
                    }
        
                    if($('.getting_started_video .step_help_link_container').length > 0)
                    {
                        $('.getting_started_video .step_help_link').each(function(index, item) {
                            $(item).hide();
                            if($(item).hasClass('shl_' + playlistIndex))
                                $(item).show();
                        });
                    }

                    if(playlistIndex <= myPlayer.playlist.lastIndex())
                    {
                        $('.brightcove_video_html_container').show();
                        $('.extra_html_container').hide();

                        let currentIndex = myPlayer.playlist.currentIndex();
                        console.log('Current index', currentIndex);
                        console.log('Need to go to', playlistIndex);
                        myPlayer.playlist.currentItem(parseInt(playlistIndex));
            
                        let currentIndex1 = myModalPlayer.playlist.currentIndex();
                        console.log('Current index for modal', currentIndex1);
                        console.log('Need to go to', playlistIndex);
                        myModalPlayer.playlist.currentItem(parseInt(playlistIndex));
                    }
                    else
                    {
                        $('.brightcove_video_html_container').hide();
                        $('.extra_html_container').show();
                    }
                });
            }
            
            $(function() {
                // console.log('after page init');
                initializePage();
                initializePlaylistNavigation();
        
                $('#gs_video_modal').on('hidden.bs.modal', function() {
                    // console.log('here');
                    myModalPlayer.pause();
                    myPlayer.pause();
                });
            });
        </script>
    {{/logged_username}}

    {{^logged_username}}
        <h4>You must be logged in to view this page. Redirecting you to the login screen. Please Wait...</h4>
        <script type = "text/javascript">
            setTimeout(function(){
                window.location.replace("{{{oce_secure_content_redirection_url}}}");
            }, 2000);
        </script>

    {{/logged_username}}
{{/fields}}