{% extends 'base.html' %}

{% block title %}{% if page %} - {{ page }}{% endif %}{% endblock %}

{% block nav %}
  {% if drones %}
  <select id="view-node" title="Node to View">
    <option value="" disabled selected hidden>Node</option>
    <option value="" {% if is_queen %}selected{% endif %}>&#9819; Queen</option>
    {% for drone_id, drone in drones.items() %}
        <option value="{{ drone_id }}" {% if drone_id == app_id %}selected{% endif %}>
            {{ drone["name"] }}
        </option>
    {% endfor %}
  </select>
  {% endif %}

  <select id="view-section" title="Section to View">
    <option value="" disabled selected hidden>Section</option>
    <option value="">Show All</option>
    <option value="hive">Hive</option>
    {% for section in sections %}
      <option value="{{ section }}">{{ section.title() }}</option>
    {% endfor %}
  </select>

  <span id="view-info" class="material-icons-outlined" title="View Wurker Control Info">
    info
  </span>

  <div class="dropdown">
    <button id="edit-add-menu">
      <span class="material-icons-outlined" title="Commands, Crons, and Bees! Oh my!">
        hive
      </span>
    </button>
    <div class="dropdown-options">
      <span>Manage Bees</span>
      <div id="add-bee" class="dropdown-option">Add a Bee</div>
      <span>Manage Crons</span>
      <div id="add-cron" class="dropdown-option">Add a Cron</div>
      <div id="edit-cron" class="dropdown-option">Edit a Cron</div>
      <div id="remove-cron" class="dropdown-option">Remove a Cron</div>
      <span>Manage Commands</span>
      <div id="add-command" class="dropdown-option">Add a Command</div>
      <div id="edit-command" class="dropdown-option">Edit a Command</div>
      <div id="remove-command" class="dropdown-option">Remove a Command</div>
    </div>
  </div>

  <div class="dropdown">
    <button id="session">
      <span class="material-icons-outlined" title="User Session">
        manage_accounts
      </span>
    </button>
    <div class="dropdown-options">
      {% if g.user %}
        <span>{{ g.user['username'] }}</span>
        <a href="{{ url_for('auth.logout') }}">Log Out</a>
      {% else %}
        <a href="{{ url_for('auth.login') }}">Log In</a>
      {% endif %}
    </div>
  </div>
{% endblock %}

{% block content %}
  <article>
    <section class="hive">
      <div class="panel-header">
        <span>Bee Hive</span>
        <nav>
          <span id="control-reload" class="material-icons-outlined" title="Reload Wurker">
            refresh
          </span>
          <span id="control-pause" class="material-icons-outlined" title="Pause Wurker">
            pause_circle
          </span>
          <span id="control-kill" class="material-icons-outlined" title="Kill Hive">
            dangerous
          </span>
        </nav>
      </div>
      <div class="panel">
        {% if not hiveData["hive"] %}
          <p>No Bees Abuzz!</p>
        {% else %}
        {% for cron, proc in hiveData["hive"].items() %}
          <div>
            <h4>
              {{ cron }}
              <span class="hive-action hive-cron-action-kill material-icons-outlined"
                    title="Kill '{{ cron }}' Bees" data-action="kill" data-option="cron" data-key="{{ cron }}">
                    dangerous
              </span>
            </h4>
            <table>
              <thead>
                <tr>
                  <th>PID</th>
                  <th>Bee</th>
                  <th>Start Time</th>
                  <th>Duration</th>
                  <th>Run Count</th>
                  <th class="hive-bee-action">Action</th>
                </tr>
              </thead>
              <tbody>
                {% for bee, item in proc.items() %}
                  <tr data-slug="{{ bee }}">
                    <td class="hive-pid">{{ item['pid'] }}</td>
                    <td class="hive-bee">{{ bee }}</td>
                    <td>{{ item['timestamp'] }}</td>
                    <td>{{ item['duration'] }}</td>
                    <td>{{ item['runcount'] }}</td>
                    <td class="hive-bee-action">
                      <ul>
                        <li>
                          <span class="hive-action hive-bee-action-kill material-icons-outlined"
                                title="Kill '{{ bee }}' Bee" data-action="kill" data-option="bee"
                                data-key="{{ bee }}">
                                dangerous
                          </span>
                        </li>
                      </ul>
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% endfor %}
          {% endif %}

        {% if hiveData["ondemand"] %}
          <div>
            <h4>ondemand</h4>
            <table>
              <thead>
                <tr>
                  <th class="bee-id">ID</th>
                  <th class="cron-slug">Cron</th>
                  <th class="command-slug">Command</th>
                  <th class="bee-name">Name</th>
                  <th class="bee-description">Description</th>
                  <th class="bee-args">Args</th>
                  <th class="hive-bee-action">Action</th>
                </tr>
              </thead>
              <tbody>
                {% for cron, bees in hiveData["ondemand"].items() %}
                  {% for slug, bee in bees.items() %}
                    <tr data-slug="{{ slug }}">
                      <td class="bee-id" data-column="id" title="{{ bee['slug'] }}">
                        <b>{{ bee['id'] }}</b>
                      </td>
                      <td class="cron-slug" data-column="cron" title="{{ bee.get("cron", "None") or "None" }}">
                        {{ cron }}
                      </td>
                      <td class="command-slug" data-column="command">
                        {{ bee["command_slug"] }}
                      </td>
                      <td class="bee-name" data-column="name"
                          title="{{ bee['slug'] }}">
                        {{ bee['name'] }}
                      </td>
                      <td class="bee-description" data-column="description"
                          title="{{ bee['description'] }}">
                        {{ bee['description'] }}
                      </td>
                      <td class="bee-args" data-column="args"
                          title="{{ bee['args'] }}">
                        {{ bee["args"] }}
                      </td>

                      <td class="hive-bee-action" data-column="action">
                        <ul>
                          <li>
                            <span class="bee-action bee-action-delete material-icons-outlined"
                                  title="Remove '{{ slug }}' Bee from Ondemand queue" data-action="remove"
                                  data-option="ondemand" data-key="{{ slug }}">
                                  remove_circle_outline
                            </span>
                          </li>
                        </ul>
                      </td>

                    </tr>
                  {% endfor %}
                {% endfor %}

              </tbody>
            </table>
          </div>
        {% endif %}

      </div>
    </section>

    {% for section, crons in  sections.items() %}
      <section class="bees {{ section }}">
        <div>
          <h4>{{ section }}</h4>
          <table>
            <thead>
              <tr>
                <th class="bee-id">ID</th>
                <th class="cron-slug">Cron</th>
                <th class="command-slug">Command</th>
                <th class="bee-name">Name</th>
                <th class="bee-description">Description</th>
                <th class="bee-args">Args</th>
                <th class="bee-enabled toggle">Enabled</th>
                <th class="cron-bee-action">Action</th>
              </tr>
            </thead>
            <tbody>
              {% for cron, bees in crons.items() %}
                {% for slug, bee in bees.items() %}
                  <tr data-slug="{{ slug }}" data-cron="{{ cron }}" data-command_id="{{ bee['command_id'] }}"
                      data-ismodule={% if bee['module'] %}"true"{% else %}"false"{% endif %}>

                    <td class="bee-id" data-column="id" title="{{ bee['slug'] }}">
                      <b>{{ bee['id'] }}</b>
                    </td>
                    <td class="selector cron-slug" data-column="cron" title="{{ bee.get("cron", "None") or "None" }}">
                      <select class="cron-selector" title="Select a Cron for this Bee">
                        {% for item in cronData %}
                          <option value="{{ item['slug'] }}" {% if cron == item['slug'] %}selected{% endif %}>
                            {{ item['name'] }}
                          </option>
                        {% endfor %}
                        <option disabled>----</option>
                        <option value="orphaned" {% if cron == "orphaned" %}selected{% endif %}>Orphaned</option>
                      </select>
                    </td>
                    <td class="selector command-slug" data-column="command">
                      <select class="command-selector" title="Select a Command or Module for this Bee">
                        {% for cmd in commandData %}
                          <option value="{{ cmd['id'] }}" {% if cmd['id'] == bee['command_id'] %}selected{% endif %}>
                            {{ cmd['name'] }}
                          </option>
                        {% endfor %}
                      </select>
                    </td>
                    <td class="editable editable-input bee-name" data-column="name"
                        title="{{ bee['slug'] }}">
                      <div>{{ bee['name'] }}</div>
                      <input class="enterable" value="" style="display:none;">
                    </td>
                    <td class="editable editable-input bee-description" data-column="description"
                        title="{{ bee['description'] }}">
                      <div>{{ bee['description'] }}</div>
                      <input class="enterable" value="" style="display:none;">
                    </td>
                    <td class="editable bee-args" data-column="args"
                        title="{{ bee['args'] }}">
                      {{ bee["args"] }}
                    </td>
                    <td class="editable toggle bee-enabled {{ 'enabled' if bee['enabled'] else '' }}"
                        data-column="enabled">
                        <span class="material-icons-outlined"
                              title="{{ 'Disable' if bee['enabled'] else 'Enable' }} '{{ slug }}' Bee">
                              {{ "toggle_on" if bee["enabled"] else "toggle_off" }}
                        </span>
                    </td>
                    <td class="cron-bee-action" data-column="action">
                      {% if section != "ondemand" %}
                        <ul>
                          {% if section == "orphaned" %}
                            <li>
                              <span class="bee-action bee-action-delete material-icons-outlined"
                                    title="Delete '{{ slug }}' Bee" data-action="remove" data-option="bee"
                                    data-key="{{ slug }}">
                                    remove_circle_outline
                              </span>
                            </li>
                          {% endif %}
                          {% if bee["enabled"] %}
                            <li>
                              <span class="bee-action bee-action-ondemand material-icons-outlined"
                                    title="Run '{{ slug }}' Bee On-Demand" data-action="add"
                                    data-option="ondemand" data-key="{{ slug }}">
                                    queue
                              </span>
                            </li>
                          {% endif %}
                          <li>
                            <a href="/report/{{ slug }}"  title="View Bee Report for: '{{ slug }}'">
                              <span class="material-icons-outlined">summarize</span>
                            </a>
                          </li>
                        </ul>
                      {% endif %}
                    </td>
                  </tr>
                {% endfor %}
              {% endfor %}
            </tbody>
          </table>
        </div>
      </section>
    {% endfor %}
  </article>
  {% include 'modals/info.html' %}
  {% include 'modals/jsoneditor.html' %}
  {% include 'modals/add-bee.html' %}
  {% include 'modals/manage-crons.html' %}
  {% include 'modals/manage-commands.html' %}
{% endblock %}

{% block scripts %}

  <script>
    {% if infoJson %}
      const infoJson = JSON.parse({{ infoJson | tojson() }});
    {% endif %}
    {% if cronJson %}
      const cronJson = JSON.parse({{ cronJson | tojson() }});
    {% endif %}
    {% if commandJson %}
      const commandJson = JSON.parse({{ commandJson | tojson() }});
    {% endif %}
  </script>

  <!-- script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script -->
  <script src="{{ url_for('static', filename='node_modules/rainbow-code/dist/rainbow.min.js') }}"></script>
  <script src="{{ url_for('static', filename='node_modules/jsoneditor/dist/jsoneditor.min.js') }}"></script>
  <script type="module" src="{{ url_for('static', filename='common.js') }}"></script>

{% endblock %}