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

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">Home</a>
  &rsaquo; <a href="{% url 'admin:command_center_commandrun_changelist' %}">Command runs</a>
  &rsaquo; Run a command
</div>
{% endblock %}

{% block content %}
<div id="content-main">
  {% if inline %}
    <p class="errornote">The task backend runs tasks immediately, so the command will run inside this request.
      Configure a background backend in <code>TASKS</code> for long commands.</p>
  {% endif %}
  <form method="post">
    {% csrf_token %}
    <fieldset class="module aligned">
      <div class="form-row">
        <label for="cc-command" class="required">Command:</label>
        <select name="command" id="cc-command" required>
          <option value="">---------</option>
          {% for tag, commands in groups %}
            <optgroup label="{{ tag }}">
              {% for command in commands %}
                <option value="{{ command.name }}" {% if command.name == selected %}selected{% endif %}>{{ command.name }}</option>
              {% endfor %}
            </optgroup>
          {% endfor %}
        </select>
      </div>
      <div class="form-row">
        <label for="cc-arguments">Arguments:</label>
        <input type="text" name="arguments" id="cc-arguments" value="{{ arguments }}" class="vLargeTextField" style="width:40em">
        <div class="help">As on a command line, e.g. <code>--verbosity 2 app_label</code>. The command cannot read input; pass <code>--no-input</code> where it asks.</div>
      </div>
      <div class="form-row">
        <label for="cc-note">Note:</label>
        <input type="text" name="note" id="cc-note" maxlength="500" style="width:40em">
      </div>
      <div class="form-row" id="cc-confirm-row" hidden>
        <p id="cc-confirm" style="color:#cf222e;font-weight:600;margin:0 0 6px"></p>
        <label><input type="checkbox" name="confirm"> I understand</label>
      </div>
    </fieldset>
    <div class="submit-row"><input type="submit" value="Run" class="default"></div>
    <fieldset class="module">
      <h2>About this command</h2>
      <p id="cc-description" style="padding:0 10px"></p>
      <pre id="cc-help" style="margin:0;padding:10px;white-space:pre-wrap;max-height:40vh;overflow:auto"></pre>
    </fieldset>
  </form>
</div>
{{ commands|json_script:"cc-commands" }}
<script>
  (function () {
    var commands = JSON.parse(document.getElementById("cc-commands").textContent);
    var select = document.getElementById("cc-command");
    function show() {
      var command = commands[select.value] || {};
      document.getElementById("cc-description").textContent =
        (command.description || "") + (command.timeout ? " Time limit: " + command.timeout + "s." : "");
      document.getElementById("cc-help").textContent = command.help || "";
      document.getElementById("cc-confirm").textContent = command.confirm ? "⚠ " + command.confirm : "";
      document.getElementById("cc-confirm-row").hidden = !command.confirm;
    }
    select.addEventListener("change", show);
    show();
  })();
</script>
{% endblock %}