{% extends 'base.html' %}

{% block title %}
{{ config.title }} | {{ page.title }}
{% endblock %}

{% block content %}
  <section id="download-section" class="section">
    <div class="relative w-full py-8 flex flex-col items-center justify-center bg-gray-50 shadow-sm">
        <h1 class="text-garage-orange font-bold text-2xl text-center">Download Garage</h1>
        <div class="absolute -bottom-8 left-1/2 transform -translate-x-6 w-16 overflow-hidden inline-block">
            <div class="h-8 w-8 bg-gradient-to-bl from-gray-50 via-gray-50 to-gray-100 -rotate-45 transform origin-top-left shadow"></div>
        </div>
    </div>
    <div class="mx-auto max-w-7xl px-4">
        <div id="releases-container" class="py-24 space-y-20">
            <div id="release-builds">
                <h2 class="text-garage-gray text-xl font-semibold">Release Builds</h2>
                <div id="release-builds-container" class="space-y-12"></div>
            </div>
            <div id="extra-builds" class="space-y-4">
                <h2 class="text-garage-gray text-xl font-semibold">Extra Builds</h2>
                <p>Extra builds are built on demand to test a specific feature or a specific need.</p>
                <details>
                    <summary class="text-garage-orange font-bold cursor-pointer">Show Extra Builds</summary>
                    <div id="extra-builds-container" class="space-y-12"></div>
                </details>
            </div>
            <div id="development-builds" class="space-y-4">
                <h2 class="text-garage-gray text-xl font-semibold">Development Builds</h2>
                <p>Development builds are built periodically. Use them if you want to test a specific feature that is not yet released.</p>
                <details>
                    <summary class="text-garage-orange font-bold cursor-pointer">Show Development Builds</summary>
                    <div id="development-builds-container" class="space-y-12"></div>
                </details>
            </div>
        </div>
        <noscript>
            <style type="text/css">
                #releases-container{display:none;}
            </style>
            <div id="js-disabled-msg" class="p-12" style="height:70vh">
                Access the Garage releases by clicking on the following link :
                <a class="font-bold text-garage-orange hover:underline" href="https://garagehq.deuxfleurs.fr/_releases.html">https://garagehq.deuxfleurs.fr/_releases.html</a>
            </div>
        </noscript>
    </div>
  </section>
{% endblock %}

{% block custom_js %}
<script>
    var getJSON = function(url, callback) {
        var xmlhttprequest = new XMLHttpRequest();
        xmlhttprequest.open('GET', url, true);
        xmlhttprequest.responseType = 'json';
        xmlhttprequest.onload = function() {
            var status = xmlhttprequest.status;
            if (status == 200) {
                callback(null, xmlhttprequest.response);
            } else {
                callback(status, xmlhttprequest.response);
            }
        };
        xmlhttprequest.send();
    };
    
    getJSON('https://garagehq.deuxfleurs.fr/_releases.json',  function(err, data) {

        err != null ?? (console.error(err), die());

        if (err == null) {

            let releaseBuilds = data[0].builds;
            let extraBuilds = data[1].builds;
            let developmentBuilds = data[2].builds;

            console.log(extraBuilds)

            /** Release Builds */
            for (i = 0; i < releaseBuilds.length; i++) {
                window['build' + i] =
                `
                <div class="mt-8 bg-gray-50 border border-gray-200 p-4 rounded shadow-sm">
                    <h3 class="flex flex-col space-y-1.5 font-extrabold text-garage-orange">
                        <span>${releaseBuilds[i]['version']}</span>
                        <span class="text-garage-gray font-normal text-sm">${releaseBuilds[i]['builds'][0]['date']}</span>
                    </h3>
                    <span class="inline-block mt-4 text-sm mb-1 uppercase text-gray-600">Binaries</span>
                    <div id="release-builds-detail-${i}" class="flex flex-col md:flex-row items-start md:items-center space-x-0 md:space-x-2 space-y-2 md:space-y-0"></div>
                    <span class="inline-block mt-4 text-sm mb-1 uppercase text-gray-600">Sources</span>
                    <div id="release-builds-source-${i}" class="flex items-center space-x-2">
                        <a href="https://git.deuxfleurs.fr/Deuxfleurs/garage/src/tag/${releaseBuilds[i]['version']}" class="inline-block p-1.5 text-garage-gray font-bold bg-gray-300 hover:bg-orange-300 rounded border-b-2 border-gray-400 hover:border-orange-400 transition-all duration-300">
                            <span>Gitea</span>
                        </a>
                        <a href="https://git.deuxfleurs.fr/Deuxfleurs/garage/archive/${releaseBuilds[i]['version']}.zip" class="inline-block p-1.5 text-garage-gray font-bold bg-gray-300 hover:bg-orange-300 rounded border-b-2 border-gray-400 hover:border-orange-400 transition-all duration-300">
                            <svg class="inline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path></svg>
                            <span>.zip</span>
                        </a>
                        <a href="https://git.deuxfleurs.fr/Deuxfleurs/garage/archive/${releaseBuilds[i]['version']}.tar.gz" class="inline-block p-1.5 text-garage-gray font-bold bg-gray-300 hover:bg-orange-300 rounded border-b-2 border-gray-400 hover:border-orange-400 transition-all duration-300">
                            <svg class="inline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path></svg>
                            <span>.tar.gz</span>
                        </a>
                    </div>
                </div>
                `;
                document.getElementById('release-builds-container').innerHTML += window['build' + i];
                for (j = 0; j < releaseBuilds[i]['builds'].length; j++) {
                    window['buildDetail' + i] =
                    `
                    <a href="${releaseBuilds[i]['builds'][j]['url']}" class="inline-block p-1.5 text-garage-gray font-bold bg-gray-300 hover:bg-orange-300 rounded border-b-2 border-gray-400 hover:border-orange-400 transition-all duration-300">
                        <span>
                            ${releaseBuilds[i]['builds'][j]['platform']
                            .replace('aarch64-unknown-linux-musl', 'linux/arm64')
                            .replace('armv6l-unknown-linux-musleabihf', 'linux/arm')
                            .replace('i686-unknown-linux-musl', 'linux/386')
                            .replace('x86_64-unknown-linux-musl', 'linux/amd64')}
                        </span>
                    </a>
                    `; 
                    document.getElementById('release-builds-detail-' + i).innerHTML += window['buildDetail' + i];
                }
            }

            /** Extra Builds */
            for (i = 0; i < extraBuilds.length; i++) {
                window['build' + i] =
                `
                <div class="mt-8 bg-gray-50 border border-gray-200 p-4 rounded shadow-sm">
                    <h3 class="flex flex-col space-y-1.5 font-extrabold text-garage-orange">
                        <span>${extraBuilds[i]['version']}</span>
                        <span class="text-garage-gray font-normal text-sm">${extraBuilds[i]['builds'][0]['date']}</span>
                    </h3>
                    <span class="inline-block mt-4 text-sm mb-1 uppercase text-gray-600">Binaries</span>
                    <div id="extra-builds-detail-${i}" class="flex flex-col md:flex-row items-start md:items-center space-x-0 md:space-x-2 space-y-2 md:space-y-0"></div>
                    <span class="inline-block mt-4 text-sm mb-1 uppercase text-gray-600">Sources</span>
                    <div id="extra-builds-source-${i}" class="flex items-center pt-4 space-x-2">
                        <a href="https://git.deuxfleurs.fr/Deuxfleurs/garage/src/tag/${extraBuilds[i]['version']}" class="inline-block p-1.5 text-garage-gray font-bold bg-gray-300 hover:bg-orange-300 rounded border-b-2 border-gray-400 hover:border-orange-400 transition-all duration-300">
                            <span>Gitea</span>
                        </a>
                        <a href="https://git.deuxfleurs.fr/Deuxfleurs/garage/archive/${extraBuilds[i]['version']}.zip" class="inline-block p-1.5 text-garage-gray font-bold bg-gray-300 hover:bg-orange-300 rounded border-b-2 border-gray-400 hover:border-orange-400 transition-all duration-300">
                            <svg class="inline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path></svg>
                            <span>.zip</span>
                        </a>
                        <a href="https://git.deuxfleurs.fr/Deuxfleurs/garage/archive/${extraBuilds[i]['version']}.tar.gz" class="inline-block p-1.5 text-garage-gray font-bold bg-gray-300 hover:bg-orange-300 rounded border-b-2 border-gray-400 hover:border-orange-400 transition-all duration-300">
                            <svg class="inline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path></svg>
                            <span>.tar.gz</span>
                        </a>
                    </div>
                </div>
                `;
                document.getElementById('extra-builds-container').innerHTML += window['build' + i];
                for (j = 0; j < extraBuilds[i]['builds'].length; j++) {
                    window['buildDetail' + i] =
                    `
                    <a href="${extraBuilds[i]['builds'][j]['url']}" class="inline-block p-1.5 text-garage-gray font-bold bg-gray-300 hover:bg-orange-300 rounded border-b-2 border-gray-400 hover:border-orange-400 transition-all duration-300">
                        <span>
                            ${extraBuilds[i]['builds'][j]['platform']
                            .replace('aarch64-unknown-linux-musl', 'linux/arm64')
                            .replace('armv6l-unknown-linux-musleabihf', 'linux/arm')
                            .replace('i686-unknown-linux-musl', 'linux/386')
                            .replace('x86_64-unknown-linux-musl', 'linux/amd64')}
                        </span>
                    </a>
                    `; 
                    document.getElementById('extra-builds-detail-' + i).innerHTML += window['buildDetail' + i];
                }
            }

            /** Development Builds */
            for (i = 0; i < developmentBuilds.length; i++) {
                window['build' + i] =
                `
                <div class="mt-8 bg-gray-50 border border-gray-200 p-4 rounded shadow-sm">
                    <h3 class="flex flex-col space-y-1.5 font-extrabold text-garage-orange">
                        <span>${developmentBuilds[i]['version']}</span>
                        <span class="text-garage-gray font-normal text-sm">${developmentBuilds[i]['builds'][0]['date']}</span>
                    </h3>
                    <span class="inline-block mt-4 text-sm mb-1 uppercase text-gray-600">Binaries</span>
                    <div id="development-builds-detail-${i}" class="flex flex-col md:flex-row items-start md:items-center space-x-0 md:space-x-2 space-y-2 md:space-y-0"></div>
                    <span class="inline-block mt-4 text-sm mb-1 uppercase text-gray-600">Sources</span>
                    <div id="development-builds-source-${i}" class="flex items-center pt-4 space-x-2">
                        <a href="https://git.deuxfleurs.fr/Deuxfleurs/garage/src/tag/${developmentBuilds[i]['version']}" class="inline-block p-1.5 text-garage-gray font-bold bg-gray-300 hover:bg-orange-300 rounded border-b-2 border-gray-400 hover:border-orange-400 transition-all duration-300">
                            <span>Gitea</span>
                        </a>
                        <a href="https://git.deuxfleurs.fr/Deuxfleurs/garage/archive/${developmentBuilds[i]['version']}.zip" class="inline-block p-1.5 text-garage-gray font-bold bg-gray-300 hover:bg-orange-300 rounded border-b-2 border-gray-400 hover:border-orange-400 transition-all duration-300">
                            <svg class="inline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path></svg>
                            <span>.zip</span>
                        </a>
                        <a href="https://git.deuxfleurs.fr/Deuxfleurs/garage/archive/${developmentBuilds[i]['version']}.tar.gz" class="inline-block p-1.5 text-garage-gray font-bold bg-gray-300 hover:bg-orange-300 rounded border-b-2 border-gray-400 hover:border-orange-400 transition-all duration-300">
                            <svg class="inline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path></svg>
                            <span>.tar.gz</span>
                        </a>
                    </div>
                </div>
                `;
                document.getElementById('development-builds-container').innerHTML += window['build' + i];
                for (j = 0; j < developmentBuilds[i]['builds'].length; j++) {
                    window['buildDetail' + i] =
                    `
                    <a href="${developmentBuilds[i]['builds'][j]['url']}" class="inline-block p-1.5 text-garage-gray font-bold bg-gray-300 hover:bg-orange-300 rounded border-b-2 border-gray-400 hover:border-orange-400 transition-all duration-300">
                        <span>
                            ${developmentBuilds[i]['builds'][j]['platform']
                            .replace('aarch64-unknown-linux-musl', 'linux/arm64')
                            .replace('armv6l-unknown-linux-musleabihf', 'linux/arm')
                            .replace('i686-unknown-linux-musl', 'linux/386')
                            .replace('x86_64-unknown-linux-musl', 'linux/amd64')}
                        </span>
                    </a>
                    `; 
                    document.getElementById('development-builds-detail-' + i).innerHTML += window['buildDetail' + i];
                }
            }
        }
    });
</script>
{% endblock %}