---
import Layout from '../layouts/Layout.astro';
import '../styles/playground.css';

import { features } from '../config';
---

<Layout title="Playground">
     <!-- Tab links -->
    <div class="tab">
        <button class="tablinks" id="defaultOpen" onclick="openCity(event, 'London');">LBRY SDK</button>
        <button class="tablinks" onclick="openCity(event, 'Paris');">Hub</button>
        <button class="tablinks" onclick="openCity(event, 'Tokyo');">Tokyo</button>
    </div>
  
    <!-- Tab content -->
    <div id="London" class="tabcontent">
        <h3>London</h3>
        <p>London is the capital city of England.</p>
    </div>

    <div id="Paris" class="tabcontent">
        <h3>Paris</h3>
        <p>Paris is the capital of France.</p>
    </div>

    <div id="Tokyo" class="tabcontent">
        <h3>Tokyo</h3>
        <p>Tokyo is the capital of Japan.</p>
    </div>

    <script is:inline>
        document.getElementById("defaultOpen").click();
        function openCity(evt, cityName) {
        // Declare all variables
        let tabcontent, tablinks;

        // Get all elements with class="tabcontent" and hide them
        tabcontent = document.getElementsByClassName("tabcontent");
        for (let i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }

        // Get all elements with class="tablinks" and remove the class "active"
        tablinks = document.getElementsByClassName("tablinks");
        for (let i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        // Show the current tab, and add an "active" class to the button that opened the tab
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
        } 
    </script>
</Layout>