{% import "bootstrap/wtf.html" as wtf %}

{% macro form_field(field,
                    form_type="basic",
                    horizontal_columns=('lg', 2, 10),
                    button_map={}) %}
{% if field.widget.input_type == 'checkbox' %}
    <div class="checkbox">
      <label>
        {{field()|safe}} {{field.label.text|safe}}
      </label>
      {%- if field.description -%}
        <p class="help-block">{{field.description|safe}}</p>
      {%- endif %}
    </div>
{% else %}
  {{ wtf.form_field(field, form_type, horizontal_columns, button_map) }}
{% endif %}
{% endmacro %}


{% extends "bootstrap/base.html" %}

{% block title %}
YunoHost app generator
{% endblock %}

{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='stylesheet.css')}}">
{% endblock %}

{% block content %}
    <script>
        function showPage(tag,page) {
                console.log("ERREUR");
                console.log(tag);
                console.log(page);
               document.getElementById(tag).innerHTML = `{{ "{% include 'install.j2' %}" }}`; // This syntax escape the jinja syntax, so it's not changed in the function code (before being injected and then adjusted as a template content)
        }
        function clearPage(tag) {
            document.getElementById(tag).innerHTML = ``;
        }

        function copyCodeBlock(code_block) {
          var codeBlock = document.querySelector(code_block);
          var codeText = codeBlock.textContent;

          navigator.clipboard.writeText(codeText)
            .then(function() {
              alert("Le code a été copié dans le presse-papier !");
            })
            .catch(function() {
              alert("Une erreur s'est produite lors de la copie du code.");
            });
        }

        function generateContent(file) {
          // Generate file content
          if (file == 'manifest') {
            console.log("Generating content for manifest file")
            var template_file_content = {{ template_manifest_content | safe |tojson }};
          } else if (file == 'install') {
            console.log("Generating content for install file")
            var template_file_content = {{ template_install_content | safe |tojson }};
          } else if (file == 'remove') {
            console.log("Generating content for remove file")
            var template_file_content = {{ template_remove_content | safe |tojson }};
          } else if (file == 'backup') {
            console.log("Generating content for backup file")
            var template_file_content = {{ template_backup_content | safe |tojson }};
          } else if (file == 'restore') {
            console.log("Generating content for restore file")
            var template_file_content = {{ template_restore_content | safe |tojson }};
          } else if (file == 'upgrade') {
            console.log("Generating content for upgrade file")
            var template_file_content = {{ template_upgrade_content | safe |tojson }};
          } else if (file == 'config') {
            console.log("Generating content for config file")
            var template_file_content = {{ template_config_content | safe |tojson }};
          } else if (file == 'change_url') {
            console.log("Generating content for change_url file")
            var template_file_content = {{ template_change_url_content | safe |tojson }};
          } else if (file == 'custom_config_file') {
            var template_file_content = '{{ parameters['custom_config_file_content']  | safe |tojson }}';
          } else if (file == 'nginx_config_file') {
            var template_file_content = '{{ nginx_config_file  | safe |tojson }}';
          } else if (file == 'systemd_config_file') {
            var template_file_content = '{{ systemd_config_file  | safe |tojson }}';
          } else if (file == 'cron_config_file') {
            var template_file_content = '{{ cron_config_file  | safe |tojson }}';
          } else {
            alert("Fichier non prévu")
            }
          return template_file_content;
        }

        function downloadFile(file) {
          const content = generateContent(file); // Generate file content (it's not an actual file);
          const dataUrl = 'data:text/plain;charset=utf-8,' + encodeURIComponent(content);
          if (file == 'manifest') {
            link = document.querySelector('#download_manifest');
          } else if (file == 'install') {
            link = document.querySelector('#download_install');
          } else if (file == 'remove') {
            link = document.querySelector('#download_remove');
          } else if (file == 'backup') {
            link = document.querySelector('#download_backup');
          } else if (file == 'restore') {
            link = document.querySelector('#download_restore');
          } else if (file == 'upgrade') {
            link = document.querySelector('#download_upgrade');
          } else if (file == 'config') {
            link = document.querySelector('#download_config');
          } else if (file == 'change_url') {
            link = document.querySelector('#download_change_url');
          } else if (file == 'custom_config_file') {
            link = document.querySelector('#download_custom_config_file');
          } else if (file == 'nginx_config_file') {
            link = document.querySelector('#download_nginx_config_file');
          } else if (file == 'systemd_config_file') {
            link = document.querySelector('#download_systemd_config_file');
          } else if (file == 'cron_config_file') {
            link = document.querySelector('#download_cron_config_file');
          } else {
            alert("Fichier non prévu")
            }
          link.href = dataUrl;
        }

        function download_zip() {

            var xhr = new XMLHttpRequest();

            // retrieve variables
            template_manifest_content = encodeURIComponent( {{ template_manifest_content | safe |tojson }} );
            template_install_content = encodeURIComponent( {{ template_install_content | safe |tojson }} );
            template_remove_content = encodeURIComponent( {{ template_remove_content | safe |tojson }} );
            template_backup_content = encodeURIComponent( {{ template_backup_content | safe |tojson }} );
            template_restore_content = encodeURIComponent( {{ template_restore_content | safe |tojson }} );
            template_upgrade_content = encodeURIComponent( {{ template_upgrade_content | safe |tojson }} );
            template_config_content = encodeURIComponent( {{ template_config_content | safe |tojson }} );
            template_change_url_content = encodeURIComponent( {{ template_change_url_content | safe |tojson }} );

            custom_config_file = encodeURIComponent( {{ parameters['custom_config_file'] | safe |tojson }} );
            custom_config_file_content = encodeURIComponent( {{ parameters['custom_config_file_content'] | safe |tojson }} );
            systemd_config_file = encodeURIComponent( {{ parameters['systemd_config_file'] | safe |tojson }} );
            nginx_config_file = encodeURIComponent( {{ parameters['nginx_config_file'] | safe |tojson }} );
            cron_config_file = encodeURIComponent( {{ parameters['cron_config_file'] | safe |tojson }} );
            use_php = encodeURIComponent( "{{ parameters['use_php'] | safe  }}" );
            php_config_file = encodeURIComponent( {{ parameters['php_config_file'] | safe |tojson }} );
            php_config_file_content = encodeURIComponent( {{ parameters['php_config_file_content'] | safe |tojson }} );

            // pass the variables back into the python code

            //var url = '/download_as_zip?app_id=' + '{{ parameters['app_id'] }}' + '&template_manifest_content=' + template_manifest_content + '&template_install_content=' + template_install_content + '&template_remove_content=' + template_remove_content + '&template_backup_content=' + template_backup_content + '&template_restore_content=' + template_restore_content + '&template_upgrade_content=' + template_upgrade_content + '&template_config_content=' + template_config_content + '&template_change_url_content=' + template_change_url_content + '&custom_config_file=' + custom_config_file+ '&custom_config_file_content=' + custom_config_file_content + '&nginx_config_file=' + nginx_config_file + '&systemd_config_file=' + systemd_config_file + '&use_php=' + use_php + '&php_config_file=' + php_config_file + '&php_config_file_content=' + php_config_file_content;

            var formData = new FormData();
            console.log(formData)
            formData.append('app_id', "{{ parameters['app_id'] }}");
            console.log(formData)
                //formData.append('template_manifest_content', template_manifest_content);
            //formData.append('template_install_content', template_install_content);
            //formData.append('template_remove_content', template_remove_content);
            //formData.append('template_backup_content', template_backup_content);
            //formData.append('template_restore_content', template_restore_content);
            //formData.append('template_upgrade_content', template_upgrade_content);
            //formData.append('template_config_content', template_config_content);
            formData.append('custom_config_file', custom_config_file);
            formData.append('custom_config_file_content', custom_config_file_content);
            formData.append('systemd_config_file', systemd_config_file);
            formData.append('nginx_config_file', nginx_config_file);
            formData.append('cron_config_file', cron_config_file);
            formData.append('use_php', use_php);
            formData.append('php_config_file', php_config_file);
            formData.append('php_config_file_content', php_config_file_content);
            var url = '/download_zip?' + new URLSearchParams(formData).toString()

            xhr.open('GET', url, true);
            //xhr.open('GET', '/download_as_zip', true);
            xhr.responseType = 'blob';

            console.log('Generating the zip archive using the following parameters:')
            console.log(url)

            xhr.onload = function() { // onload // onreadystatechange
            console.log("Running XHR")
                console.log(xhr.status)
                if (xhr.readyState === 4 && xhr.status === 200) {
                  var blob = new Blob([xhr.response], { type: 'application/zip' });
                  var url = URL.createObjectURL(blob);
                  var link = document.createElement('a');
                  link.href = url;
                  link.download = '{{ parameters['app_id'] }}' + '.zip'; // archive name
                  link.click();
                  URL.revokeObjectURL(url);
                } else {
                alert('Error while generating the zip archive. Error code: ' + xhr.status)
                }
            }
            console.log(xhr)
            console.log(xhr.status)
            xhr.send();
            console.log(xhr)
            console.log(xhr.status)
        }
    </script>
</head>
<body>

<div class="container" style="max-width: 800px;">
<h1 class="message text-center">Formulaire de génération d'une application Yunohost</h1>

<form id="main-form" class="form form-horizontal" method="POST" role="form">
    {{ main_form.hidden_tag() }}
    {{ wtf.form_errors(main_form, hiddens="only") }}

    {{ form_field(main_form.generator_mode) }}

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">1/8 - Informations générales</h2>
      </div>
      <div class="panel-body">
          <div>
            {{ form_field(main_form.app_name) }}
            {{ form_field(main_form.app_id) }}
            {{ form_field(main_form.description_en) }}
            {{ form_field(main_form.description_fr) }}
          </div>
      </div>
    </div>


    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">2/8 - Informations sur l'upstream</h2>
      </div>
      <div class="panel-body">
          <p><i>Le terme upstream désigne le projet original qui maintient l'app</i></p>
          <div>
            {{ form_field(main_form.license) }}
            {{ form_field(main_form.website) }}
            {{ form_field(main_form.demo) }}
            {{ form_field(main_form.admindoc) }}
            {{ form_field(main_form.userdoc) }}
            {{ form_field(main_form.code) }}
          </div>
      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">3/8 - Intégration dans YunoHost</h2>
      </div>
      <div class="panel-body">
          <div>
            {{ form_field(main_form.version) }}
            {{ form_field(main_form.maintainers) }}
            {{ form_field(main_form.multi_instance) }}
            {{ form_field(main_form.architectures) }}
            {{ form_field(main_form.ldap) }}
            {{ form_field(main_form.sso) }}
          </div>
      </div>
    </div>


    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">4/8 - Questions à poser pendant l'installation</h2>
      </div>
      <div class="panel-body">
          <p>
              <em>Cette partie sert à indiquer les questions qui devront être posées.</em>
              <br/>
              <em>NB: seules des questions standard sont proposées ici, il faudra éventuellement compléter à la main en
                  suivant le modèle des autres questions.</em>
          </p>

          <div>
            {{ form_field(main_form.domain_and_path) }}
            {{ form_field(main_form.init_main_permission) }}
            {{ form_field(main_form.init_admin_permission) }}
            {{ form_field(main_form.language) }}
          </div>
      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">5/8 - Ressources à initialiser</h2>
      </div>
      <div class="panel-body">
          <p>
              <em>Il s'agit d'éléments techniques configurés avant que le "vrai" script d'install de l'app ne soit lancé. Typiquement : créer un user système, télécharger les sources de l'app, initialiser le dossier d'install et de données, installer des dépendances avec apt, créer une base de donnée SQL, ...</em>
          </p>

          <h3>Sources du logiciel</h3>
          <div style="margin-left: 2em;">
            {{ form_field(main_form.source_url) }}
            {{ form_field(main_form.sha256sum) }}
            {{ form_field(main_form.auto_update) }}
          </div>


          <div>
            {{ form_field(main_form.system_user) }}
            {{ form_field(main_form.install_dir) }}
            {{ form_field(main_form.data_dir) }}
            {{ form_field(main_form.apt_dependencies) }}
            {{ form_field(main_form.database) }}
          </div>
      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">6/8 - Technologie spécifique</h2>
      </div>
      <div class="panel-body">
            {{ form_field(main_form.main_technology) }}
            <div id="php_options">
                <div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> You probably want to make sure to have 'phpX.Y-fpm' and others 'phpX.Y-foobar' libraries listed the apt dependencies earlier (with X.Y being the php version you want to use)</div>
                <div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> The generated application draft will include an nginx configuration snippet that interfaces with PHP-FPM</div>
                {{ form_field(main_form.use_composer) }}
            </div>
            <div id="nodejs_options">
                {{ form_field(main_form.nodejs_version) }}
                {{ form_field(main_form.use_yarn) }}
            </div>
            <div id="python_options">
                <div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> You probably want to make sure to have 'python3' and 'python3-venv' listed in the apt dependencies earlier. Other dependencies should be installed inside a venv (cf the proposed install snippet)</div>
            </div>
            {{ form_field(main_form.install_snippet) }}
            <div id="systemd_options">
                <div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> The generated application draft will include an nginx configuration snippet that reverse-proxies to a systemd service using an internal port</div>
                {{ form_field(main_form.systemd_execstart) }}
            </div>
      </div>
      <script>
        let main_technology = document.getElementById("main_technology");
        let install_snippet = document.getElementById("install_snippet");
        function update_main_technology()
        {
            document.getElementById("php_options").classList.add("hide");
            document.getElementById("nodejs_options").classList.add("hide");
            document.getElementById("python_options").classList.add("hide");
            document.getElementById("systemd_options").classList.add("hide");
            if (main_technology.value == "php") document.getElementById("php_options").classList.remove("hide");
            if (main_technology.value == "nodejs") document.getElementById("nodejs_options").classList.remove("hide");
            if (main_technology.value == "python") document.getElementById("python_options").classList.remove("hide");
            if ((main_technology.value != "php") && (main_technology.value != "none")) document.getElementById("systemd_options").classList.remove("hide");

            if (main_technology.value == "none")
            {
                install_snippet.value = "some_command --build";
            }
            else if (main_technology.value == "php")
            {
                if (document.getElementById("use_composer").checked)
                {
                    install_snippet.value = "ynh_install_composer";
                }
                else
                {
                    install_snippet.value = "some_command --build";
                }
            }
            else if (main_technology.value == "nodejs")
            {
                if (document.getElementById("use_yarn").checked)
                {
                    install_snippet.value = "ynh_exec_as $app $ynh_node_load_PATH yarn install --production --pure-lockfile\nynh_exec_as $app $ynh_node_load_PATH yarn build";
                }
                else 
                {
                    install_snippet.value = "ynh_exec_as $app $ynh_node_load_PATH $ynh_npm install --production --ignore-scripts\nynh_exec_as $app $ynh_node_load_PATH $ynh_npm run build"
                }
            }
            else if (main_technology.value == "python")
            {
                install_snippet.value = "python3 -m venv venv\nvenv/bin/pip3 install -r requirements.txt";
            }
            else if (main_technology.value == "ruby")
            {
                install_snippet.value = "ynh_gem update --system --no-document\nynh_gem install bundler foreman --no-document\nbundle config set --local deployment 'true'\nbundle config set --local without 'development test'\nbundle install";
            }
        }
        main_technology.addEventListener("change", update_main_technology);
        document.getElementById("use_composer").addEventListener("change", update_main_technology);
        document.getElementById("use_yarn").addEventListener("change", update_main_technology);
        update_main_technology();
      </script>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">7/8 - Configuration de l'app</h2>
      </div>
      <div class="panel-body">
            {{ form_field(main_form.use_custom_config_file) }}
            <!-- TODO : this show/hide the other fields -->
            <div id="custom_config_file_options">
            {{ form_field(main_form.custom_config_file) }}
            {{ form_field(main_form.custom_config_file_content) }}
            </div>
      </div>
      <script>
        let use_custom_config_file = document.getElementById("use_custom_config_file");
        function update_custom_config_file()
        {
            document.getElementById("custom_config_file_options").classList.add("hide");
            if (use_custom_config_file.checked) document.getElementById("custom_config_file_options").classList.remove("hide");
        }
        use_custom_config_file.addEventListener("change", update_custom_config_file);
        update_custom_config_file();
      </script>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">8/8 - Options avancées</h2>
      </div>
      <div class="panel-body">
            {{ form_field(main_form.supports_change_url) }}
            {{ form_field(main_form.use_logrotate) }}
            {{ form_field(main_form.use_fail2ban) }}
            {{ form_field(main_form.fail2ban_regex) }}
            {{ form_field(main_form.use_cron) }}
            {{ form_field(main_form.cron_config_file) }}
      </div>
    </div>

    <!-- Submit button -->
    <div class="text-center">
    {{ main_form.submit(class="btn btn-primary") }}
    </div>

    {% if parameters['invalid_form'] %}
    <p class="alert">Formulaire invalide, veuillez vérifier quel champ contient une erreur svp.</p>
    {% endif %}
</form>


<hr>

{% if parameters['preview'] %} {# is defined #}
<details>
    <summary>Afficher le code des fichiers principaux</summary>
    <h1>Voici le code de l'application <i>{{parameters['app.name']}}</i></h1>


    <!input id="clear_install" type="button" value="Cacher" onclick="clearPage('install_page','install.j2')">
    <!input id="show_install" type="button" value="Afficher" onclick="showPage('install_page')">

    <!-- manifest -->
    <h2>Manifeste <i class="grayed_hint">(manifest.toml)</i></h2>
    <div class="code-block">
<pre>
<code id="manifest_code">
{% set lines = template_manifest_content.splitlines() %}
{% for line in lines %} {{ line }}
{% endfor %}
</code>
</pre>
    </div>

    <button onclick="copyCodeBlock('#manifest_code')"
            title="Mettre dans le presse-papier. Il faudra alors le coller dans un fichier nommé `manifest.toml`.">
        &#x1F4CB; Copier le code
    </button>
    <! paperclip emoji>
    <a href="#" id="download_manifest" download="manifest.toml" onclick="downloadFile('manifest')"
       title="Enregistrer le fichier sur votre ordinateur.">
        <button>&#x1F4BE; Télécharger le manifeste</button>
    </a>


    <!-- install -->
    <h2>Script d'installation <i class="grayed_hint">(install)</i></h2>
    <div class="code-block">
<pre>
<code id="install_code">
{% set lines = template_install_content.splitlines() %}
{% for line in lines %} {{ line }}
{% endfor %}
</code>
</pre>
    </div>

    <button onclick="copyCodeBlock('#install_code')"
            title="Mettre dans le presse-papier. Il faudra alors le coller dans un fichier nommé `install` (sans extension).">
        &#x1F4CB; Copier le code
    </button>
    <! paperclip emoji>
    <a href="#" id="download_install" download="install" onclick="downloadFile('install')"
       title="Enregistrer le fichier sur votre ordinateur.">
        <button>&#x1F4BE; Télécharger le script d'installation</button>
    </a>


    <!-- remove -->
    <h2>Script de suppression <i class="grayed_hint">(remove)</i></h2>
    <div class="code-block">
<pre>
<code id="remove_code">
{% set lines = template_remove_content.splitlines() %}
{% for line in lines %} {{ line }}
{% endfor %}
</code>
</pre>
    </div>

    <button onclick="copyCodeBlock('#remove_code')"
            title="Mettre dans le presse-papier. Il faudra alors le coller dans un fichier nommé `remove` (sans extension).">
        &#x1F4CB; Copier le code
    </button>
    <! paperclip emoji>
    <a href="#" id="download_remove" download="remove" onclick="downloadFile('remove')"
       title="Enregistrer le fichier sur votre ordinateur.">
        <button>&#x1F4BE; Télécharger le script de suppression</button>
    </a>


    <!-- backup -->
    <h2>Script de sauvegarde <i class="grayed_hint">(backup)</i></h2>
    <div class="code-block">
<pre>
<code id="backup_code">
{% set lines = template_backup_content.splitlines() %}
{% for line in lines %} {{ line }}
{% endfor %}
</code>
</pre>
    </div>

    <button onclick="copyCodeBlock('#backup_code')"
            title="Mettre dans le presse-papier. Il faudra alors le coller dans un fichier nommé `backup` (sans extension).">
        &#x1F4CB; Copier le code
    </button>
    <! paperclip emoji>
    <a href="#" id="download_backup" download="backup" onclick="downloadFile('backup')"
       title="Enregistrer le fichier sur votre ordinateur.">
        <button>&#x1F4BE; Télécharger le script de sauvegarde</button>
    </a>


    <!-- restore -->
    <h2>Script de restauration <i class="grayed_hint">(restore)</i></h2>
    <div class="code-block">
<pre>
<code id="restore_code">
{% set lines = template_restore_content.splitlines() %}
{% for line in lines %} {{ line }}
{% endfor %}
</code>
</pre>
    </div>

    <button onclick="copyCodeBlock('#restore_code')"
            title="Mettre dans le presse-papier. Il faudra alors le coller dans un fichier nommé `restore` (sans extension).">
        &#x1F4CB; Copier le code
    </button>
    <! paperclip emoji>
    <a href="#" id="download_restore" download="restore" onclick="downloadFile('restore')"
       title="Enregistrer le fichier sur votre ordinateur.">
        <button>&#x1F4BE; Télécharger le script de restauration</button>
    </a>


    <!-- upgrade -->
    <h2>Script de mise à jour <i class="grayed_hint">(upgrade)</i></h2>
    <div class="code-block">
<pre>
<code id="upgrade_code">
{% set lines = template_upgrade_content.splitlines() %}
{% for line in lines %} {{ line }}
{% endfor %}
</code>
</pre>
    </div>

    <button onclick="copyCodeBlock('#upgrade_code')"
            title="Mettre dans le presse-papier. Il faudra alors le coller dans un fichier nommé `upgrade` (sans extension).">
        &#x1F4CB; Copier le code
    </button>
    <! paperclip emoji>
    <a href="#" id="download_upgrade" download="upgrade" onclick="downloadFile('upgrade')"
       title="Enregistrer le fichier sur votre ordinateur.">
        <button>&#x1F4BE; Télécharger le script de mise à jour</button>
    </a>


    <!-- config -->
    <h2>Script de configuration spéciale <i class="grayed_hint">(config)</i></h2>
    <div class="code-block">
<pre>
<code id="config_code">
{% set lines = template_config_content.splitlines() %}
{% for line in lines %} {{ line }}
{% endfor %}
</code>
</pre>
    </div>

    <button onclick="copyCodeBlock('#config_code')"
            title="Mettre dans le presse-papier. Il faudra alors le coller dans un fichier nommé `config` (sans extension).">
        &#x1F4CB; Copier le code
    </button>
    <! paperclip emoji>
    <a href="#" id="download_config" download="config" onclick="downloadFile('config')"
       title="Enregistrer le fichier sur votre ordinateur.">
        <button>&#x1F4BE; Télécharger le script de configuration spéciale</button>
    </a>


    <!-- change_url -->
    {%- if template_change_url_content -%}
    <h2>Script de changement d'URL <i class="grayed_hint">(change_url)</i></h2>
    <div class="code-block">
<pre>
<code id="change_url_code">
{% set lines = template_change_url_content.splitlines() %}
{% for line in lines %} {{ line }}
{% endfor %}
</code>
</pre>
    </div>

    <button onclick="copyCodeBlock('#change_url_code')"
            title="Mettre dans le presse-papier. Il faudra alors le coller dans un fichier nommé `change_url` (sans extension).">
        &#x1F4CB; Copier le code
    </button>
    <! paperclip emoji>
    <a href="#" id="download_change_url" download="change_url" onclick="downloadFile('change_url')"
       title="Enregistrer le fichier sur votre ordinateur.">
        <button>&#x1F4BE; Télécharger le script de changement d'URL</button>
    </a>
    {% endif %}

    <!-- systemd_config_file -->
    {%- if systemd_config_file -%}
    <h2>Fichier de configuration du service SystemD <i class="grayed_hint">(systemd.service)</i></h2>
    <div class="code-block">
        <pre>
            <code id="systemd_config_file_code">
            {{parameters['systemd_config_file']}}
            </code>
        </pre>
    </div>

    <button onclick="copyCodeBlock('#systemd_config_file_code')"
            title="Mettre dans le presse-papier. Il faudra alors le coller dans un fichier nommé `systemd.service`, à placer dans le dossier `conf`.">
        &#x1F4CB; Copier le code
    </button>
    <! paperclip emoji>
    <a href="#" id="download_systemd_config_file" download="systemd_config_file"
       onclick="downloadFile('systemd_config_file')"
       title="Enregistrer le fichier sur votre ordinateur.">
        <button>&#x1F4BE; Télécharger le fichier de configuration du service SystemD</button>
    </a>
    {% endif %}

    <!-- nginx_config_file -->
    {%- if nginx_config_file -%}
    <h2>Fichier de configuration de NGINX <i class="grayed_hint">(nginx.conf)</i></h2>
    <div class="code-block">
        <pre>
            <code id="nginx_config_file_code">
            {{parameters['nginx_config_file']}}
            </code>
        </pre>
    </div>

    <button onclick="copyCodeBlock('#nginx_config_file_code')"
            title="Mettre dans le presse-papier. Il faudra alors le coller dans un fichier nommé `nginx.conf`, à placer dans le dossier `conf`.">
        &#x1F4CB; Copier le code
    </button>
    <! paperclip emoji>
    <a href="#" id="download_nginx_config_file" download="nginx_config_file"
       onclick="downloadFile('nginx_config_file')"
       title="Enregistrer le fichier sur votre ordinateur.">
        <button>&#x1F4BE; Télécharger le fichier de configuration d'NGINX</button>
    </a>
    {% endif %}

    <!-- custom_config_file -->
    {%- if custom_config_file -%}
    <h2>Fichier de configuration personnalisé <i class="grayed_hint">({{custom_config_file}})</i></h2>
    <div class="code-block">
        <pre>
            <code id="custom_config_file_code">
            {{parameters['custom_config_file_content']}}
            </code>
        </pre>
    </div>

    <button onclick="copyCodeBlock('#custom_config_file_code')"
            title="Mettre dans le presse-papier. Il faudra alors le coller dans un fichier nommé `{{custom_config_file}}`, à placer dans le dossier `conf`.">
        &#x1F4CB; Copier le code
    </button>
    <! paperclip emoji>
    <a href="#" id="download_custom_config_file" download="custom_config_file"
       onclick="downloadFile('custom_config_file')"
       title="Enregistrer le fichier sur votre ordinateur.">
        <button>&#x1F4BE; Télécharger le fichier de configuration personnalisé</button>
    </a>
    {% endif %}

    <!-- cron_config_file -->
    {%- if cron_config_file -%}
    <h2>Fichier de configuration de tâche CRON <i class="grayed_hint">(task.cron)</i></h2>
    <div class="code-block">
        <pre>
            <code id="cron_config_file_code">
            {{parameters['cron_config_file']}}
            </code>
        </pre>
    </div>

    <button onclick="copyCodeBlock('#cron_config_file_code')"
            title="Mettre dans le presse-papier. Il faudra alors le coller dans un fichier nommé `task.cron`, à placer dans le dossier `conf`.">
        &#x1F4CB; Copier le code
    </button>
    <! paperclip emoji>
    <a href="#" id="download_cron_config_file" download="cron_config_file"
       onclick="downloadFile('cron_config_file')"
       title="Enregistrer le fichier sur votre ordinateur.">
        <button>&#x1F4BE; Télécharger le fichier de configuration de la tâche CRON</button>
    </a>
    {% endif %}

    <!--
    End of file content part.
    -->
</details>

<p>
    <button id="download_as_zip" class="btn btn-primary btn-sm" style="font-size: large;"
            title="Enregistrer tous les fichiers sur votre ordinateur." onclick="download_zip()">
        &#x1F4BE; Télécharger tous les fichiers de l'application (archive .zip)
    </button>
</p>
<!--
End of the result part
-->
{% endif %}

</div>
{% endblock %}