Nginx Proxy Manager - Access List Modal Mockup

modal.html

<div class="modal fade show" id="modal-dialog" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" style="display: block;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">New Access List</h5>
        <button type="button" class="close cancel" aria-label="Close" data-dismiss="modal">&nbsp;</button>
      </div>
      <div class="modal-body has-tabs">
        <form>
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="nav-item"><a href="#details" aria-controls="tab1" role="tab" data-toggle="tab" class="nav-link active show" aria-selected="true"><i class="fe fe-zap"></i> Details</a></li>
            <li role="presentation" class="nav-item"><a href="#users" aria-controls="tab4" role="tab" data-toggle="tab" class="nav-link" aria-selected="false"><i class="fe fe-users"></i>Users</a></li>
            <li role="presentation" class="nav-item"><a href="#ip-addresses" aria-controls="tab2" role="tab" data-toggle="tab" class="nav-link" aria-selected="false"><i class="fe fe-radio"></i>IP Addresses</a></li>
          </ul>
          <div class="tab-content">
            <!-- Details -->
            <div role="tabpanel" class="tab-pane active show" id="details">
              <div class="row">
                <div class="col-sm-12 col-md-12">
                  <div class="form-group">
                    <label class="form-label">Name<span class="form-required">*</span></label>
                    <input type="text" class="form-control" name="example-text-input">
                  </div>
                </div>
                <div class="col-sm-12 col-md-12">
                  <div class="form-group">
                    <div class="form-label">Access Control</div>
                    <div class="custom-controls-stacked">
                      <label class="custom-control custom-radio">
                        <input type="radio" class="custom-control-input" name="example-radios" value="option1" checked="">
                        <div class="custom-control-label">A user must be both authenticated <strong>and</strong> have a valid IP address</div>
                      </label>
                      <label class="custom-control custom-radio">
                        <input type="radio" class="custom-control-input" name="example-radios" value="option2">
                        <div class="custom-control-label">a user must be either authenticated, <strong>or</strong> have a valid IP address</div>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Users -->
            <div class="tab-pane" id="users">
              <div class="row">
                <div class="col-sm-6 col-md-6">
                  <div class="form-group">
                    <label class="form-label">Username</label>
                  </div>
                </div>
                <div class="col-sm-6 col-md-6">
                  <div class="form-group">
                    <label class="form-label">Password</label>
                  </div>
                </div>
              </div>
              <div class="items">
                <div>
                  <div class="row">
                    <div class="col-sm-6 col-md-6">
                      <div class="form-group">
                        <input type="text" name="username[]" class="form-control" value="">
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                      <div class="form-group">
                        <input type="password" name="password[]" class="form-control" placeholder="" value="">
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-6 col-md-6">
                      <div class="form-group">
                        <input type="text" name="username[]" class="form-control" value="">
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                      <div class="form-group">
                        <input type="password" name="password[]" class="form-control" placeholder="" value="">
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-6 col-md-6">
                      <div class="form-group">
                        <input type="text" name="username[]" class="form-control" value="">
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                      <div class="form-group">
                        <input type="password" name="password[]" class="form-control" placeholder="" value="">
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-6 col-md-6">
                      <div class="form-group">
                        <input type="text" name="username[]" class="form-control" value="">
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                      <div class="form-group">
                        <input type="password" name="password[]" class="form-control" placeholder="" value="">
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-6 col-md-6">
                      <div class="form-group">
                        <input type="text" name="username[]" class="form-control" value="">
                      </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                      <div class="form-group">
                        <input type="password" name="password[]" class="form-control" placeholder="" value="">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- IP Addresses -->
            <div role="tabpanel" class="tab-pane" id="ip-addresses">
              <div class="row">
                <div class="col-sm-12 col-md-12">
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Allow</button>
                        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">
                          <a class="dropdown-item" href="javascript:void(0)">Allow</a>
                          <a class="dropdown-item" href="javascript:void(0)">Deny</a>
                        </div>
                      </div>
                      <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Allow</button>
                        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">
                          <a class="dropdown-item" href="javascript:void(0)">Allow</a>
                          <a class="dropdown-item" href="javascript:void(0)">Deny</a>
                        </div>
                      </div>
                      <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Allow</button>
                        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">
                          <a class="dropdown-item" href="javascript:void(0)">Allow</a>
                          <a class="dropdown-item" href="javascript:void(0)">Deny</a>
                        </div>
                      </div>
                      <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Allow</button>
                        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">
                          <a class="dropdown-item" href="javascript:void(0)">Allow</a>
                          <a class="dropdown-item" href="javascript:void(0)">Deny</a>
                        </div>
                      </div>
                      <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Allow</button>
                        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">
                          <a class="dropdown-item" href="javascript:void(0)">Allow</a>
                          <a class="dropdown-item" href="javascript:void(0)">Deny</a>
                        </div>
                      </div>
                      <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Allow</button>
                        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">
                          <a class="dropdown-item" href="javascript:void(0)">Allow</a>
                          <a class="dropdown-item" href="javascript:void(0)">Deny</a>
                        </div>
                      </div>
                      <input type="text" class="form-control" aria-label="Text input with dropdown button">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group">
                      <span class="input-group-prepend" id="basic-addon1">
                      <span class="input-group-text">deny</span>
                      </span>
                      <input type="text" class="form-control" value="all" aria-label="Username" aria-describedby="basic-addon1" disabled="">
                    </div>
                  </div>
                  <div class="text-muted">Note that the <code>allow</code> and <code>deny</code> directives will be applied in the order they are defined.</div>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary cancel" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-teal save">Save</button>
      </div>
    </div>
  </div>
</div>