{{ define "header" }}
<link href="//cdn.jsdelivr.net/npm/font-logos@0.18/assets/font-logos.css" rel="stylesheet">

<section class="section">
    <div class="container">
        <div class="mb-3" id="download-header">
            <h1 class="title is-flex-grow-1 mb-0">{{ .Title }}</h1>
            <div id="download-buttons">
                <a href="https://github.com/yuzu-emu/liftinstall/releases/download/1.9/yuzu_install.exe" class="button dl-button is-medium is-success" id="dl-button-windows">
                    <span class="icon mr-1"><i class="fab fa-windows"></i></span> Download for Windows x64
                </a>
                <a href="https://github.com/yuzu-emu/liftinstall/releases/download/1.9/liftinstall-31b3e7e.tar.xz" class="button dl-button is-medium is-success" id="dl-button-linux">
                    <span class="icon mr-1"><i class="fab fa-linux"></i></span> Download for Linux x64
                </a>
                <a href="https://play.google.com/store/apps/details?id=org.yuzu.yuzu_emu" class="button dl-button is-medium is-success" id="dl-button-android">
                    <span class="icon mr-1"><i class="fab fa-android"></i></span> Download for Android
                </a>
            </div>
        </div>

        <div id="unsupported-platform-view">
            <article class="message is-danger" id="platform-unsupported">
                <div class="message-body has-text-white my-5">
                    Currently, yuzu doesn't support your platform. If you are running Windows x64 or Linux x64 however,
                    choose one of the options above.
                </div>
            </article>
        </div>

        <div class="show-with-js">
            <div class="tabs " id="platform-switcher">
                <ul>
                    <li data-target="tab-windows">
                        <a>
                            <span class="icon is-small"><i class="fab fa-windows"></i></span>
                            <span>Windows</span>
                        </a>
                    </li>
                    <li data-target="tab-linux">
                        <a>
                            <span class="icon is-small"><i class="fab fa-linux"></i></span>
                            <span>Linux</span>
                        </a>
                    </li>
                    <li data-target="tab-android">
                        <a>
                            <span class="icon is-small"><i class="fab fa-android"></i></span>
                            <span>Android</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="content">
                <h2>Instructions</h2>
            </div>
        </div>

        <div class="content" id="platform-instructions">
            {{ .Content }}
        </div>
    </div>
</section>

<section class="section pt-0">
    <div class="container">
        <div class="hide-with-js content">
            <h2>Builds</h2>

            <article class="message is-warn">
                <div class="message-body has-text-white mb-6">
                    Hi! We see that you have JavaScript disabled. You can still use the 
                    above download links but we can't show you an updated listing of the available 
                    packages for yuzu, nor alternative installation methods, but we recommend 
                    viewing the 
                    <a href="https://github.com/yuzu-emu/yuzu-mainline/releases">Mainline releases on GitHub</a>
                </div>
            </article>
        </div>
        
        <div class="show-with-js" id="package-view">
            <!-- Mainline -->
            <div class="content">
                <h2>Builds
                    <span class="tag is-info">
                        Last release was &nbsp;
                        <span id='last-updated-mainline'></span>
                    </span>
                </h2>

                <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 getFragment () {
        const fragment = window.location.hash;
        if (!fragment) return null;
        switch (fragment) {
            case "#linux": return "Linux";
            case "#android": return "Android";
            case "#windows": return "Windows";
        }
        return null;
    }
    const setTabActive = (targetId) => {
        document.querySelectorAll(".content .tab-content")
            .forEach(element => element.style.display = "none");

        document.querySelectorAll(`#${targetId}`)    
            .forEach(element => element.style.display = "block");

        document.querySelectorAll(".tabs li")    
            .forEach(element => element.classList.remove('is-active'));

        document.querySelectorAll(`[data-target="${targetId}"]`)    
            .forEach(element => element.classList.add('is-active'));
        
        const fragment = targetId.split('-')[1];
        window.location.hash = `#${fragment}`;
    }

    const getOSGuess = () => {
        const userAgent = navigator.userAgent.toLowerCase();

        if (userAgent.includes("windows")) {
            return "Windows";
        } else if (
            userAgent.includes("mac") && 
            !userAgent.includes("mobile") && 
            !userAgent.includes("phone")
        ) {
            return "Mac";
        }  else if (
            userAgent.includes("android")
        ) {
            return "Android";
        } else if (
            userAgent.includes("linux")
        ) {
            return "Linux";
        }

        return "Other";
    }

    const setupListeners = () => {
        document.querySelectorAll(".tabs li")
            .forEach(element => 
                element.addEventListener('click', (event) => {
                    setTabActive(element.dataset.target);
                })
            );
    }

    getRelease('mainline');

    // Show JS relevant elements
    document.querySelectorAll(".hide-with-js")
        .forEach(element => element.style.display = "none");

    document.querySelectorAll(".show-with-js")
        .forEach(element => element.style.display = "block");
    
    document.querySelectorAll(".content .tab-content")
        .forEach(element => element.style.display = "none");

    // Attempt autodetection of their operating system
    switch (getFragment() || getOSGuess()) {
        case "Windows":
            document.getElementById("dl-button-linux").style.display = "none";
            document.getElementById("dl-button-android").style.display = "none";
            setTabActive('tab-windows');
            break;
        case "Linux":
            document.getElementById("dl-button-windows").style.display = "none";
            document.getElementById("dl-button-android").style.display = "none";
            setTabActive('tab-linux');
            break;
        case "Android":
            document.getElementById("dl-button-windows").style.display = "none";
            document.getElementById("dl-button-linux").style.display = "none";
            setTabActive('tab-android');
            break;
        default:
            document.getElementById("unsupported-platform-view").style.display = "block";
            setTabActive('tab-windows');
            break
    }

    window.addEventListener('DOMContentLoaded', setupListeners);
</script>
{{ end }}