<div class="uk-margin-bottom">
  <h2 class="uk-margin-remove-bottom">Aliases</h3>
  <p id="aliases-section">
    For people who play, or administrate, on multiple community/servers these aliases can be used in place of a community and/or server IDs. Aliases are unique to you and can be:
  </p>
  <ul class="uk-list uk-list-hyphen">
    <li>
      Up to 64 characters in length
      <br>
      <i><small>Although, I'm not sure why you would create one that long</small></i>
    </li>
    <li>
      Cannot already exist as an alias of the same type
      <br>
      <small>This means you can create the same alias for a community and a server, but not for two communities or two servers</small>
    </li>
  </ul>
  <p>
    For example, if we wanted to list all servers for the <code>exile</code> community, we would need to use: <%= display_command(:community, :servers, for: "exile") %>
    <br>
    But that is too much typing. We can shorten it even more by creating an alias <code>ex</code> for the <code>exile</code> community ID, we can then use that instead: <%= display_command(:community, :servers, for: "ex") %>
  </p>
  <%= content_tag(
      :div,
      id: "user-aliases",
      data: local_assigns[:alias].slice(:communities, :servers, :aliases, :user_id),
      "v-cloak": true) do %>
    <div class="uk-margin">
      <div class="uk-margin" v-show="hasAliases">
        <table class="uk-table uk-table-divider uk-table-middle">
          <thead>
            <tr>
              <th>Alias</th>
              <th class="uk-table-shrink"></th>
              <th>Target</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="alias of aliases">
              <td><code class="uk-text-large <%= random_text_color_class %>">{{alias.value}}</code></td>
              <td>
                <i class="fa-brands fa-discord" v-if="alias.type === 'community'" uk-tooltip="[community_id] Community Name"></i>
                <i class="fa-solid fa-server" v-else uk-tooltip="[server_id] Server Name"></i>
              </td>
              <td>
                {{alias.target.name}}
              </td>
              <td class="uk-text-right">
                <div v-if="alias.id">
                  <a class="fa-2x fas fa-pencil-alt esm-text-color-red uk-margin-small-right" @click="editAlias(alias)"></a>
                  <a class="fa-2x fas fa-times esm-text-color-red" @click="deleteAlias(alias)"></a>
                </div>
                <div v-else>
                  <%= render "layouts/spinner" %>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="uk-margin">
        <%= button_tag "Add alias", type: "button", class: "uk-button uk-button-primary", "uk-toggle": "target: #alias-modal" %>
      </div>
    </div>
    <%= render "user_aliases/alias_modal" %>
  <% end %>
</div>