<div class="small-middle-container" *ngIf="!edit || edit && user">
  <div class="row">
    <div class="col-md-3 col-sm-12">
      <label class="control-label"><h3>User Details</h3></label>
    <div>
      <mat-form-field>
        <input matInput id="username" placeholder="Username" [(ngModel)]="user.userName" required>
      </mat-form-field>
    </div>
    <div>
      <mat-form-field>
        <input id="alias" matInput placeholder="Alias" [(ngModel)]="user.alias"
          matTooltip="This is used as a display value instead of the users username, so think of it as a more friendly username">
      </mat-form-field>
    </div>
    <div>
      <mat-form-field>
        <input id="emailAddress" matInput placeholder="Email Address" type="email" [(ngModel)]="user.emailAddress">
      </mat-form-field>
    </div>
    <mat-form-field>
      <mat-label [translate]="'UserPreferences.StreamingCountry'"></mat-label>
      <mat-select [(value)]="user.streamingCountry">
        <mat-option *ngFor="let value of countries" [value]="value">
          {{value}}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <div>
      <mat-form-field>
        <input id="password" matInput placeholder="Password" type="password" [(ngModel)]="user.password" required>
      </mat-form-field>
    </div>
    <div>
      <mat-form-field>
        <input id="confirmPass" matInput placeholder="Confirm Password" type="password" [(ngModel)]="confirmPass" required>
      </mat-form-field>
    </div>


  </div>

  <div class="col-md-3 col-sm-12">
    <label class="control-label"><h3>Request Limits</h3></label>
    <div class="row">
      <div class="col-6">
        <mat-form-field>
          <input id="movieRequestLimit" matInput placeholder="Movie Request Limit" [(ngModel)]="user.movieRequestLimit">
        </mat-form-field>
      </div>
      <div class="col-6">
        <mat-label>Movie Request Limit Type</mat-label>
        <mat-select id="movieRequestLimitType" [(value)]="user.movieRequestLimitType">
          <mat-option *ngFor="let value of requestLimitTypes" [value]="value">
            {{RequestLimitType[value]}}
          </mat-option>
        </mat-select>
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        <mat-form-field>
          <input id="episodeRequestLimit" matInput placeholder="Episode Request Limit" [(ngModel)]="user.episodeRequestLimit">
        </mat-form-field>
      </div>
      <div class="col-6">
        <mat-label>Episode Request Limit Type</mat-label>
        <mat-select  id="episodeRequestLimitType" [(value)]="user.episodeRequestLimitType">
          <mat-option *ngFor="let value of requestLimitTypes" [value]="value">
            {{RequestLimitType[value]}}
          </mat-option>
        </mat-select>
      </div>
    </div>
    <div class="row">
    <div class="col-6">
      <mat-form-field>
        <input id="musicRequestLimit" matInput placeholder="Music Request Limit" [(ngModel)]="user.musicRequestLimit">
      </mat-form-field>
    </div>
    <div class="col-6">
      <mat-label>Music Request Limit Type</mat-label>
      <mat-select  id="musicRequestLimitType" [(value)]="user.musicRequestLimitType">
        <mat-option *ngFor="let value of requestLimitTypes" [value]="value">
          {{RequestLimitType[value]}}
        </mat-option>
      </mat-select>
    </div>
  </div>
    <label class="control-label"><h3>Quality & Root Path Preferences</h3></label>
    <mat-form-field *ngIf="sonarrQualities">
      <mat-label>Sonarr Quality Profile</mat-label>
      <mat-select [(ngModel)]="user.userQualityProfiles.sonarrQualityProfile">
        <mat-option *ngFor="let folder of sonarrQualities" [value]="folder.id">
          {{folder.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field *ngIf="sonarrQualities">
      <mat-label>Sonarr Quality Profile (Anime)</mat-label>
      <mat-select [(ngModel)]="user.userQualityProfiles.sonarrQualityProfileAnime">
        <mat-option *ngFor="let folder of sonarrQualities" [value]="folder.id">
          {{folder.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field *ngIf="sonarrRootFolders">
      <mat-label>Sonarr Root Folder</mat-label>
      <mat-select [(ngModel)]="user.userQualityProfiles.sonarrRootPath">
        <mat-option *ngFor="let folder of sonarrRootFolders" [value]="folder.id">
          {{folder.path}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field *ngIf="sonarrRootFolders">
      <mat-label>Sonarr Root Folder (Anime)</mat-label>
      <mat-select [(ngModel)]="user.userQualityProfiles.sonarrRootPathAnime">
        <mat-option *ngFor="let folder of sonarrRootFolders" [value]="folder.id">
          {{folder.path}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field *ngIf="radarrQualities">
      <mat-label>Radarr Quality Profiles</mat-label>
      <mat-select [(ngModel)]="user.userQualityProfiles.radarrQualityProfile">
        <mat-option *ngFor="let folder of radarrQualities" [value]="folder.id">
          {{folder.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field *ngIf="radarrRootFolders">
      <mat-label>Radarr Root Folder</mat-label>
      <mat-select [(ngModel)]="user.userQualityProfiles.radarrRootPath">
        <mat-option *ngFor="let folder of radarrRootFolders" [value]="folder.id">
          {{folder.path}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field *ngIf="radarr4KQualities">
      <mat-label>Radarr 4K Quality Profiles</mat-label>
      <mat-select [(ngModel)]="user.userQualityProfiles.radarr4KQualityProfile">
        <mat-option *ngFor="let folder of radarr4KQualities" [value]="folder.id">
          {{folder.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field *ngIf="radarr4KRootFolders">
      <mat-label>Radarr 4K Root Folder</mat-label>
      <mat-select [(ngModel)]="user.userQualityProfiles.radarr4KRootPath">
        <mat-option *ngFor="let folder of radarr4KRootFolders" [value]="folder.id">
          {{folder.path}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <div class="col-md-2 col-sm-12">
    <label class="control-label"><h3>Roles</h3></label>
    <div *ngIf="!edit">
      <div *ngFor="let c of availableClaims">
        <mat-slide-toggle id="role{{c.value}}" [(ngModel)]="c.enabled">{{c.value | humanize}}</mat-slide-toggle>
      </div>
    </div>

    <div *ngIf="edit">
      <div *ngFor="let c of user.claims">
        <mat-slide-toggle  id="role{{c.value}}" [(ngModel)]="c.enabled">{{c.value | humanize}}</mat-slide-toggle>
      </div>
    </div>
  </div>


  <div class="col-md-3 col-sm-12">
    <label class="control-label"><h3>Notification Preferences</h3></label>
    <div *ngFor="let pref of notificationPreferences">
      <div>
        <mat-form-field>
          <input id="{{NotificationAgent[pref.agent]}}" matInput placeholder="{{NotificationAgent[pref.agent] | humanize}}" [(ngModel)]="pref.value">
        </mat-form-field>
      </div>
    </div>
  </div>

  </div>


  <div class="row">

<div class="col-md-6 col-sm-12">
    <button *ngIf="!edit" type="button" mat-raised-button color="accent" data-test="createuserbtn"  (click)="create()">Create</button>
    <div *ngIf="edit">
      <button type="button" data-test="updatebtn" mat-raised-button color="accent" (click)="update()">Update</button>
      <button type="button" data-test="deletebtn" mat-raised-button color="warn" (click)="delete()">Delete</button>
      <button type="button" style="float:right;" mat-raised-button color="primary" (click)="resetPassword()" matTooltip="You need your SMTP settings setup">Send
        Reset Password Link</button>
        <button *ngIf="appUrl" type="button" mat-raised-button color="accent" (click)="appLink()" matTooltip="Send this link to the user and they can then open the app and directly login">Copy users App Link</button>

    </div>

</div>
<div class="col-md-1 offset-md-8 col-sm-12">
  <button type="button" mat-raised-button color="warn" (click)="back()">Back</button>
</div>
</div>





</div>
