<%- include('partials/head'); -%>
  <title> Exyno | Commands </title>

  <body>
    <%- include('partials/header'); -%>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>
      <div class="d-flex justify-content-center command_head" style="margin-top: 10%;">
        <h1> Bot Commands </h1>
      </div>
      <!-- Command Menu -->
      <div class="container px-lg-5" id="commands_menu">
        <div class="row">
          <div class="col-sm-3" id="category">
            <div class="list-group" id="myList" role="tablist">
              <% Object.keys(commands).forEach((category, i)=> { %>
                <a class="list-group-item list-group-item-action <%= i==0 ? 'active' : '' %>" data-bs-toggle="list"
                  href="#<%= category %>" role="tab" aria-controls="<%= category %>">
                  <%= category %>
                </a>
                <% }) %>
            </div>
          </div>
          <div class="col-sm-9">
            <div class="tab-content">
              <% Object.keys(commands).forEach((category, k)=> { %>
                <div class="tab-pane fade show <%= k==0 ? 'active' : '' %>" id="<%= category %>" role="tabpanel"
                  aria-labelledby="list-home-list">
                  <div class="accordion" id="acc_<%= category %>">
                    <% commands[category].forEach((cmd, i)=> { %>
                      <div class="accordion-item">
                        <h2 class="accordion-header" id="h_<%= cmd.name %>">
                          <button class="accordion-button <%= i==0 ? '' : 'collapsed' %>" type="button"
                            data-bs-toggle="collapse" data-bs-target="#c_<%= cmd.name %>"
                            aria-expanded="<%= i==0 ? 'true' : 'false' %>" aria-controls="<%= cmd.name %>">
                            <%= cmd.name %>
                          </button>
                        </h2>
                        <div id="c_<%= cmd.name %>" class="accordion-collapse collapse <%= i==0 ? 'show' : ''%>"
                          aria-labelledby="h_<%= cmd.name %>" data-bs-parent="#acc_<%= category %>">
                          <div class="accordion-body">
                            <code>Description : </code>
                            <%= cmd.description %> <br>
                              <code>Permissions : </code>
                              <% cmd.permissions.forEach(p=> { %>
                                <kbd>
                                  <%= p %>
                                </kbd>
                                <% }) %><br>
                                  <code>Aliases : </code>
                                  <% cmd.aliases.forEach(a=> { %>
                                    <small class="text-muted">[e!<%= a %>]</small>
                                    <% }) %><br>
                                      <code>Usage : </code><small><kbd>
                                          <%= cmd.usage %>
                                        </kbd></small><br>
                          </div>
                        </div>
                      </div>
                      <% }) %>
                  </div>
                </div>
                <% }) %>
            </div>
          </div>
        </div>
        <br><br>
        <center>
          <footer class="mt-auto text-white-50">
            <p>Â©
              <script>document.write(new Date().getFullYear());</script> Exyno | <a href="/terms"
                class="text-white">Terms &
                Conditions</a> | <a href="/privacy" class="text-white">Privacy Policy</a>
            </p>
          </footer>
        </center>
        <br>
      </div>
  </body>

  </html>