{{ define "header" }}
<section class="section">
    <div class="container">
        <h1 class="title">{{ .Title }}</h1>
	<div class="content">
	    {{ .Content }}
	</div>
</section>

<section class="section">
    <div class="container">
        <div id="no-js-view">
            Hi! We see that you have JavaScript disabled. We can't show you an
            updated listing of the available packages for yuzu, nor alternative
            installation methods, but here are a few links to get you started: <br />
            <a href="https://github.com/yuzu-emu/liftinstall/releases/download/1.8/yuzu_install.exe">Windows x64 Installer</a><br />
            <a href="https://github.com/yuzu-emu/yuzu-mainline/releases">Mainline releases on GitHub</a>
        </div>
        <div id="install-view">
            <article class="message is-danger" id="platform-unsupported">
                <div class="message-body has-text-white">
                    yuzu doesn't support your platform. If you are running Windows x64 or Linux x64 however,
                    choose one of the options below.
                </div>
            </article>

            <div class="buttons is-centered">
                <a href="https://github.com/yuzu-emu/liftinstall/releases/download/1.8/yuzu_install.exe" class="button dl-button is-medium is-success" id="dl-button-windows">Download for Windows x64</a>
            </div>

            <div class="buttons is-centered">
                <!-- Show this when Flatpak/other primary installation methods are provided for Linux/Mac.
                <a class="button">
                    Other platforms
                </a>
                -->
                <a class="button" id="view-package-listing-button">
                    Manual Download
                </a>
            </div>
        </div>
        <div class="columns" id="manual-package-view">
            <!-- Mainline -->
            <div class="column">
                <h3>Builds
                    <span style='font-size: smaller; margin-left: 6px;'>
                        Last release was
                        <span id='last-updated-mainline'></span>
                    </span>
                </h3>

                <div id="downloads-mainline">
                </div>

                <div id="unavailable-mainline" class="is-hidden">There was a problem checking GitHub. Click the link below to view them directly.</div>
                <br />

                <div class="has-text-centered">
                    <a href="https://github.com/yuzu-emu/yuzu-mainline/releases">Click here to view previous versions...</a>
                </div>
            </div>
        </div>
	</div>
 </section>

<!-- Advertisement -->
<section class="hero is-info">
    <div class="hero-body">
        <div class="has-text-centered">
            <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-4126545610079023" data-ad-slot="1038554045"></ins>
        </div>
    </div>
</section>
{{ end }}

{{ define "scripts" }}
<script type="text/javascript">
    function fetchReleases() {
        getRelease('mainline');
    }

    fetchReleases();

    // Attempt autodetection of their operating system
    var userAgent = navigator.userAgent.toLowerCase();

    var allPlatforms = ["windows", "mac", "linux"];

    var os = "Other";
    if (userAgent.indexOf("windows") !== -1) {
        os = "Windows";
    } else if (userAgent.indexOf("mac") !== -1 && userAgent.indexOf("mobile") === -1 && userAgent.indexOf("phone") === -1) {
        os = "Mac";
    } else if (userAgent.indexOf("linux") !== -1 && userAgent.indexOf("android") === -1) {
        os = "Linux";
    }

    // Configure the views for this platform
    document.getElementById("no-js-view").style.display = "none";

    var platformButton = document.getElementById("dl-button-" + os.toLowerCase());
    if (platformButton !== null) {
        platformButton.style.display = "block";
    } else {
        document.getElementById("platform-unsupported").style.display = "block";
    }

    // Installer is not available on all platforms
    if (os === "Mac" || os === "Linux") {
        document.getElementById("install-view").style.display = "none";
        document.getElementById("manual-package-view").style.display = "flex";
    } else {
        document.getElementById("install-view").style.display = "block";
        document.getElementById("manual-package-view").style.display = "none";
    }

    document.getElementById("view-package-listing-button").addEventListener("click", function() {
        this.style.display = "none";
        document.getElementById("manual-package-view").style.display = "flex";
    });

</script>
{{ end }}