{{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" 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 action="/manage/{{.guildId}}/logs/page/1">
                    <div class="row">
                      <div class="col-md-4 pr-1">
                        <div class="form-group">
                          <label>Ticket ID</label>
                          <input name="ticketid" type="text" class="form-control" placeholder="Ticket ID">
                        </div>
                      </div>
                      <div class="col-md-4 px-1">
                        <div class="form-group">
                          <label>Username</label>
                          <input name="username" type="text" class="form-control" placeholder="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">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-2">
                        <div class="form-group">
                          <button type="submit" class="btn btn-primary mx-auto"><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>Ticket ID</th>
                    <th>Username</th>
                    <th>User ID</th>
                    <th>Log URL</th>
                  </tr>
                  </thead>
                  <tbody>
                    {{range .logs}}
                      <tr>
                        <td>{{.ticketid}}</td>
                        <td>{{.username}}</td>
                        <td>{{.userid}}</td>
                        <td><a href="/manage/{{$.guildId}}/logs/view/{{.uuid}}">{{.uuid}}</a></td>
                      </tr>
                    {{end}}
                  </tbody>
                </table>

                <div class="row">
                  <div class="col-md-12">
                    <ul class="pagination justify-content-center">
                      {{if .isPageOne}}
                        <li class="disabled"><a href="#"><i class="fas fa-chevron-left"></i></a></li>
                      {{else}}
                        <li class="waves-effect"><a href="/manage/{{.guildId}}/logs/page/{{.previousPage}}"><i class="fas fa-chevron-left"></i></a></li>
                      {{end}}

                      <p class="center-align" style="padding-left: 10px; padding-right: 10px;">Page {{.page}}</p>
                      <li class="waves-effect"><a href="/manage/{{.guildId}}/logs/page/{{.nextPage}}"><i class="fas fa-chevron-right"></i></a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{{end}}