{{define "content"}}
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div id="accordion">
            <div class="card">
              <div class="card-header collapsed filterCard" id="filterHeader" data-toggle="collapse" data-target="#filterLogs" aria-expanded="false" aria-controls="filterLogs">
              <span class="align-middle white" data-toggle="collapse" data-target="#filterLogs" aria-expanded="false" aria-controls="filterLogs">
                <i class="fas fa-search"></i> Filter Logs
              </span>
              </div>
              <div id="filterLogs" class="collapse" aria-labelledby="filterHeader" data-parent="#accordion">
                <div class="card-body">
                  <form onsubmit="filterLogs(); return false;">
                    <div class="row">
                      <div class="col-md-4 px-1">
                        <div class="form-group">
                          <label>Username</label>
                          <input name="username" type="text" class="form-control" placeholder="Username" id="username">
                        </div>
                      </div>
                      <div class="col-md-4 px-1">
                        <div class="form-group">
                          <label>User ID</label>
                          <input name="userid" type="text" class="form-control" placeholder="User ID" id="userid">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-2">
                        <div class="form-group">
                          <button type="submit" class="btn btn-primary mx-auto btn-fill"><i class="fas fa-paper-plane"></i> Filter</button>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Logs</h4>
            </div>
            <div class="card-body">
              <div class="card-body table-responsive">
                <table class="table table-hover table-striped">
                  <thead>
                  <tr>
                    <th>Username</th>
                    <th>User ID</th>
                    <th>Archive</th>
                  </tr>
                  </thead>
                  <tbody id="log-container">
                  </tbody>
                </table>

                <div class="row">
                  <div class="col-md-12">
                    <ul class="pagination justify-content-center">
                      <li class="waves-effect"><a href="#" onclick="previous()"><i class="fas fa-chevron-left"></i></a></li>
                      <p class="center-align white" style="padding-left: 10px; padding-right: 10px;">Page <span id="page-number">1</span></p>
                      <li class="waves-effect"><a href="#" onclick="next()"><i class="fas fa-chevron-right"></i></a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div aria-live="polite" aria-atomic="true" style="position: relative">
      <div style="position: absolute; right: 10px" id="toast-container">
      </div>
    </div>

    <script>
      let currentPage = 1;
      let archives = [];

      async function getUsername(userId) {
          const res = await axios.get('/api/{{.guildId}}/user/' + userId);
          return res.data.username;
      }

      async function appendLog(log) {
          const username = await getUsername(log.user_id);

          const container = document.getElementById('log-container');
          const tr = document.createElement('tr');

          appendTd(tr, username);
          appendTd(tr, log.user_id);
          appendButton(tr, 'View', () => { location.href = '/manage/{{.guildId}}/logs/modmail/view/' + log.uuid });

          container.appendChild(tr);
      }

      async function loadData(after, before, username, userId) {
          if (after === undefined) after = '';
          if (before === undefined) before = '';

          let  url = '/api/{{.guildId}}/modmail/logs?after=' + after + '&before=' + before;

          if (username !== undefined) {
              url += `&username=${username}`;
          } else if (userId !== undefined) {
              url += `&userid=${userId}`;
          }

          const res = await axios.get(url);
          if (res.status === 200) {
              if (res.data.length === 0 && username === "" && userId === "") {
                  return false;
              }

              const container = document.getElementById('log-container');
              container.innerHTML = '';

              archives = res.data;

              for (log of res.data) {
                  await appendLog(log);
              }
          } else {
              showToast('Error', res.data.error);
              return false;
          }

          return true;
      }

      withLoadingScreen(loadData);
    </script>

    <script>
      function updatePageNumber() {
          document.getElementById('page-number').innerText = currentPage;
      }

      async function next() {
          if (archives.length === 0) {
              return;
          }

          if (await loadData(undefined, archives[archives.length - 1].uuid)) {
              currentPage += 1;
              updatePageNumber();
          }
      }

      async function previous() {
          if (currentPage <= 1) {
              return
          }

          let after = '';
          if (archives.length > 0) {
              after = archives[0].uuid;
          }

          if (await loadData(after)) {
              currentPage -= 1;
              updatePageNumber();
          }
      }

      // TODO: Paginate filtered logs
      async function filterLogs() {
          const username = document.getElementById('username').value;
          const userId = document.getElementById('userid').value;

          if (username !== "") {
              await loadData(undefined, undefined, username);
          } else if (userId !== "") {
              await loadData(undefined, undefined, undefined, userId);
          } else {
              await loadData(undefined);
          }

          currentPage = 1;
          updatePageNumber();
      }
    </script>
  </div>
{{end}}