{% extends 'base.html' %}

{% block title %}projects{% endblock %}

{% block head %}
  <style>
  .collapse h4 {line-height: 55px;}
  .button, .state {margin-right: 5px;}
  </style>
{% endblock %}

{% block body %}
<h2>
  <a class="link" target="_blank" href="{{ url }}">Get the list of projects uploaded to this Scrapy server.</a>
  <label title="deploy a project or add a version">
    <a class="button safe narrow" href="{{ url_deploy }}">+</a>
  </label>
</h2>

<div class="wrap collapse-wrap">
  <h3>{{ node_name }}</h3>
  <ul class="collapse">
    {% if not results %}
    <li>No projects found. Go to <a class="button safe" href="{{ url_deploy }}">Deploy Project</a></li>
    {% endif %}

  {% for project, url_listversions in results %}
    <li id="project_{{ project }}">
      <div class="title" onclick="execXHR('{{ url_listversions }}', 'versions_of_{{ project }}'); this.onclick=null;">
        <h4>{{ project }}</h4>
        <i class="iconfont icon-right"></i>
      </div>
      <div id="versions_of_{{ project }}"></div>
    </li>
  {% endfor %}
  </ul>
</div>


<script>
function execXHR(url, id, popup){
  if (popup !== undefined) {
    var r = confirm(popup);
    if (r == false) {
      return;
    }
  }
  showLoader();
  var req = new XMLHttpRequest();
  req.onreadystatechange = function() {
    if (this.readyState == 4) {
      hideLoader();
      if (this.status == 200) {
        my$('#'+id).innerHTML = this.responseText;
      } else {
        my$('#'+id).innerHTML = getRequestFailHtml(url, 'code', this.status);
        //alert("REQUEST got code: " + this.status);
      }
    }
  };
  req.open('post', url, Async = true);
  req.send();
}
</script>

<script>
// handle collapse components
(function () {
  var collapse = my$('.collapse');
  var titles = my$$('.collapse .title');
  var lis = my$$('.collapse li');
  titles.forEach(function(title) {
    title.addEventListener('click', function(e){
      var index = [].indexOf.call(titles, this);
      lis[index].classList.toggle('active');
    });
  });
})();
</script>
{% endblock %}
