{% extends "template.html" %}
{% block head %}
  {{ super() }}
  <script type=text/javascript>
      $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
  </script>
  <script type=text/javascript>
    // subproject activation
    $(function() {
      $('a#activate_subproject').bind('click', function() {
      $('#activate_btn').html('ACTIVATING <i class="fa fa-spinner fa-pulse fa-fw"></i>');
        $.getJSON($SCRIPT_ROOT + '/_background_subproject', {
          sp: $('select[name="subprojects"]').val(),
        }, function(data) {
          // iterate over the dictionary sent from the server and update the values in all the fields
          for(key in data.p_info) {
            console.log("activation: The value of ", key, " is ", data.p_info[key]);
            $("#" + key).text(data.p_info[key]);
          }
          $("#subproj_txt").text(data.subproj_txt);
          $("div#navbar_links").html(data.navbar_links);
          $('#activate_btn').html('ACTIVATE');
        });
        document.getElementById("deactivate_btn").disabled = false;
        render_options();
      });
    });
  </script>
  <script type=text/javascript>
    // subproject deactivation
    $(function() {
      $('a#deactivate_subproject').bind('click', function() {
        $('#deactivate_btn').html('DEACTIVATING <i class="fa fa-spinner fa-pulse fa-fw"></i>');
        $.getJSON($SCRIPT_ROOT + '/_background_subproject', {
          sp: "None",
        }, function(data) {
          // iterate over the dictionary sent from the server and update the values in all the fields
          for(key in data.p_info) {
            console.log("deactivation: The value of ", key, " is ", data.p_info[key]);
            $("#" + key).text(data.p_info[key]);
          }
          $("#subproj_txt").text(data.subproj_txt);
          $("div#navbar_links").html(data.navbar_links);
          $('#deactivate_btn').html('DEACTIVATE');
        });
        document.getElementById("deactivate_btn").disabled = true;
        render_options();
      });
    });
  </script>
  <script type=text/javascript>
    function render_options() {
            $.getJSON($SCRIPT_ROOT + '/_background_options', {
          act: $('select[name="actions"]').val(),
        }, function(data) {
          $("div#options").html(data.options);
        });
        return false;
    }
    $(function() {
      // The function is triggered on page load and with the "select#show_options" change
      render_options()
      $('select#show_options').bind('change', render_options);
    });
  </script>
  <script>
    function show_value(name, value) {
      // This function is used in the form in the options.html file
      // get the name of the element to control and the value that should be displayed
     document.getElementById(name).innerHTML=value;
    };
  </script>
{% endblock %}
{% block title %}Process{% endblock %}
{% block content %}
    <div class="card border-light mb-3" style="display:inline-block;">
      <div class="card-header"><b>Project Metadata</b></div>
      <div class="card-body">
        {% for item in p_info %} 
        <p class="card-text"><b>{{ item }}: </b><code id="{{ item }}">{{ p_info[item] }}</code></p>
        {% endfor %}
      </div>
    <!-- </div> -->
      {% if subprojects is not none %}
      <!-- <div class="card border-secondary mb-3" style="display:inline-block;"> -->
        <div class="card-header">Select subproject</div>
        <div class="card-body">
          <select name="subprojects" class="custom-select" style="width:auto;">
              {% for i in subprojects %}
                  <option value="{{ i }}">{{ i }}</option>
              {% endfor %}
          </select>
          <a href='#' id=activate_subproject><button id="activate_btn" type="submit" class="btn btn-outline-dark ml-2">ACTIVATE</button></a>
          {% if selected_subproject is none %}
            <a href='#' id=deactivate_subproject><button id="deactivate_btn" disabled type="submit" class="btn btn-outline-dark ml-2">DEACTIVATE</button></a>
          {% else %}
            <a href='#' id=deactivate_subproject><button id="deactivate_btn" type="submit" class="btn btn-outline-dark ml-2">DEACTIVATE</button></a>
          {% endif %}
          <div class="divider-vertical">
            <p id=subproj_txt class="badge badge-primary">Activated subproject: {{ selected_subproject }}</p>
          </div>
        </div>
      </div>
    {% endif %}
    <hr class="col-xs-12">
    <div class="card border-light mb-3" style="display:inline-block;">
      <div class="card-header"><b>Perform action on the project:</b></div>
      <div class="card-body">
        <select id="show_options" name="actions" class="custom-select" style="width:auto;">
          {% for i in actions %}
            <option value="{{ i }}">{{ i|title }}</option>
          {% endfor %}
        </select>
        </div>
        <div id="options" class="divider-vertical"></div>
      </div>
{% endblock %}