<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/theme.css">
    <title>Interverse</title>
    <script src="//unpkg.com/alpinejs" defer></script>
    <! consider hosting on your site>
    <script src="/helper.js"></script>
</head>
<body>
    <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>
        <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">
                    <template x-if="resource['icon'] !=''">
                        <img class="interverse-resource-icon" x-bind:src="resource['icon']">
                    </template>
                    <h2 x-text="resource['label']"></h2>
                    <p x-text="resource['description']"></p>
                </div>
                </a>
            </template>
        </div>
        <div id="interverse-groups">
            <template x-for="(group,name) in Alpine.store('data')['connection_groups']">
                <div>
                    <h3 x-text="name"></h3>
                    <div class="interverse-group">
                        <template x-for="link in group">
                            <div class="interverse-connection" x-data="{connected:false">
                                <template x-if="Alpine.store(link)['name'] !=''">
                                    <div class='interverse-connection-preview' x-on:click="initialize(link+'/.well-known/interverse')">
                                        <h3 x-text="Alpine.store(link)['name']"></h3>
                                        <img x-bind:src="Alpine.store(link)['image']">
                                        <a x-bind:href="link" x-text="link"></a>
                                    </div>
                                </template>
                                <template x-if="Alpine.store(link) == undefined">
                                    <div>
                                        <a x-bind:href="link" x-text="link">

                                        </a>
                                        
                                    </div>
    
                                </template>
                            </div>
                        </template>
                    </div>
                    
                </div>
            </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>
                            <template x-if="Alpine.store(connection)['image']!=''">
                                <img x-bind:src="Alpine.store(connection)['image']">
                            </template>
                        </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);
                raw_data = JSON.parse(e.target.response);
                Alpine.store("data",data);
                var connections = raw_data['connections'];
                for (group in data['connection_groups']){
                    for (link in data['connection_groups'][group]){
                        connections.push(data['connection_groups'][group][link]);
                    }
                }
                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>