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

{% load admin_urls static %}

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet"
        href="{% static 'django_admin_shellx/output/terminal.css' %}" />
{% endblock extrastyle %}
{% block extrahead %}
  {{ block.super }}
  {{ ws_port|json_script:"ws_port" }}
  <script src="https://unpkg.com/htmx.org@1.9.10"></script>
  <script type="module"
          src="{% static 'django_admin_shellx/output/terminal.js' %}"></script>
{% endblock extrahead %}
{% block bodyclass %}
  {{ block.super }} dashboard
{% endblock bodyclass %}
{% block nav-breadcrumbs %}
{% endblock nav-breadcrumbs %}
{% block nav-sidebar %}
{% endblock nav-sidebar %}
{% block content %}
  {{ block.super }}
  <div class="flex justify-center">
    <div class="basis-11/12 lg:basis-8/12 min-w-0">
      <div class="mt-5">
        <p class="text-2xl font-bold text-center">Terminal</p>
        <div class="flex justify-between mt-4">
          <p id="djw_status" class="badge badge-info">Connecting...</p>
          <div class="flex gap-4">
            <button id="djw_full_screen_modal_btn"
                    class="btn btn-sm btn-outline"
                    onclick="djw_full_screen_modal.showModal();">
              Full
              Screen
            </button>
            <dialog id="djw_full_screen_modal" class="modal">
              <div class="modal-box max-w-none max-h-none w-full h-full rounded-none">
                <form method="dialog">
                  <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
                </form>
                <div id="djw_full_screen_modal_content"
                     class="flex flex-col mt-5 w-full h-95"></div>
              </div>
            </dialog>
            <button class="btn btn-sm btn-outline" onclick="djw_info_modal.showModal()">Help</button>
            <dialog id="djw_info_modal" class="modal">
              <div class="modal-box">
                <form method="dialog">
                  <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
                </form>
                <p class="font-bold text-lg">Terminal for running commands on the server.</p>
                <div class="divider !w-full"></div>
                <div class="flex flex-col gap-3">
                  <p>- You can run commands on the server using this terminal.</p>
                  <p>- Commands are executed in the context of the user who is currently logged in.</p>
                  <p>- Commands are stored in the database and can be marked as favorite.</p>
                  <p>- You can also view the command history. Command history is recorded using the model LogEntry.</p>
                  <p>- Mouse events are supported.</p>
                  <p>
                    - CTRL+C should be used for copying (when marking items with the mouse) and CTRL+SHIFT+V should be
                    usedfor pasting.
                    <span class="font-bold">This might not work for some browser.</span>
                  </p>
                </div>
              </div>
              <form method="dialog" class="modal-backdrop">
                <button>close</button>
              </form>
            </dialog>
          </div>
        </div>
      </div>
      <div class="divider !w-full"></div>
      <div class="flex flex-col gap-4 mb-5">
        <details class="collapse border collapse-arrow border-base-300">
          <summary class="collapse-title font-bold text-base">Command History</summary>
          <div class="collapse-content overflow-x-auto h-96 mt-8">
            <div role="tablist" class="tabs tabs-lifted">
              <button role="tab"
                      class="tab tab-active djw_command_history_tab"
                      data-table="djw_command_history_container">Command History</button>
              <button role="tab"
                      class="tab djw_command_history_tab"
                      data-table="djw_log_entries_table">
                Log
                Entries
              </button>
            </div>
            <div id="djw_command_history_container" class="djw_command_history_table">
              <form class="form flex justify-between"
                    hx-get="{% url 'admin:django_admin_shellx_terminalcommand_terminal' %}"
                    hx-target="#djw_command_history_table"
                    hx-trigger="change">
                <label class="form-control">
                  <div class="label">
                    <span class="label-text">Command Search</span>
                  </div>
                  <input type="text"
                         name="search"
                         placeholder="TerminalCommand.objects.all()"
                         class="input input-bordered input-sm min-w-64" />
                </label>
                <div class="flex gap-4">
                  <label class="form-control">
                    <div class="label">
                      <span class="label-text">Created By</span>
                    </div>
                    <select name="username" class="select select-bordered select-sm">
                      <option selected>All</option>
                      {% for username in usernames %}<option value="{{ username }}">{{ username }}</option>{% endfor %}
                    </select>
                  </label>
                  <div class="form-control items-center">
                    <label class="label cursor-pointer">
                      <span class="label-text mr-2">Favorite</span>
                    </label>
                    <input name="favorite" type="checkbox" class="toggle toggle-sm" />
                  </div>
                </div>
                <input type="text" hidden onkeypress="return event.keyCode!=13"/>
              </form>
              <table id="djw_command_history_table" class="table table-sm mt-7">
                {% include "django_admin_shellx/terminal_table.html" %}
              </table>
            </div>
            <table id="djw_log_entries_table"
                   class="table table-sm mt-7 hidden djw_command_history_table">
              <tr>
                <th>Action Time</th>
                <th>User Id</th>
                <th>Change/Command</th>
              </tr>
              {% for entry in log_entries %}
                <tr>
                  <td>{{ entry.action_time }}</td>
                  <td>
                    <a href="{% url user_reverse_url entry.user.id %}">{{ entry.user.username }}</a>
                  </td>
                  <td>
                    {% if entry.command %}
                      <a href="{% url 'admin:django_admin_shellx_terminalcommand_change' entry.command.id %}">{{ entry.command }}</a>
                    {% else %}
                      {{ entry.change_message }}
                    {% endif %}
                  </td>
                </tr>
              {% endfor %}
            </table>
          </div>
        </details>
      </div>
      <div id="djw_terminal_container"
           class="flex justify-center"
           style="height: 550px">
        <div id="djw_terminal" class="w-full h-full invisible"></div>
      </div>
    </div>
  </div>
{% endblock content %}