<div class="uk-margin-bottom">
  <h1 class="uk-margin-top">Commands</h1>
  <p>
    Command documentation can be found, at any time, by using the
    <%= command_usage(:help) %> command.

    For example, use <%= command_usage(:help, arguments: {with: "/community servers"}) %>
    to show the documentation for the <%= command_usage(:servers, only: [])%> command.
  </p>
  <% if @commands.empty? %>
    <h3>Failed to retrieve commands. Please try refreshing this page.</h3>
    <small>If this persists, please let us know via our Discord</small>
  <% end %>
  <% @commands.each do |category, commands| %>
    <h2 class="uk-margin-medium"><%= category.humanize %> Commands</h2>
    <dl class="uk-description-list esm-description-commands uk-margin-left">
      <% commands.each_with_index do |command, index| %>
        <dt id="<%= command.command_name %>">
          <div uk-grid>
            <div>
              <div class="command-syntax" style="font-size: large;">
                <% if command.command_type == "admin" %>
                  <i class="fas fa-user-lock esm-text-color-toast-blue" uk-tooltip="This is an admin command and may be restricted to certain roles"></i>
                <% end %>

                <span class="esm-text-color-toast-blue">
                  <%= command.usage_as_html %>
                </span>
              </div>
            </div>
          </div>

        </dt>
        <dd class="uk-margin-bottom">
          <div class="uk-margin-small-top">
            <%= command.description_as_html %>
          </div>
          <div class="uk-margin-small-top">
            <% if command.command_arguments.present? %>
              <strong>Arguments</strong>
              <div class="command-arguments uk-margin-left uk-margin-small-top">
                <%= command.arguments_as_html %>
              </div>
            <% end %>

            <% if command.command_examples.present? %>
              <strong>Examples</strong>
              <div class="command-example uk-margin-left uk-margin-small-top">
                <%= command.example_as_html %>
              </div>
            <% end %>
          </div>
        </dd>
        <hr class="uk-margin-medium-top uk-margin-medium-bottom" style="border-color: #2d3338">
      <% end %>
    </dl>
  <% end %>
</div>