{% macro form_errors(form, hiddens=True) %}
  {%- if form.errors %}
    {%- for fieldname, errors in form.errors.items() %}
      {%- if is_hidden_field(form[fieldname]) and hiddens or
             not is_hidden_field(form[fieldname]) and hiddens != 'only' %}
        {%- for error in errors %}
          <p class="error">{{error}}</p>
        {%- endfor %}
      {%- endif %}
    {%- endfor %}
  {%- endif %}
{%- endmacro %}

{% macro form_field(field) %}
{% 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>
{%- elif field.type == 'RadioField' -%}
    {% for item in field -%}
      <div class="radio">
        <label>
          {{item|safe}} {{item.label.text|safe}}
        </label>
      </div>
    {% endfor %}
{% else -%}
  <div class="form-group {% if field.errors %} has-error{% endif -%}
                         {%- if field.flags.required %} required{% endif -%}
  ">
      {{field.label(class="control-label")|safe}}
      {% if field.type == 'FileField' %}
        {{field(**kwargs)|safe}}
      {% else %}
        {{field(class="form-control", **kwargs)|safe}}
      {% endif %}

      {%- if field.errors %}
        {%- for error in field.errors %}
          <p class="help-block">{{error}}</p>
        {%- endfor %}
      {%- elif field.description -%}
        <p class="help-block">{{field.description|safe}}</p>
      {%- endif %}
  </div>
{% 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 package generator") }} 
    </h1>
    <p>Version: {{ config["GENERATOR_VERSION"] }}</p>
    <script>
    function changeLanguage(lang) {
        var url = "{{ url_for('set_lang', lang=lang) }}" + lang;
        window.location.href = url;
    }
    </script>
    <div>
        {% for lang_id, lang_label in config["LANGUAGES"].items() %}
            <button class="btn btn-sm bg-gray-200" type="button" onclick="changeLanguage('{{ lang_id }}')">{{ lang_label }}</button>
        {% endfor %}
    </div>
</div>

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

    {{ main_form.hidden_tag() }}
    <div class="text-red-500 text-center">
        {% if main_form.errors %}<p>{{ _("The form contains issues") }}<p/>{% endif %}
        {{ 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">{{ _("1/9 - General information") }}</h2>
      </div>
      <div class="panel-body hide">
          <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">{{ _("2/9 - Upstream information") }}</h2>
      </div>
      <div class="panel-body hide">
          <p class="tip">{{ _("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">{{ _("3/9 - Integration in YunoHost") }}</h2>
      </div>
      <div class="panel-body hide">
          <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">{{ _("4/9 - Questions to ask during installation") }}</h2>
      </div>
      <div class="panel-body hide">
          <p class="tip">
              {{ _("This part is meant to indicate the questions that will be asked.") }}
              <br/>
              {{ _("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">{{ _("5/9 - Resources to initialize") }}</h2>
      </div>
      <div class="panel-body hide">
          <p class="tip">
              {{ _("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">{{ _("6/9 - Specific technology") }}</h2>
      </div>
      <div class="panel-body hide">
            {{ 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");
        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">{{ _("7/9 - App configuration") }}</h2>
      </div>
      <div class="panel-body hide">
            {{ 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">{{ _("8/9 - General and advanced documentation") }}</h2>
      </div>
      <div class="panel-body hide">
          {{ 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">{{ _("9/9 - Advanced options") }}</h2>
      </div>
      <div class="panel-body hide">
            {{ 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 hide 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() {
        this.nextElementSibling.classList.toggle("hide");
        this.classList.toggle("active");
      });
    }
</script>
{% endblock %}