{% import "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 "base.html" %}

{% block main %}
<div class="mx-auto w-full text-center p-8">
    <img alt="YunoHost application logo" src="{{ url_for('static', filename='yunohost-package.png') }}" class="w-32 mx-auto">
    <h1 class="text-2xl font-bold">
        {{ _("Yunohost application generation form") }} 
    </h1>
    <p>Version: {{ generator_info['GENERATOR_VERSION'] }}</p>
    <script>
    function changeLanguage(lang) {
        var url = "{{ url_for('set_language', language=lang) }}" + lang;
        window.location.href = url;
    }
    </script>
    <div>
        {% for lang in AVAILABLE_LANGUAGES.items() %}
            <button class="btn btn-sm bg-gray-200" type="button" onclick="changeLanguage('{{ lang[0] }}')">{{ lang[1] }}</button>
        {% endfor %}
    </div>
</div>

<form method="POST" role="form">

    {{ main_form.hidden_tag() }}
    <div class="text-red-800">
    {{ wtf.form_errors(main_form, hiddens="only") }}
    </div>

    {{ form_field(main_form.generator_mode) }}

    <div class="panel">
      <div class="panel-heading collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("1/9 - General information") }}</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">
      <div class="panel-heading collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("2/9 - Upstream information") }}</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          <p class="tip">{{ gettext("The word 'upstream' refers to the original project that develops and maintains the app") }}</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">
      <div class="panel-heading collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("3/9 - Integration in 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">
      <div class="panel-heading collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("4/9 - Questions to ask during installation") }}</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          <p class="tip">
              {{ gettext("This part is meant to indicate the questions that will be asked.") }}
              <br/>
              {{ gettext("NB: only standard questions are asked here, it might be required to complete it by hand using other questions as a guide.") }}
          </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">
      <div class="panel-heading collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("5/9 - Resources to initialize") }}</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          <p class="tip">
              {{ gettext("Technical elements configured before launching the 'real' app install script. Usually : creating a system user, downloading app sources, initialiser le dossier d'install et de données, install apt dependencies, create a database, ...") }}
          </p>

          <h3>Sources du logiciel</h3>
          <div class="pl-2">
            {{ 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">
      <div class="panel-heading collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("6/9 - Specific technology") }}</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> {{ gettext("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> {{ gettext("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> {{ gettext("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> {{ gettext("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");
        let systemd_execstart = document.getElementById("systemd_execstart");

        install_snippet.classList.add("font-mono");
        systemd_execstart.classList.add("font-mono");

        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">
      <div class="panel-heading collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("7/9 - App configuration") }}</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">
      <div class="panel-heading collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("8/9 - General and advanced documentation") }}</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          {{ form_field(main_form.description) }}
          {{ 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">
      <div class="panel-heading collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("9/9 - Advanced options") }}</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") }}
        <br/>
        {{ main_form.submit_demo(class="btn") }}
    </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>


</form>

<hr class="my-2" />

{% if generated_files %}
<div>
<h2 class="text-center">Code généré</h2>
{% for file in generated_files %}
    <div class="panel">
      <div class="panel-heading collapse-button">
        <h3 class="panel-title collapse-title">{{ file.destination_path }}</h3>
      </div>
      <div class="panel-body collapsible collapsed p-0">
          <pre class="m-0">{{ file.content }}</pre>
      </div>
    </div>
{% endfor %}
</div>
{% endif %}

<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 %}