<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Youtube RemoteControl</title>
        <script src="js/element.js"></script>
        <script src="js/youtube.js"></script>
        <script src="js/video.js"></script>
        <script src="js/main.js"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
        <link rel="stylesheet" href="css/dialog.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/video.css">
    </head>

    <body>
        <template id="video-template">
            <div class="video-item">
                <img class="video-image" src="">
                <span class="video-close material-symbols-outlined">close</span>
                <div class="video-bottom">
                    <p class="video-title"></p>
                    <div class="video-progress">
                        <div class="primary"></div>
                        <div class="secondary"></div>
                    </div>
                </div>
            </div>
        </template>
        
        <dialog id="display-select-dialog">
            <div class="header">
                <h1>Select Active Display</h1>
                <span onClick="onCloseSelectDisplayDialogClicked()" class="close material-symbols-outlined">close</span>
            </div>
            <div class="body">
                <form id="display-select-dialog-form"></form>
            </div>
        </dialog>

        <dialog id="audio-sink-select-dialog">
            <div class="header">
                <h1>Select Active Audio Sink</h1>
                <span onClick="onCloseSelectAudioSinkDialogClicked()" class="close material-symbols-outlined">close</span>
            </div>
            <div class="body">
                <form id="audio-sink-select-dialog-form"></form>
            </div>
        </dialog>

        <dialog id="open-new-video-dialog">
            <div class="header">
                <h1>Open New Video</h1>
                <span onClick="onCloseOpenNewVideoDialogClicked()" class="close material-symbols-outlined">close</span>
            </div>
            <div class="body">
                <form id="open-new-video-dialog-form">
                    <input name="link" id="open-new-video-dialog-link" type="url" placeholder="URL"></input>
                    <button onClick="onOpenVideoInBackgroundButtonClicked()" type="button">Open video in background</button>
                    <button onClick="onOpenVideoButtonClicked()" type="button">Open video</button>
                </form>
            </div>
        </dialog>

        <dialog id="close-video-dialog">
            <div class="header">
                <h1>Close Video</h1>
                <span onClick="onCloseCloseVideoDialogClicked()" class="close material-symbols-outlined">close</span>
            </div>
            <div class="body">
                <form id="close-video-dialog-form">
                    <p>Do you want to close the following video?</p>
                    <p id="close-video-dialog-title"></p>
                    <button onClick="onCloseVideoButtonClicked()" type="button">Close</button>
                    <button onClick="onCancelCloseVideoButtonClicked()" type="button">Cancel</button>
                </form>
            </div>
        </dialog>

        <header>
            <span onClick="onShowSelectDisplayDialogClicked()" class="material-symbols-outlined">tv_displays</span>
            <span onClick="onShowSelectAudioSinkDialogClicked()" class="material-symbols-outlined">speaker_group</span>
            <span onClick="onShowOpenNewVideoDialogClicked()" class="material-symbols-outlined">open_in_new</span>
        </header>

        <div id="video-container"></div>

        <footer>
            <p id="current-timestamp"></p>
            <input type="range" min="0" max="100" value="0" class="slider" id="seekbar">
            <p id="video-length"></p>
            <button id="replay" type="button"><span class="material-symbols-outlined">replay_10</span></button>
            <button id="play-pause" type="button"><span class="material-symbols-outlined">play_circle</span></button>
            <button id="forward" type="button"><span class="material-symbols-outlined">forward_10</span></button>
            <input type="range" min="0" max="100" value="0" step="5" class="slider" id="volume-bar">
        </footer>

    </body>

</html>