{% extends "script/script_base.html" %}
{% load static %}
{% load i18n %}
{% load utility_tags %}

{% block head %}
{{block.super}}
<script src="{% static 'typeahead-0.11.1/typeahead.bundle.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/typeaheadjs.css' %}"/>
<link rel="stylesheet" href="{% static 'dt/datatables.min.css' %}"/>
<script src="{% static 'dt/datatables.min.js' %}"></script>

<style type="text/css">
.tt-menu {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1100 !important;
}
.tt-suggestion {
    padding: 8px 20px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}
.tt-suggestion:hover {
    background-color: #0097cf;
    color: #fff;
}
.twitter-typeahead { width: 100%; }
pre.output-box {
    white-space: pre-wrap;
    background: #fdfdfd;
    max-height: 100px;
    overflow-y: auto;
    font-size: 10px;
    margin: 0;
    padding: 4px;
    border: 1px solid #ddd;
    color: #555;
}
</style>

<script type="text/javascript">
(function($) {
"use strict";

function main() {
  var taOptions = { minLength: 0, highlight: true };

  var hostsSource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
      url: "{% url 'upgrade:complete' domain='hosts' %}?name=%QUERY",
      wildcard: '%QUERY',
      transform: function(r) { return $.map(r.names, function(n) { return { v: n }; }); }
    }
  });

  var groupsSource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
      url: "{% url 'upgrade:complete' domain='groups' %}?name=%QUERY",
      wildcard: '%QUERY',
      transform: function(r) { return $.map(r.names, function(n) { return { v: n }; }); }
    }
  });

  $('#id_add_host').typeahead(taOptions, { name: 'h', display: 'v', source: hostsSource, limit: 100 });
  $('#id_add_group, #id_del_group').typeahead(taOptions, { name: 'g', display: 'v', source: groupsSource, limit: 100 });

  // Apertura automatica lista al focus
  $('#id_add_host, #id_add_group, #id_del_group').on('focus', function() {
    var $el = $(this);
    if ($el.val() === '') {
        $el.typeahead('val', ' '); 
        $el.typeahead('val', '');
    }
  });

  if ($("#host_list").length) {
      $("#host_list").DataTable({
          language: { url: "{% static 'dt/i18n/' %}{{LANGUAGE_CODE}}.lang" },
          pageLength: 25
      });
  }
}
$(document).ready(main);
})(jQuery);
</script>
{% endblock %}

{% block content %}
<div class="row">
  <div class="col-md-9">
    <h1>{% blocktrans with name=script.name|unquote_plus run=run.name|unquote_plus %}Edit run {{run}} of script {{name}}{% endblocktrans %}</h1>        
  </div>
  <div class="col-md-3">
    {% if run %}
    <form action="{% url 'script:delete_run' name=script.name run=run.name %}" method="post">
      {% csrf_token %}
      <button class="btn btn-danger pull-right" type="submit" onclick="return confirm('{% trans "Are you sure you want to delete this run?" %}')">
        <span class="fa fa-trash"></span> {% trans "Delete" %}
      </button>
    </form>
    {% endif %}
  </div>
</div>

<div class="row" style="margin-bottom:20px;">
  <div class="col-md-12">
    {% if run.scheduled %}
        {# Usiamo blocktrans per far combaciare l'ID nel file .po #}
        <span class="label label-info">
          {% blocktrans with time=run.scheduled %}Scheduled at <b>{{time}}</b>{% endblocktrans %}
        </span>
        
        {% if run.completed %}
        <span class="label label-success">
          {% blocktrans with time=run.completed %}Completed at <b>{{time}}</b>{% endblocktrans %}
        </span>
        {% else %}
        <span class="label label-danger">{% trans "Not completed yet" %}</span>
        {% endif %}
    {% endif %}
  </div>
</div>

<div class="row">
  {% if not run.scheduled %}
  <div class="col-md-6">
    <div class="well">
        <form action="{{request.get_full_path}}" method="post">{% csrf_token %}
          {{form.as_p}}
          <div style="margin-top:15px;">
              <button class="btn btn-success" type="submit">
                <span class="fa fa-save"></span> {% trans "Confirm clients insertion" %}
              </button>
              {% if run.hosts %}
              <button class="btn btn-dark" type="submit" style="background-color:#333; color:white; margin-left:10px;" formaction="{% url 'script:schedule_run' name=script.name run=run.name %}">
                <span class="fa fa-play"></span> {% trans "Esegui script" %}
              </button>
              {% endif %}
          </div>
        </form>
    </div>
  </div>
  <div class="col-md-6">
    <h2>{% trans "Host list" %}</h2>
    <table class="table table-striped">
      {% for host in run.hosts %}
      <tr>
        <td>{{host.name}}</td>
        <td>
          <form action="{% url 'script:edit_run_remove_host' name=script.name run=run.name %}" method="post" style="display:inline;">
            {% csrf_token %}<input type="hidden" name="host" value="{{host.name}}">
            <button class="btn btn-danger btn-sm" type="submit"><span class="fa fa-times"></span></button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </table>
  </div>
  {% else %}
  <div class="col-md-12">
    <h2>{% trans "Execution Results" %}</h2>
    <table class="table table-striped" id="host_list">
      <thead>
        <tr>
          <th>{% trans "Name" %}</th>
          <th>{% trans "Start time" %}</th> 
          <th>{% trans "End time" %}</th>   
          <th>{% trans "Result" %}</th>
          <th>{% trans "Output" %}</th>
          <th>{% trans "Action" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for host in run.hosts %}
        <tr>
          <td>{{host.name}}</td>
          <td>{{host.started|default:"--"}}</td>
          <td>{{host.ended|default:"--"}}</td>
          <td>
            {% if host.result == 0 %}<span class="text-success">Ok</span>
            {% elif host.result == None %}<span class="text-muted">--</span>
            {% else %}<span class="text-danger">{{host.result}}</span>{% endif %}
          </td>
          <td>
            {% if host.output and host.output != "None" and host.output != "b''" %}
            <pre class="output-box">{{host.output}}</pre>
            {% else %}
            <span class="text-muted small"><i>no output</i></span>
            {% endif %}
          </td>
          <td>
            <form action="{% url 'script:edit_run_remove_host' name=script.name run=run.name %}" method="post" onsubmit="return confirm('{% trans "Exclude this host?" %}')">
              {% csrf_token %}<input type="hidden" name="host" value="{{host.name}}">
              <button class="btn btn-danger btn-xs" type="submit">{% trans "Remove" %}</button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
</div>
{% endblock %}