{% 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 %}
<div class="container" style="max-width: 800px;">
<h1 class="message text-center">Formulaire de génération d'une application Yunohost</h1>
<p style="text-align: center; margin-left:5%">Version: {{ generator_info['GENERATOR_VERSION'] }}</p>

<form id="main-form" class="form form-horizontal" method="POST" role="form">
    {{ main_form.hidden_tag() }}
    <div style="color: red;">
    {{ wtf.form_errors(main_form, hiddens="only") }}
    </div>

    {{ form_field(main_form.generator_mode) }}


    <div class="panel panel-primary">
      <div class="panel-heading collapse-button">
        <h2 class="panel-title collapse-title">1/9 - Informations générales</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          <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 collapse-button">
        <h2 class="panel-title collapse-title">2/9 - Informations sur le projet upstream de l'application</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          <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 collapse-button">
        <h2 class="panel-title collapse-title">3/9 - Intégration dans YunoHost</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          <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 collapse-button">
        <h2 class="panel-title collapse-title">4/9 - Questions à poser pendant l'installation</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          <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 collapse-button">
        <h2 class="panel-title collapse-title">5/9 - Ressources à initialiser</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          <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 collapse-button">
        <h2 class="panel-title collapse-title">6/9 - Technologie spécifique</h2>
      </div>
      <div class="panel-body collapsible collapsed">
            {{ 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 collapse-button">
        <h2 class="panel-title collapse-title">7/9 - Configuration de l'app</h2>
      </div>
      <div class="panel-body collapsible collapsed">
            {{ 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 collapse-button">
        <h2 class="panel-title collapse-title">8/9 - Documentation générale et avancée</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          <p><i>Une présentation plus complète que le résumé remplit plus haut de ce à quoi correspond le logiciel, et les avertissements et précisions éventuelles sur son fonctionnement dans Yunohost (c'est l'endroit où l'on signale des problèmes d'intégrations).</i></p>
          {{ form_field(main_form.description) }}
          {{ form_field(main_form.disclaimer) }}

          <p><i>Des indications à afficher à des étapes clés de gestion du paquet: installation, mise à jour, message au compte admin. Vous n'avez généralement pas besoin de les remplir.</i></p>
          {{ form_field(main_form.pre_install) }}
          {{ form_field(main_form.post_install) }}
          {{ form_field(main_form.pre_upgrade) }}
          {{ form_field(main_form.post_upgrade) }}
          {{ form_field(main_form.admin) }}


      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading collapse-button">
        <h2 class="panel-title collapse-title">9/9 - Options avancées</h2>
      </div>
      <div class="panel-body collapsible collapsed">
            {{ form_field(main_form.enable_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 -->
    <p class="text-center">
        {{ main_form.submit_preview(class="btn btn-primary") }}
        {{ main_form.submit_download(class="btn btn-primary") }}
    </p>

    <!-- Submit button for demo values-->
    <script>
        function fillFormWithDefaultValues() {
            console.log("Filling the form with minimal dummy values")
            document.getElementById('app_id').value = "awesome_app_demo"
            document.getElementById('app_name').value = "Awesome demo app"
            document.getElementById('description_en').value = "Dummy app to demonstrate Yunohost app generator"
            document.getElementById('description_fr').value = "Application factice de démonstration du générateur d'application Yunohost"
            document.getElementById('version').value = "1.0~ynh1"
            document.getElementById('architectures').value = "all"
            // document.getElementById('ldap').value = "not_relevant"
            // document.getElementById('sso').value = "not_relevant"
            document.getElementById('license').value = "AGPL-3.0"
            document.getElementById('code').value = "https://github.com/YunoHost/example_ynh/"
            document.getElementById('source_url').value = "https://github.com/YunoHost/example_ynh/archive/1235ae57a3a285a4024d028d860f56980fa5ed19.tar.gz"
            document.getElementById('sha256sum').value = "471ff03ae251812d3d042fb7e9206c812de5bf07bd4ac4c95763278702eff30a"        }
    </script>
    <p class="text-center">
        {{ main_form.submit_demo(class="btn btn-primary") }}
    </p>

    </form>
    </div>
</form>


<hr>

{% if generated_files %}
<h2>Code généré</h1>
{% for file in generated_files %}
    <div class="panel panel-primary">
      <div class="panel-heading collapse-button">
        <h3 class="panel-title collapse-title">{{ file.destination_path }}</h3>
      </div>
      <div class="panel-body collapsible collapsed" style="padding: 0;">
          <pre style="margin:0;">{{ file.content }}</pre>
      </div>
    </div>
{% endfor %}
{% endif %}

</div>

<script>
    var coll = document.getElementsByClassName("collapse-button");
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {

        if (this.classList.contains('expanded')) {
          this.classList.remove('expanded');
          this.nextElementSibling.classList.add('collapsed');
        } else {
          this.classList.add('expanded');
          this.nextElementSibling.classList.remove('collapsed');
        }

        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        }
      });
    }
</script>
{% endblock %}