<div class="modal-header">
  <h3>Add A Friend!</h3>
</div>
<div class="modal-body">
  <p>You can invite a user to share your Plex Library here. The invited user will be asked to confirm friendship.</p>
  <p>Please note that this user will not appear in your Ombi Users since they have not accepted the Plex Invite, as soon as they accept
     the Plex invite then the User Importer job will run (if enabled) and add the user into Ombi.
  </p>


  <div *ngIf="plexServers">
    <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">


        <div class="form-group">
            <label for="username" class="control-label">Username/Email</label>

                <input type="text" class="form-control form-control-custom " id="username" name="username" p formControlName="username"  [ngClass]="{'form-error': form.get('username').hasError('required')}">
                <small *ngIf="form.get('username').hasError('required')" class="error-text">The Username/Email is required</small>
        </div>
        

      <div class="form-group">
        <label for="select" class="control-label">Select a Server</label>
        <div id="profiles">
          <select formControlName="selectedServer" (change)="selected()" class="form-control form-control-custom" id="select" [ngClass]="{'form-error': form.get('selectedServer').hasError('required')}">
            <option *ngFor="let server of plexServers" value="{{server.machineId}}">{{server.serverName}}</option>
          </select>
        </div>
        <small *ngIf="form.get('selectedServer').hasError('required')" class="error-text">You need to select a server!</small>
      </div>

      <div *ngIf="plexLibs" class="form-group">
          <label for="select" class="control-label">Libraries to share</label>

          <div class="form-group">
              <div class="checkbox">
                  <input type="checkbox" id="selectAll" formControlName="allLibsSelected">
                  <label for="selectAll">All</label>
              </div>
          </div>


          <div *ngIf="!form.value.allLibsSelected">
            <div *ngFor="let lib of plexLibs">
              <div class="col-md-4">
                  <div class="checkbox">
                      <input type="checkbox" id="{{lib.id}}" value={{lib.id}} (change)="checkedLib($event.target.checked, $event.target.value)">
                      <label for="{{lib.id}}">{{lib.title}}</label>
                  </div>
              </div>
          </div>
        </div>
      
      </div>  
      <br>  
      <br>  
      <br>
    </form>
  </div>
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-primary-outline" (click)="onSubmit(form)" [disabled]="form.invalid">Add</button>
  <button type="button" class="btn btn-danger-outline" (click)="activeModal.close('Close click')">Close</button>
</div>