{{define "head"}}
    <title>{{.Title}} | {{.Id}}</title>
    <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/videojs-seek-buttons/dist/videojs-seek-buttons.css" rel="stylesheet">
    <style>

    </style>
{{end}}

{{define "body"}}
    <div style="max-width: 1280px">
        <video
                class="video-js vjs-big-play-centered centeredvideo"
                id="player"
                height="720"
                width="1280"
                controls
                autoplay
                data-setup="{}"
                poster="/videos/{{ .Thumbnail }}"
        >
            <source src="/videos/{{.Filename}}">
        </video>
        <h1>{{.Title}}</h1>

        {{ if .Metadata.ChannelID }}
            <div>
                <p style="float: right">{{ .Metadata.LikeCount }} likes | {{ .Metadata.DislikeCount }} dislikes</p>

                <p>{{ .Metadata.ViewCount }} views</p>
                <p>Uploaded by: <a href="/search?term={{ .Metadata.Channel }}">{{ .Metadata.Channel }}</a></p>
                <p>Uploaded at: <span id="uploadDate"></span></p>
                <hr />

                <div style="clear: both"></div>
            </div>
            <br />

            <div style="white-space: pre-line;">
                {{ .Metadata.Description }}
            </div>

            <hr />

            <h3>Comments ({{ .Metadata.CommentCount }}):</h3>
            <hr />
            <div>
                {{range .Metadata.Comments}}
                    <div>
                        <img src="{{ .AuthorThumbnail }}" style="border-radius: 50%; max-height: 75px; max-width: 75px; float: left" />
                        <p>{{ .Author }}</p>
                        <div style="clear: both"></div>
                        <p>{{ .LikeCount }} likes</p>
                    </div>
                    <div style="white-space: pre-line;">
                        {{ .Text }}
                    </div>
                    <hr />
                {{end}}
            </div>
        {{ end }}
    </div>
    <br />


    <p>Filetype: {{.Extension}}</p>
    <p>Youtube ID: {{.Id}}</p>
    <p>Filename: {{.Filename}}</p>
    <a href="/videos/{{.Filename}}">Direct video link</a>

    <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/videojs-seek-buttons/dist/videojs-seek-buttons.min.js"></script>
    <script>
        var player = videojs('player');

        player.seekButtons({
            forward: 30,
            back: 10
        });
    </script>
    {{ if .Metadata.ChannelID }}
        <script>
            String.prototype.insert = function(index, string) {
                if (index > 0) {
                    return this.substring(0, index) + string + this.substr(index);
                }
                return string + this;
            };

            let datestring = "{{ .Metadata.UploadDate }}".insert(4, "-").insert(7, "-")
            let date = new Date(datestring)

            document.getElementById("uploadDate").innerText = `${date.getDay()+1}.${date.getMonth()+1}.${date.getFullYear()}`
        </script>
    {{end}}
{{end}}