<form #settingsForm="ngForm">
  <div class="card mb-4"
       [ngClass]="states.enabled.value && !settingsService.isSupported()?'panel-warning':''">
    <h5 class="card-header">
      {{Name}}
      <div class="switch-wrapper">
        <bSwitch
          class="switch"
          name="enabled"
          switch-on-color="success"
          switch-inverse="true"
          switch-off-text="Disabled"
          switch-on-text="Enabled"
          i18n-switch-off-text
          i18n-switch-on-text
          [switch-disabled]="inProgress || !settingsService.isSupported()"
          switch-handle-width="100"
          switch-label-width="20"
          [(ngModel)]="states.enabled.value">
        </bSwitch>
      </div>
    </h5>
    <div class="card-body">
      <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>

      <ng-container *ngIf="states.enabled.value  || settingsService.isSupported()">

        <app-settings-entry
          name="Password protected"
          description="Enables password protected sharing links."
          i18n-description i18n-name
          [ngModel]="states.passwordProtected"
          required="true">
        </app-settings-entry>


      </ng-container>
      <div class="panel-info" *ngIf="(!states.enabled.value && !settingsService.isSupported())" i18n>
        Sharing is not supported with these settings
      </div>

      <div class="share-settings-save-buttons">
        <button class="btn btn-success float-right"
                [disabled]="!settingsForm.form.valid || !changed || inProgress"
                (click)="save()" i18n>Save
        </button>
        <button class="btn btn-secondary float-right"
                [disabled]=" !changed || inProgress"
                (click)="reset()" i18n>Reset
        </button>
      </div>

      <br>
      <br>
      <hr/>
      <p class="title" i18n>Shared links:</p>

      <ng-container *ngIf="shares && shares.length >0">
        <table class="table table-hover">
          <thead>
          <tr>
            <th i18n>Key</th>
            <th i18n>Folder</th>
            <th i18n>Creator</th>
            <th i18n>Expires</th>
            <th></th>
          </tr>
          </thead>
          <tr *ngFor="let share of shares">
            <td>{{share.sharingKey}}</td>
            <td>{{share.path}}</td>
            <td>{{share.creator.name}}</td>
            <td>{{share.expires | date}}</td>
            <td>
              <button (click)="deleteSharing(share)" class="btn btn-danger float-right">
                <span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
              </button>
            </td>
          </tr>
        </table>
      </ng-container>

      <ng-container *ngIf="!shares || shares.length  == 0">
        <div class="panel-info" i18n>
          No sharing was created.
        </div>
      </ng-container>
    </div>
  </div>

</form>
