{% extends 'base.html' %}

{% block title %}
Downloads | {{ config.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-aerogramme-blue font-bold text-2xl text-center">Download Aerogramme</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-20 space-y-20">
                <div class="mt-8 bg-gray-50 border border-gray-200 p-4 rounded shadow-sm">
                    <!-- choose version -->
                    <div class="flex flex-row space-x-6 py-4 border-gray-400 border-b items-center">
                        <div>
                            <img style="height: 48px" src="/logo/aerogramme-blue-sq.svg"/>
                        </div>
                        <div>
                        <label>Channel: </label>
                        <select class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
                            <option value="production">Production</option>
                            <option value="testing">Testing</option>
                            <option value="nightly">Nightly</option>
                        </select>
                        </div>
                        <div>
                        <label>Version: </label>
                        <select class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
                            <option value="0.0.1">0.0.1</option>
                        </select>
                        </div>
                        <div>
                            Date: 2023-01-01
                        </div>
                    </div>

                    <div class="flex flex-row space-x-6">
                        <!-- choose distribution method -->
                        <div class="border-r pr-5 border-gray-400">
                            <button class="block bg-gradient-to-tl from-aerogramme-blue via-blue-500 to-blue-300 bg-size-200 bg-pos-0 hover:bg-pos-100 rounded p-4 mt-4 text-sm mb-1 uppercase text-white w-full text-left transition-all duration-200">Docker</button>
                            <button class="block p-4 mt-4 text-sm mb-1 uppercase text-gray-600 w-full text-left hover:bg-pos-100 rounded hover:text-white hover:bg-gradient-to-tl from-aerogramme-blue to-blue-500 transition-all duration-200">Binaries</button>
                            <button class="block p-4 mt-4 text-sm mb-1 uppercase text-gray-600 w-full text-left hover:bg-pos-100 rounded hover:text-white hover:bg-gradient-to-tl from-aerogramme-blue to-blue-500 transition-all duration-200">Distribution</button>
                            <button class="block p-4 mt-4 text-sm mb-1 uppercase text-gray-600 w-full text-left hover:bg-pos-100 rounded hover:text-white hover:bg-gradient-to-tl from-aerogramme-blue to-blue-500 transition-all duration-200">Sources</button>
                        </div>

                        <!-- docker page -->
                        <div id="docker" style="display: none">
                            <div class="block mt-4">
                                <label>Mirror: </label>
                                    <select class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
                                        <option value="df">registry.deuxfleurs.org</option>
                                        <option value="docker">docker.io</option>
                                    </select>
                            </div>

                            <div class="block mt-4 p-5 bg-black text-gray-100">
                                <pre class="block">docker pull registry.deuxfleurs.org/aerogramme:0.0.1</pre>
                            </div>
                            <p class="mt-4">Aerogramme is available as a minimalist docker image (~20MB) that contains only the static binary. It means that you can't run <code>bash</code> or any other shell in the container.</p>
                            <p class="mt-4">Network resources are finite. Please avoid wasting them by re-downloading the image each time you start a container. Keep a local cache or mirror the image on your private registry. In case of abuse, we may put some agressive rate limiting based on IP prefixes.</p>
                        </div>

                        <!-- binaries page -->
                        <div id="static">
                            <div class="mt-4 flex flex-row space-x-6 items-center">
                                <div class="block">
                                    OS: linux
                                </div>
                                <div class="block">
                                    <label>Architecture: </label>
                                        <select class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
                                            <option value="amd64">amd64 (x86_64)</option>
                                            <option value="aarch64">arm64 (aarch64)</option>
                                            <option value="armv6l">arm (armv6l)</option>
                                        </select>
                                </div>
                                <div class="block">
                                    Mirror: download.deuxfleurs.org
                                </div>
                            </div>

                            <div class="block mt-4 p-5 bg-black text-gray-100">
                                <pre class="block">curl https://download.deuxfleurs.org/df-dist-v1/aerogramme/0.0.1/linux/amd64/aerogramme -o aerogramme
chmod +x aerogramme</pre>
                            </div>
                            <p class="mt-4">Aerogramme is distributed as a statically compiled binary (~20MB).</p>
                            <p class="mt-4">Network resources are finite. Please avoid wasting them by re-downloading the binary too often. Keep a local cache or mirror the binary on your infrastructure. In case of abuse, we may put some agressive rate limiting based on IP prefixes.</p>

                    </div>
<!--
                    <div class="block p-5 bg-black text-gray-100">
                        <pre class="block">wget https://download.deuxfleurs.org/df-dist-v1/aerogramme/linux/amd64/aerogramme
chmod +x aerogramme</pre>
                    </div>
                    <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">
                        <a href="#" class="inline-block p-1.5 text-aerogramme-gray font-bold bg-gray-300 hover:bg-blue-300 rounded border-b-2 border-gray-400 hover:border-blue-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>linux/amd64</span>
                        </a>
                    </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-aerogramme-gray font-bold bg-gray-300 hover:bg-blue-300 rounded border-b-2 border-gray-400 hover:border-blue-400 transition-all duration-300">
                            <span>Gitea</span>
                        </a>
                        <a href="https://git.deuxfleurs.fr/Deuxfleurs/aerogramme/archive/${releaseBuilds[i]['version']}.zip" class="inline-block p-1.5 text-aerogramme-gray font-bold bg-gray-300 hover:bg-blue-300 rounded border-b-2 border-gray-400 hover:border-blue-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/aerogramme/archive/${releaseBuilds[i]['version']}.tar.gz" class="inline-block p-1.5 text-aerogramme-gray font-bold bg-gray-300 hover:bg-blue-300 rounded border-b-2 border-gray-400 hover:border-blue-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>
        </div>
        <noscript>
            <style type="text/css">
                #releases-container{display:none;}
            </style>
            <div id="js-disabled-msg" class="p-12" style="height:70vh">
                Access the Aerogramme releases by clicking on the following link :
                <a class="font-bold text-aerogramme-blue hover:underline" href="https://git.deuxfleurs.fr/Deuxfleurs/aerogramme.git">https://git.deuxfleurs.fr/Deuxfleurs/aerogramme.git</a>
            </div>
        </noscript>
    </div>
  </section>
{% endblock %}

{% block custom_js %}
<script>
</script>
{% endblock %}