{% extends "layouts/base.html" %}

{% block title %}
  {{ _("Commands") }}
{% endblock %}

{% block stylesheets %}{% endblock %}

{% block content %}
  <main class="main-content position-relative border-radius-lg">
    <div class="container-fluid py-4">
      <div class="col-12">
        <div class="card card-chart">
          <div class="card-body">
            <div class="row">
              <div class="col-sm-12 text-left">
                  <div class="d-flex justify-content-between mb-4">
                      <h1 class="card-title">{{ number_to_text_with_suffix(len_cogs) }} {% if len_cogs != 1 %}{{  _("Cogs") }}{% else %}{{  _("Cog") }}{% endif %} {{ _("with") }} {{ number_to_text_with_suffix(len_commands) }} {% if len_commands != 1 %}{{ _("Commands") }}{% else %}{{ _("Command") }}{% endif %}</h1>
                  </div>
                  <br />
                  <form action="#" onsubmit="submitSearch(event);" class="input-group">
                    <span class="input-group-text text-body"><i class="fas fa-search" aria-hidden="true"></i></span>
                    <input id="command-search" type="search" class="form-control" placeholder="{{ _("Search a command...") }}" value="{% if query %}{{ query }}{% endif %}" />
                  </form>
              </div>
            </div>
            <br />
            {% if cogs %}
              {% if not query %}
                <div class="row">
                    <div id="commands-tabs" class="nav-wrapper position-relative col-md-2">
                      <ul class="nav nav-pills nav-fill flex-column p-1" role="tablist" aria-orientation="vertical">
                        {% for cog in cogs %}
                          <li class="nav-item">
                            <a class="nav-link mb-0 px-0 py-1 {% if loop.index == 1 %}active{% endif %}" id="{{ cog }}-tab" href="#{{ cog }}" role="tab" data-toggle="pill" aria-controls="{% if loop.index == 1 %}preview{% else %}code{% endif %}" aria-selected="{% if loop.index == 1 %}false{% else %}false{% endif %}">{{ cog }}</a>
                          </li>
                        {% endfor %}
                      </ul>
                    </div>
                    <div class="col-md-10">
                        <span id="topOfTabContent"></span>
                        <div class="tab-content" id="myTabContent">
                            {% for cog in cogs %}
                              <div class="tab-pane fade {% if (not tab_name and loop.index == 1) or (tab_name and cog == tab_name) %}show active{% endif %}" id="{{ cog }}" role="tabpanel" aria-labelledby="{{ cog }}-tab">
                                  <div class="row">
                                      <div class="col-md-12">
                                        <div class="card">
                                            <div class="card-body">
                                              <div class="row">
                                                <div class="col-sm-12">
                                                    <h3 class="card-title">{{ cog }}</h3>
                                                    <p>{{ cogs[cog]["description"]|markdown }}</p>
                                                </div>
                                              </div>
                                              <div class="row">
                                                <div class="col-ms-8">
                                                    <p class="mb-0"><b>{{ _("Author(s):") }}</b> {{ cogs[cog]["author"] }}</p>
                                                    <p><b>{{ _("Repo:") }}</b> <a {% if cogs[cog]["repo"] != "Unknown" %}href="{{ cogs[cog]["repo"] }}"{% endif %}>{{ cogs[cog]["repo"] }}</a></p>
                                                </div>
                                                <div class="col-sm-4 text-left">
                                                    <div class="dropdown show">
                                                        <a class="btn bg-gradient-{{ variables["meta"]["color"] }} dropdown-toggle" href="#" role="button" id="prefixdrop_dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            {{ _("Prefix") }}
                                                        </a>
                                                        <ul class="dropdown-menu prefixdiv" aria-labelledby="prefixdrop_dropdown">
                                                            {% for p in prefixes %}
                                                            <li>
                                                              <a class="dropdown-item prefix-option {% if loop.index == 1 %} active {% endif %}">{{ p }}</a>
                                                            </li>
                                                            {% endfor %}
                                                        </ul>
                                                    </div>
                                                </div>
                                              </div>
                                                <table class="table tablesorter">
                                                    <thead class="text-primary">
                                                        <tr>
                                                            <th>{{ _("Command") }}</th>
                                                            <th>{{ _("Description") }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        {% for command in cogs[cog]["commands"] recursive %}
                                                          <tr data-toggle="collapse" href="#collapse_{{ command.name }}" role="button" aria-expanded="false" aria-controls="collapse_{{ command.name }}">
                                                              <td class="text-{{ variables["meta"]["color"] }}" style="padding-left: {{ loop.depth0 * 40 + 24 }}px" title="{{ command.name }} {{ command.signature }}">
                                                                <span class="prefix">{{ prefixes[0] }}</span>{{ command.name }}
                                                              </td>
                                                              <td style="padding-left: 24px" class="text-wrap">{{ command.short_description|markdown }}</td>
                                                          </tr>
                                                          {% if command.signature or command.aliases %}
                                                            <tr>
                                                              <td colspan="2" style="border: none; padding: 0px;">
                                                                <div class="collapse" id="collapse_{{ command.name }}">
                                                                  <div class="d-flex card card-body text-wrap">
                                                                    {% if command.signature %}
                                                                      <strong>{{ _("Usage:") }}</strong>
                                                                      <div class="d-flex"><code>{{ prefixes[0] }}{{ command.name }} {{ command.signature }}</code> <a href="javascript:copyTextToClipboard('{{ prefixes[0] }}{{ command.name }} {{ command.signature }}');" title="{{ _("Copy to clipboard") }}" style="margin-left: 10px;"><i class="far fa-copy me-2"></i></a></div>
                                                                    {% endif %}
                                                                    <br />
                                                                    {% if command.aliases %}
                                                                      <strong>{{ _("Aliases:") }}</strong>
                                                                      <code>{{ command.aliases|join(", ") }}</code>
                                                                    {% endif %}
                                                                  </div>
                                                                </div>
                                                              </td>
                                                            </tr>
                                                          {% endif %}
                                                          {% if command.subs %}
                                                            {{ loop(command.subs) }}
                                                          {% endif %}
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                            {% endfor %}
                          </div>
                      </div>
                  </div>
                </div>
              {% else %}
                <div class="row">
                  <div class="col-md-12">
                      <div class="card">
                          <div class="card-header">
                            <div class="card-body">
                              <div class="col-sm-4 text-left">
                                <div class="dropdown show">
                                    <a class="btn bg-gradient-{{ variables["meta"]["color"] }} dropdown-toggle" href="#" role="button" id="prefixdrop_dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        {{ _("Prefix") }}
                                    </a>
                                    <ul class="dropdown-menu prefixdiv" aria-labelledby="prefixdrop_dropdown">
                                        {% for p in prefixes %}
                                          <li>
                                            <a class="dropdown-item prefix-option {% if loop.index == 1 %} active {% endif %}">{{ p }}</a>
                                          </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                              </div>
                              <table class="table tablesorter">
                                  <thead class="text-primary">
                                      <tr>
                                          <th>{{ _("Command") }}</th>
                                          <th>{{ _("Description") }}</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      {% for cog in cogs %}
                                        {% for command in cogs[cog]["commands"] recursive %}
                                          {% if (not tab_name or cogs[cog]["name"] == tab_name) and query.lower() in command["name"].lower() %}
                                            <tr data-toggle="collapse" href="#collapse_{{ command.name }}" role="button" aria-expanded="false" aria-controls="collapse_{{ command.name }}">
                                              <td class="text-{{ variables["meta"]["color"] }}" style="padding-left: {{ loop.depth0 * 40 + 24 }}px" title="{{ command.name }} {{ command.signature }}">
                                                <span class="prefix">{{ prefixes[0] }}</span>{{ command.name }}
                                              </td>
                                              <td style="padding-left: 24px" class="text-wrap">{{ command.short_description|markdown }}</td>
                                            </tr>
                                            {% if command.signature or command.aliases %}
                                              <tr>
                                                <td colspan="2" style="border: none; padding: 0px;">
                                                  <div class="collapse" id="collapse_{{ command.name }}">
                                                    <div class="d-flex card card-body text-wrap">
                                                      {% if command.signature %}
                                                        <strong>{{ _("Usage:") }}</strong>
                                                        <div class="d-flex"><code>{{ prefixes[0] }}{{ command.name }} {{ command.signature }}</code> <a href="javascript:copyTextToClipboard('{{ prefixes[0] }}{{ command.name }} {{ command.signature }}');" title="{{ _("Copy to clipboard") }}" style="margin-left: 10px;"><i class="far fa-copy me-2"></i></a></div>
                                                      {% endif %}
                                                      <br />
                                                      {% if command.aliases %}
                                                        <strong>{{ _("Aliases:") }}</strong>
                                                        <code>{{ command.aliases|join(", ") }}</code>
                                                      {% endif %}
                                                    </div>
                                                  </div>
                                                </td>
                                              </tr>
                                            {% endif %}
                                            {% if command.subs %}
                                              {{ loop(command.subs) }}
                                            {% endif %}
                                          {% endif %}
                                        {% endfor %}
                                      {% endfor %}
                                  </tbody>
                              </table>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
              {% endif %}
            {% else %}
              <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                          <div class="card-body">
                            <h4>{{ _("This page is currently unavailable until initial connection is made with a Red bot.") }}</h4>
                          </div>
                        </div>
                    </div>
                </div>
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </main>
{% endblock %}

{% block javascripts %}
  <script>
    window.onload = function() {
      resize_event = new Event("resize");
      window.dispatchEvent(resize_event);
    }
  </script>
  <script>
    function changePage(tab_name) {
      var tab_nav_link = document.querySelector("#" + tab_name + "-tab");
      if (tab_nav_link) {
        tab_nav_link.parentElement.parentElement.onmouseover(tab_nav_link);
        tab_nav_link.click();
      }
    }
    {% if tab_name %}
      document.addEventListener("DOMContentLoaded", function() {
        setTimeout(function() {
          changePage("{{ tab_name }}");
        }, 500);
      });
    {% endif %}
  </script>
  <script>
    $('#commands-tabs a[data-toggle="pill"]').on("shown.bs.tab", function(e) {
      var target_id = e.target.id.slice(0, -4);
      var new_url = "/commands/" + target_id;
      if (!(window.location.pathname.startsWith(new_url))) {
        // window.location.pathname = new_url;
        window.history.pushState({}, "", new_url);
      }
    });
  </script>
  <script>
    $(".prefix-option").click(function () {
      let prefix = $(this).text();
      $(".prefix").text(prefix);
      // Change others to inactive, and the correct ones to active.
      $(".prefix-option").removeClass("active");
      let index = $(this).index();
      $(".prefixdiv").each(function (someotherindexidontneed) {
        $(this).children().eq(index).addClass("active");
      })
    })
  </script>
  <script>
    function submitSearch(event) {
      event.preventDefault();
      let input = document.getElementById("command-search");
      let query = input.value.trim();
      if (query) {
        window.location.href = '{{ url_for_query(query="QUERY") }}'.replace("QUERY", encodeURIComponent(query));
      } else {
        window.location.href = "{{ url_for_query(query=None) }}";
      }
    }
  </script>
{% endblock %}
