<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/theme.css">
    <title>Interverse - Libre Solutions Network</title>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="/helper.js"></script>
    <script src="interverse.js"></script>
    <!-- Primary Meta Tags -->
    <meta name="title" content="Interverse - Libre Solutions Network">
    <meta name="description" content="A web0 search engine.">
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Interverse - Libre Solutions Network">
    <meta property="og:description" content="A web0 search engine.">
    <meta property="og:image" content="https://libresolutions.network/logo.svg">
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:title" content="Interverse - Libre Solutions Network">
    <meta property="twitter:description" content="A web0 search engine.">
    <meta property="twitter:image" content="https://libresolutions.network/logo.svg">
</head>

<body>
    <header style="align-content: center;">
        <img src="/logo.svg">
        <h1><a href="/">Libre Solutions Network</a> - Interverse <a href="/Interverse/Docs"><u>Docs</u></a></h1>
    </header>
    <div class="interverse" x-data x-if="Alpine.store('data')">
        <div id="interverse-details">
            <img x-bind:src="Alpine.store('data')['image']">
            <h1 x-text="Alpine.store('data')['name']"></h1>
        </div>
        <hr>
        <h2>Content:</h2>
        <div id="interverse-resources">
            <template x-for="resource in Alpine.store('data')['resources']">
                <a x-bind:href="resource['location']">
                <div class="interverse-resource">
                    <img class="interverse-resource-icon" x-bind:src="resource['icon']">
                    <h2 x-text="resource['label']"></h2>
                    <p x-text="resource['description']"></p>
                </div>
                </a>
            </template>
        </div>
        <h2>Links</h2>
        <div id="interverse-connections">
            <template x-for="connection in Alpine.store('data')['connections']">
                <div class="interverse-connection" >
                    <template x-if="Alpine.store(connection)['version'] >=0">
                        <div x-on:click="initialize(connection+'/.well-known/interverse')">
                            <h3 x-text="Alpine.store(connection)['name']"></h3>
                            <img x-bind:src="Alpine.store(connection)['image']">
                        </div>
                    
                    </template>
                    <template x-if="name == ''">
                        <a x-bind:href="connection" x-text="connection"></a>
                    </template>

                </div>>
            </template>
        </div>
        <div id="interverse-contact">
            <template x-for="contact in Alpine.store('data')['contact']">
                <div class="interverse-contact">
                    
                </div>

            </template>
        </div>

    </div>

    <script>
        var main_url="/.well-known/interverse";
        if (getUrlParameter('s') && getUrlParameter("url")){
            var uri = "";
            main_url=getUrlParameter('s')+"://"+getUrlParameter("url")+'/.well-known/interverse';
        }
        else{
            if (getUrlParameter('url')){
                main_url = "https://" + getUrlParameter('url')+'/.well-known/interverse';
            }
        }
        document.addEventListener('alpine:init',function(){
            initialize(main_url);
        });

        function initialize(url){
            Alpine.store("data",{});
            fetchdata(url,function(e){
                data = JSON.parse(e.target.response);
                Alpine.store("data",data);
                connections = data['connections'];
                for (var i =0; i<connections.length; i++){
                    fetchdata(connections[i]+'/.well-known/interverse',function(e){
                        try{
                            dat = JSON.parse(e.target.response);
                            console.log(dat);
                            Alpine.store(dat['location'],dat);
                        }
                        catch{
                            console.log("Failed to parse connection JSON");
                        }
                    });
                }
                
            });
        }

    </script>
</body>

</html>