<!DOCTYPE html>
<html lang="en" dir="ltr" id="main_html" prefix="og: http://ogp.me/ns#">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
        <title id="title">Treehouse</title>
        

        <meta property="og:title" content="Treehouse">
        <meta property="og:description" content="A Place to see all thats going on in the Treehouse!">
        <meta property="og:site_name" content="Treehouse - Welcome Home">
        
        <!-- Material Icons -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
        <!-- Material Symbols - Outlined Set -->
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
        <!-- Material Symbols - Rounded Set -->
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet" />
        <!-- Material Symbols - Sharp Set -->
        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet" />
        
        <link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}"/>
        <link rel="stylesheet" href="{{ url_for('static', filename='css/stream.css') }}"/>
        <link id="dark-mode" rel="stylesheet" href="{{ url_for('static', filename='css/dark-mode.css') }}" disabled/>


        <script src="{{ url_for('static', filename='js/uikit.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/uikit-icons.min.js') }}"></script>
        <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>


    </head>
    <body>
        <div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky;">
            <nav id="navbar" class="uk-navbar-container">
                <div class="uk-container uk-container-expand">
                    <div uk-navbar="dropbar: true">
                        <div class="uk-navbar-left">
                            <p style="margin-top: 20px;"><strong>Home</strong></p>
                        </div>
                        <div class="uk-navbar-right uk-margin-small">
                            <div>
                                <a onclick="toggleDarkMode()" class="uk-button uk-button-small"><span id="modeToggle" class="uk-flex material-symbols-outlined">dark_mode</span></a>
                            </div>
                            <a href="#" class="uk-button uk-button-small" uk-icon="icon: menu" uk-toggle> Menu</a>
                            <div uk-dropdown="pos: bottom-right">
                                <ul class="uk-nav uk-dropdown-nav">
                                    <li><a href="/">Home</a></li>
                                    <li><a href="/stream">Stream</a></li>
                                    <li><a href="/events">Events</a></li>
                                    <li><a href="/radios">Radio</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        
        </div>
        <div class="uk-container uk-section">
            <div uk-grid>
                <div class="uk-width-1-2@m uk-grid-small" uk-grid>
                    <div class="uk-width-1-1">
                        <button onclick="refreshNotes()" class="uk-button uk-button-default"><span uk-icon="icon: refresh"></span></button>
                        <a href="https://misskey.treehousefullofstars.com" target="_blank" class="uk-button uk-button-default">Misskey <span uk-icon="icon: link-external"></span></a>
                    </div>
                    
                    <div style="height:80vh; overflow-y: auto;" id="notesView"></div>
                </div>
                <div class="uk-width-1-2@m">
                    <div style="padding: 5px; border-radius: 10px;" class="uk-text-center StreamStatus">
                        <h3>{{stream['last_known_title']}}  <a href="/stream" uk-icon="icon: link" target="_blank"></a>
                            {% if stream['online'] %}
                            <span style="margin-left: 20px;" class="uk-label uk-label-success">Online</span>
                            {% else %}
                            <span class="uk-label uk-label-danger">Offline</span>
                            {% endif %}
                        </h3>
                        <p style="position: relative; margin-top: 0px;">{{stream['viewer_count']}} Viewers</p>
                    </div>
                    <div>
                        {% for radio in radios %}
                        <div style="padding: 10px; border: 10px;" class="uk-width-1-1">
                            <h5>{{radio['name']}}  <a href="{{radio['public_player_url']}}" target="_blank" class="uk-button uk-button-small">Open Public Page</a></h5>
                            <iframe src="{{radio['public_player_url']}}/embed?theme=light" style="width: 100%; min-height: 150px; border: 0;"></iframe>
                        </div>
                        {% endfor %}
                    </div>
                    <div>
                        <caption>Upcoming Events</caption>
                        <table class="uk-table uk-table-striped">
                            <thead>
                                <tr>
                                    <th>Event Name</th>
                                    <th>Location</th>
                                    <th>Starts</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for event in events %}
                                    <tr>
                                        <td><a href="https://events.treehousefullofstars.com/{{event['id']}}" target="_blank">{{event['name']}}</a></td>
                                        <td>{{event['location']}}</td>
                                        <td>{{event['start']}}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>       
            </div>
        </div>
    </body>
    <script>

        // function sendNotification(title, message) {
           // window.electronAPI.sendNotification(title, message)
        //}

        // Example usage
        //document.addEventListener('DOMContentLoaded', () => {
           // sendNotification('loaded', 'Hello from Renderer Process!');
        //});

        document.addEventListener('DOMContentLoaded', async function() {
            let notes = await fetchNotes()
            await rebuildNotesView(notes)
        });

        async function fetchNotes(){
            const url = new URL('/getNotes', window.location.origin)
            const response = await fetch(url)
            data = await response.json()
            return data.notes
        }

        async function rebuildNotesView(notes){
            let notesView = document.getElementById('notesView')
            notesView.innerHTML = ""

            for(i=0; i < notes.length; i++){
                console.log(notes[i])
                let article = document.createElement('article')
                article.role = "comment"
                article.setAttribute('class', 'uk-comment uk-comment-primary')

                let header = document.createElement('header')
                header.setAttribute('class', 'uk-comment-header')

                let grid = document.createElement('div')
                grid.setAttribute('class', 'uk-grid uk-grid-medium uk-flex-middle')
                
                let comment_image = document.createElement('div')
                comment_image.setAttribute('class', 'uk-width-auto')
                comment_image.innerHTML = `<img class="uk-comment-avatar uk-border-circle" src="${notes[i].user.avatarUrl}" width="80" height="80" alt="">`
                
                let comment_header= document.createElement('div')
                comment_header.setAttribute('class', 'uk-width-expand')
                comment_header.innerHTML = `
                    <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">${notes[i].user.name}</a></h4>
                    <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
                        <li><a href="#">${notes[i].createdAt}</a></li>
                        <li><a href="#">link</a></li>
                    </ul>`
                
                grid.append(comment_image, comment_header)
                header.append(grid)
                article.append(header)

                let comment_body = document.createElement('div')
                comment_body.setAttribute('class', 'uk-comment-body')
                comment_body.innerHTML = `<p>${notes[i].text}</p>`
                article.append(comment_body)
                notesView.append(article)

            }

        }

        async function refreshNotes(){
            let notes = await fetchNotes()
            await rebuildNotesView(notes)
        }

        var mode = false
        async function toggleDarkMode() {
            let darkMode = document.getElementById("dark-mode");    
            darkMode.disabled = !darkMode.disabled;
            mode = !mode;
            if(mode){
                document.getElementById('modeToggle').innerHTML = "light_mode"
                document.getElementById('main_html').classList.add('uk-light')
            } else {
                document.getElementById('modeToggle').innerHTML = "dark_mode"
                document.getElementById('main_html').classList.remove('uk-light')
            }
            sendNotification('Dark Mode', 'Tis has been activated mi lady!')

        }
    </script>
</html>