<!-- CSS -->
   <style>
      .tabbed-content {
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        width: 95%;
        margin: 0 auto;
        margin-left: 20px;
      }

      .tabs-wrapper {
        display: none;
      }

      .tabs-wrapper.current {
        display: inherit;
      }

      .tabs {
        margin: 0;
        padding: 0;
        margin-right: 30px;
        list-style: none;
        display: flex;
        line-height: normal;
      }
      .side.tabs {
        width: 200px;
        float: left;
        display: block;
        margin-top: 0px;
        height: 700px;
        overflow-y: auto;
        overflow-x: hidden;
        background: #f2f2f2;
      }

      /* Individual tab */
      .tab-link {
        color: #fff;
        display: block;
        padding: 15px 25px;
        margin-bottom: 0px;
        background: #c2c2c2;
        cursor: pointer;
        width: 150px;
        text-align: center;
        word-break: break-word;
        letter-spacing: 1.5px;
      }
      .side.tab-link {
        width: 225px;
        text-align: left;
        margin-top: 0px !important;
      }
      .tab-link:hover {
        background: #00693c;
      }
      .tab-link.current {
        background: #00693c;
        color: #fff;
      }
      .tab-content {
        display: none;
        border: 4px solid #cccccc;
        padding: 20px;
        margin: 0;
        float: left;
        min-height: 700px;
        width: 75%;
        box-sizing: border-box;
        position: relative;
      }
      .tab-content.current {
        display: inherit;
      }
    </style>


<!-- HTML FOR THE TABS -->
<div class="tabbed-content">
    <!-- Top Tab Navigation -->
    <ul class="tabs">
        <li class="top-nav tab-link current" data-tab="tides">TIDES</li>
        <li class="top-nav tab-link" data-tab="kentico">Kentico</li>
    </ul>

    <!-- Tabs Wrapper TIDES -->
    <div class="tabs-wrapper current" id="tides">
        <!-- Archive Video -->
        <div class="tab-content current" id="archive">
            <h3>How to Add to the TIDES Feature Archive</h3>
            <p>Small Description here</p>
            <div class="video-wrapper">
                <div class="video-container" id="video-container">
                    <video controls id="video" preload="metadata" width="600" height="400">
                        <source src="../video/2022/Kentico-Staging-Instructions.mp4" type="video/mp4" />
                    </video>
                </div>
            </div>
        </div>

        <!-- Marketing Email Calendar Video -->
        <div class="tab-content" id="calendar">
            <h3>How to Add to the Marketing Email Calendar</h3>
            <p>Small Description here</p>
            <p>Video Here</p>
        </div>

        <!-- TIDES SIDE TAB -->
        <ul class="side tabs">
            <li class="side tab-link current" data-tab="archive">
                How to Add to the TIDES Feature Archive
            </li>
            <li class="side tab-link" data-tab="calendar">
                How to Add to the Marketing Email Calendar
            </li>
        </ul>
    </div>

    <!-- Tabs Wrapper KENTICO -->
    <div class="tabs-wrapper" id="kentico">
        <!-- Kentico Staging Environment Video -->
        <div class="tab-content current" id="kenticoStaging">
            <h3>How to Use the Kentico Staging Environment</h3>
            <p>Small Description here</p>
            <p>Video Here</p>
        </div>

        <!-- Kentico SIDE TAB -->
        <ul class="side tabs">
            <li class="side tab-link current" data-tab="kenticoStaging">
                How to Use the Kentico Staging Environment
            </li>
        </ul>
    </div>
</div>
<!-- JAVASCRIPT FOR THE TABS -->
<script>
    const sideTabs = () => {
      let tabs = document.querySelectorAll(".side .tab-link");
    		let activeTopTab = document.getElementsByClassName("top-nav tab-link current")[0].getAttribute("data-tab");
    
    		tabs.forEach((btn) => {
    			btn.addEventListener("click", () => {
    				let closestTabWraper = btn.closest(".tabs-wrapper");
    		// only want to remove + add classes to sections that are currently visible or active 
    				if(closestTabWraper.id === activeTopTab) {
            //select only btns related to that top tab and remove the current class from all. Adding it back to only the one clicked. 
    					//this accounts for if a button is clicked on itself
    					let visibleTabs = closestTabWraper.querySelectorAll(".side .tab-link")
    					visibleTabs.forEach(b => b.classList.remove("current"));
    					btn.classList.add("current");
    					//Repeat the process for sections, but adding the class to the tabContent that matches the element id of the clicked tab
    					let relatedSections = closestTabWraper.querySelectorAll(".tab-content");
    					relatedSections.forEach(s =>s.classList.remove("current"));
    					let matchingTab = btn.getAttribute("data-tab");
                  document.getElementById(matchingTab).className += " current";
    				}
    			})
    		})
    };
    
    const topTabs = () => {
      const tabs = document.querySelectorAll(".top-nav");
      const tabWrappers = document.querySelectorAll(".tabs-wrapper");
    		tabs.forEach((btn) => {
    			btn.addEventListener("click", () => {
    				tabs.forEach(b => b.classList.remove("current"));
    				btn.classList.add("current");
    				tabWrappers.forEach(t => t.classList.remove("current"));
    				let matchingWrapper = btn.getAttribute("data-tab");
    				document.getElementById(matchingWrapper).classList.add("current");
    			});
    		})
    };
    
    topTabs();
    sideTabs();
</script>