{% extends "admin/change_form.html" %}

{% block object-tools-items %}
  {% if run %}
    {% if run.log_path %}<li><a href="{% url 'admin:command_center_commandrun_log' run.pk %}">Download log</a></li>{% endif %}
    {% if can_cancel %}
      <li>
        <form method="post" action="{% url 'admin:command_center_commandrun_cancel' run.pk %}" style="display:inline"
              onsubmit="return confirm('Stop run #{{ run.pk }}?');">
          {% csrf_token %}<a href="#" onclick="this.closest('form').requestSubmit(); return false;">Cancel</a>
        </form>
      </li>
    {% endif %}
    {% if can_rerun %}
      <li>
        <form method="post" action="{% url 'admin:command_center_commandrun_rerun' run.pk %}" style="display:inline"
              onsubmit="return confirm('Run {{ run.command_line|escapejs }} again?{% if confirm %}\n\n{{ confirm|escapejs }}{% endif %}');">
          {% csrf_token %}<a href="#" onclick="this.closest('form').requestSubmit(); return false;">Run again</a>
        </form>
      </li>
    {% endif %}
  {% endif %}
  {{ block.super }}
{% endblock %}

{% block after_field_sets %}
  {{ block.super }}
  {% if run %}
    <fieldset class="module">
      <h2>Output <span id="cc-live" style="font-weight:normal;font-size:11px">{% if run.is_active %}live{% endif %}</span></h2>
      <pre id="cc-log" style="margin:0;padding:10px;max-height:60vh;overflow:auto;white-space:pre-wrap;word-break:break-word">{{ run.log_tail|default:"(no output yet)" }}</pre>
    </fieldset>
    {% if run.is_active %}
      <script>
        (function () {
          var log = document.getElementById("cc-log"), live = document.getElementById("cc-live");
          log.scrollTop = log.scrollHeight;
          function poll() {
            fetch("{% url 'admin:command_center_commandrun_status' run.pk %}", {credentials: "same-origin"})
              .then(function (response) { return response.json(); })
              .then(function (data) {
                var atBottom = log.scrollHeight - log.scrollTop - log.clientHeight < 40;
                log.textContent = data.log_tail || "(no output yet)";
                if (atBottom) { log.scrollTop = log.scrollHeight; }
                live.textContent = data.status_display + " · " + data.took;
                if (data.active) { setTimeout(poll, 2000); } else { window.location.reload(); }
              })
              .catch(function () { setTimeout(poll, 5000); });
          }
          setTimeout(poll, 2000);
        })();
      </script>
    {% endif %}
  {% endif %}
{% endblock %}