{% extends "base.html" %}

{% block main_area %}

<div class="page-header">
  <h4 class="main-section-title">Repositories</h4>
  <!-- Button trigger modal add repository -->
  <span data-toggle="tooltip" title="Add new repository" data-placement="right">
    <button type="button" class="btn btn-primary btn-xs btn-main-add"
	    id="add-repo-btn" data-toggle="modal" data-target="#repoModal">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
    </button>
  </span>
</div>

{% include "repository_modal.html" %}

{% include "start_build_modal.html" %}

{% include "output_plugins_modal.html" %}

<div class="row main-row">
  <table class="table">
    <thead>
      <th>Name</th>
      <th>URL</th>
      <th>Status</th>
    </thead>
    <tbody id="tbody-repos">
      {% for repo in repos %}
      <tr id="repo-row-{{repo.name}}">
	<td>
	  {{repo.name}}
	  <span data-toggle="tooltip" title="Edit repository"
		data-placement="right">
	    <button type="button"
		    class="btn btn-default btn-xs btn-main-edit btn-transparent
			   btn-edit-repo"
		    data-toggle="modal" data-target="#repoModal"
		    data-repo-name="{{repo.name}}" data-repo-url="{{repo.url}}"
		    data-repo-update-seconds="{{repo.update_seconds}}"
		    data-repo-vcs-type="{{repo.vcs_type}}"
		    data-repo-parallel-builds="{{repo.parallel_builds}}"
		    data-repo-id="{{repo.id}}">
	      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
	    </button>
	  </span>
	  <span data-toggle="tooltip" title="Config output methods"
		data-placement="right">
	    <button type="button"
		    class="btn btn-default btn-xs btn-main-edit btn-transparent
			   btn-edit-plugin"
		    data-toggle="modal" data-target="#outputPluginModal"
		    data-repo-id="{{repo.id}}">
	      <span class="glyphicon glyphicon-share" aria-hidden="true"></span>
	    </button>
	  </span>
	</td>
	<td>{{repo.url}}</td>
	<td>
	  <form action="/waterfall/{{repo.name}}" class="repo-status-form">
	    <span data-toggle="tooltip" title="Go to waterfall"
		  data-placement="right">
	      <button type="submit"
		      class="btn btn-xs btn-{{get_btn_class(repo.status)}}
			     btn-status"
		      id="btn-status-{{repo.name}}">
		{{repo.status}}
	      </button>
	    </span>
	  </form>
	  <div class="spinner-placeholder" id="spinner-placeholder-{{repo.id}}">
	    <i class="fa toxic-spinner-main"
	       id="spinner-repo-{{repo.name}}"
	       {% if repo.status not in ['running', 'cloning'] %}
	         style="display:none" {% end %}></i>
	  </div>

	</td>
      </tr>
      {% end %}
    </tbody>
  </table>
</div>


<div class="page-header">
  <h4 class="main-section-title">Slaves</h4>
  <span data-toggle="tooltip" title="Add new slave">
    <button id="add-slave-btn" type="button"
	    class="btn btn-primary btn-xs btn-main-add"
	    data-toggle="modal" data-target="#slaveModal">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
    </button>
  </span>
</div>

{% include "slave_modal.html" %}

<div class="row main-row">
  <table class="table">
    <thead>
      <th>Name</th>
      <th>Host</th>
      <th>Port</th>
    </thead>
    <tbody id="tbody-slaves">
      {% for slave in slaves %}
      <tr id="obj-row-{{slave.id}}" class="slave-row">
	<td>
	  {{slave.name}}
	  <span data-toggle="tooltip" title="Edit slave" data-placement="right">
	    <button type="button"
		    class="btn btn-default btn-xs btn-main-edit
			   btn-transparent btn-edit-slave"
		    data-toggle="modal"
		    data-target="#slaveModal"
		    data-obj-id="{{slave.id}}"
		    data-slave-name="{{slave.name}}"
		    data-slave-host="{{slave.host}}"
		    data-slave-port="{{slave.port}}">
	      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
	    </button>
	  </span>
	</td>
	<td>{{slave.host}}</td>
	<td>{{slave.port}}</td>
      </tr>
      {% end %}
    </tbody>
  </table>
</div>

{% end %}

{% block js_bottom %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{{static_url}}toxicbuild/js/jquery.min.js"></script>
<script src="{{static_url}}toxicbuild/js/bootstrap.min.js"></script>
<!-- validator for repo and slave modals -->
<script src="{{static_url}}toxicbuild/js/validator.js"></script>
<script src="{{static_url}}toxicbuild/js/utils.js"></script>
<script src="{{static_url}}toxicbuild/js/base.js"></script>
<script src="{{static_url}}toxicbuild/js/repository.js"></script>
<script src="{{static_url}}toxicbuild/js/plugin.js"></script>
<script src="{{static_url}}toxicbuild/js/slave.js"></script>
<script src="{{static_url}}toxicbuild/js/main.js"></script>

<script>
  TOXICDEBUG = true;
  {% autoescape None %}
  var SLAVES = {{[s.name for s in slaves]}};
  RepositoryManager.init({{[r.to_json() for r in repos]}});
  SlaveManager.init({{[s.to_json() for s in slaves]}});
  PluginManager.init({{[p.to_json() for p in plugins]}});

  jQuery(function () {
    jQuery('[data-toggle="tooltip"]').tooltip()
  });
</script>

{% end %}
