{{define "content"}}
<h1 class="my-4">Play {{.Software.Title}}</h1>

<div class="ratio ratio-4x3" style="max-width: 960px; margin: 0 auto;">
    <iframe id="gameFrame" src="/play/{{.Software.Name}}/{{.WebPlayableRelease.Version}}/content/index.html" frameborder="0" allowfullscreen></iframe>
</div>

<div style="max-width: 960px; margin: 10px auto; text-align: center;">
    <div class="btn-group" role="group" aria-label="Game controls">
        <a href="/releases/{{.Software.Name}}" class="btn btn-primary">Back to Releases</a>
        <button id="fullscreenButton" class="btn btn-secondary">Fullscreen</button>
    </div>
</div>

<div style="max-width: 960px; margin: 10px auto; text-align: start;">
    <h2 class="my-4">Version</h2>
    <p>{{.WebPlayableRelease.Version}}</p>
    <h2 class="my-4">Other Versions</h2>
    <div class="list-group">
        {{range .Software.Releases}}
            {{if and .WebPlayable (ne .Version $.WebPlayableRelease.Version)}}
                <a href="/play/{{$.Software.Name}}/{{.Version}}" class="list-group-item list-group-item-action">
                    {{.Version}}
                </a>
            {{end}}
        {{end}}
    </div>
</div>

<script>
    document.getElementById('fullscreenButton').addEventListener('click', function() {
        var iframe = document.getElementById('gameFrame');
        if (iframe.requestFullscreen) {
            iframe.requestFullscreen();
        } else if (iframe.mozRequestFullScreen) { /* Firefox */
            iframe.mozRequestFullScreen();
        } else if (iframe.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
            iframe.webkitRequestFullscreen();
        } else if (iframe.msRequestFullscreen) { /* IE/Edge */
            iframe.msRequestFullscreen();
        }
    });

    document.addEventListener('fullscreenchange', function() {
        if (document.fullscreenElement) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = '';
        }
    });
    document.addEventListener('mozfullscreenchange', function() {
        if (document.mozFullScreenElement) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = '';
        }
    });
    document.addEventListener('webkitfullscreenchange', function() {
        if (document.webkitFullscreenElement) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = '';
        }
    });
    document.addEventListener('msfullscreenchange', function() {
        if (document.msFullscreenElement) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = '';
        }
    });
</script>

{{end}}