{{define "content"}}
  <div class="content">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">Servers</h4>
      </div>
      <div class="card-body" id="card">
        <div class="card-body table-responsive">
          <div class="flex-container" id="guild-container">
            <div class="guild" onclick="invite();" id="invite-container">
              <i class="fas fa-plus fa-2x guild-icon-fa"></i>
              <span class="guild-name">Invite to your server</span>
            </div>
          </div>

          <div class="flex-container" id="refresh-container">
            <button class="btn btn-primary btn-fill" onclick="refreshGuilds()">
              <i class="fas fa-sync"></i> Refresh list
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
      async function getPermissionLevel(guildId) {
          const res = await axios.get('/user/permissionlevel?guilds=' + guildId);
          if (res.status !== 200 || !res.data.success) {
              showToast('Error', res.data.error);
              return;
          }

          return res.data.levels;
      }

      async function goto(guildId) {
          const permissionLevels = await getPermissionLevel(guildId);
          if (permissionLevels[guildId] === 2) {
              window.location.href = `/manage/${guildId}/settings`;
          } else {
              window.location.href = `/manage/${guildId}/logs`;
          }
      }

      function invite() {
          window.location.href = 'https:\/\/invite.ticketsbot.net';
      }

      async function loadData() {
          const res = await axios.get('/user/guilds');

          const container = document.getElementById('guild-container');

          for (guild of res.data) {
              const guildContainer = document.createElement('div');
              guildContainer.classList.add('guild');

              if (guild.icon === undefined || guild.icon === null || guild.icon === "") {
                  const icon = document.createElement('i');
                  icon.classList.add('fas', 'fa-question', 'guild-icon-fa');
                  guildContainer.appendChild(icon);
              } else {
                  const icon = document.createElement('img');
                  icon.classList.add('guild-icon');

                  if (guild.icon.startsWith('a_')) {
                      icon.src = `https:\/\/cdn.discordapp.com/icons/${guild.id}/${guild.icon}.gif?size=256`;
                  } else {
                      icon.src = `https:\/\/cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp?size=256`;
                  }

                  guildContainer.appendChild(icon);
              }

              const nameContainer = document.createElement('div');

              const name = document.createElement('span');
              name.classList.add('guild-name');
              name.appendChild(document.createTextNode(guild.name));
              nameContainer.appendChild(name);

              guildContainer.appendChild(nameContainer);

              const guildId = guild.id
              guildContainer.onclick = async () => {
                  await goto(guildId)
              };

              container.insertBefore(guildContainer, container.children[container.children.length - 1]);
          }
      }

      async function refreshGuilds() {
          await withLoadingScreen(async () => {
              const res = await axios.post('/user/guilds/reload');
              if (res.status !== 200) {
                  notifyError(res.data.error);
                  return;
              }

              if (!res.data.success && res.data['reauthenticate_required'] === true) {
                  window.location.href = "/login";
                  return;
              }

              const inviteContainer = document.getElementById('invite-container');
              document.getElementById('guild-container').innerHTML = ``;
              document.getElementById('guild-container').appendChild(inviteContainer);

              await loadData();
          });
      }

      withLoadingScreen(async () => {
          await setDefaultHeader(); // on first load, this isnt set yet because its run async in auth.js
          await loadData();
      });
  </script>
{{end}}