{{define "content"}}
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Blacklisted Users</h4>
            </div>
            <div class="card-body">
              <div class="card-body table-responsive">
                <div id="accordion">
                  <div class="card">
                    <div class="card-header collapsed filterCard" id="addBlacklistHeader" data-toggle="collapse" data-target="#addBlacklist" aria-expanded="false" aria-controls="addBlacklist">
                      <span class="align-middle" data-toggle="collapse" data-target="#addBlacklist" aria-expanded="false" aria-controls="addBlacklist">
                        <i class="fas fa-plus"></i> Add New User
                      </span>
                    </div>
                    <div id="addBlacklist" class="collapse" aria-labelledby="addBlacklistHeader" data-parent="#accordion">
                      <div class="card-body">
                        <form>
                          <div class="row">
                            <div class="col-md-3 pr-1">
                              <div class="form-group">
                                <label>Username</label>
                                <input name="username" type="text" class="form-control" placeholder="Username">
                              </div>
                            </div>
                            <div class="col-md-1 px-1">
                              <label>Discriminator</label>
                              <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                  <div class="input-group-text">#</div>
                                </div>
                                <input name="discrim" type="text" class="form-control" placeholder="0000">
                              </div>
                            </div>
                          </div>

                          <input name="csrf" type="hidden" value="{{.csrf}}">
                          <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> Submit</button>
                              </div>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>

                <table class="table table-hover table-striped">
                  <thead>
                  <tr>
                    <th>User ID</th>
                    <th>Username#Discrim</th>
                    <th>Remove</th>
                  </tr>
                  </thead>
                  <tbody>
                  {{range .blacklisted}}
                    <tr>
                      <td>{{.userId}}</td>
                      <td>{{.username}}#{{.discrim}}</td>
                      <td><a href="/manage/{{$.guildId}}/blacklist/remove/{{.userId}}?c={{$.csrf}}">Remove</a></td>
                    </tr>
                  {{end}}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
      <div style="position: absolute; right: 10px; min-width: 300px">
        {{if .userNotFound}}
          <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
            <div class="toast-header">
              <strong class="mr-auto">Warning</strong>
              <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="toast-body">
              The user you specified couldn't be found
            </div>
          </div>
        {{end}}
        {{if .isStaff}}
          <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
            <div class="toast-header">
              <strong class="mr-auto">Warning</strong>
              <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="toast-body">
              You cannot blacklist a staff member
            </div>
          </div>
        {{end}}
      </div>
    </div>

    <script>
      $('.toast').toast('show');
    </script>
  </div>
{{end}}