dspace-angular/src/app/shared/access-control-form-container/access-control-form-container.component.html

<div class="container">
  <div class="card">
    <div class="card-body">
      <ng-content select="[title]"></ng-content>

      <div class="row mt-5">
        <div class="col-12 col-md-6 border-right">
          <div class="d-flex align-items-center">
            <h4 class="mb-0 mr-4">
              {{ 'access-control-item-header-toggle' | translate }}
            </h4>
            <ui-switch
              [(ngModel)]="state.item.toggleStatus"
              (ngModelChange)="handleStatusChange('item', $event)">
            </ui-switch>
          </div>

          <div class="row mt-3">
            <div class="col-12 col-md-3">
              {{ 'access-control-mode' | translate }}
            </div>
            <div class="col-12 col-md-8">
              <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="itemMode" id="itemReplace" value="replace"
                       [disabled]="!state.item.toggleStatus"
                       [(ngModel)]="state.item.accessMode">
                <label class="form-check-label" for="itemReplace">
                  {{'access-control-replace-all' | translate}}
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="itemMode" id="itemAdd" value="add"
                       [disabled]="!state.item.toggleStatus"
                       [(ngModel)]="state.item.accessMode">
                <label class="form-check-label" for="itemAdd">
                  {{'access-control-add-to-existing' | translate}}
                </label>
              </div>
            </div>
          </div>

          <h5 class="mt-3">{{'access-control-access-conditions' | translate}}</h5>

          <ds-access-control-array-form
            #itemAccessCmp
            [dropdownOptions]="(dropdownData$ | async)?.itemAccessConditionOptions || []">
          </ds-access-control-array-form>

        </div>
        <div class="col-12 col-md-6">
          <div class="d-flex align-items-center">
            <h4 class="mb-0 mr-4">
              {{'access-control-bitstream-header-toggle' | translate}}
            </h4>
            <ui-switch
              [(ngModel)]="state.bitstream.toggleStatus"
              (ngModelChange)="handleStatusChange('bitstream', $event)">
            </ui-switch>
          </div>

          <div *ngIf="showLimitToSpecificBitstreams" class="row mt-3">
            <div class="col-12">
              {{'access-control-limit-to-specific' | translate}}
            </div>
            <div class="col-12">
              <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="changesLimit" id="processAll" value="all"
                       [disabled]="!state.bitstream.toggleStatus"
                       [(ngModel)]="state.bitstream.changesLimit">
                <label class="form-check-label" for="processAll">
                  {{'access-control-process-all-bitstreams' | translate}}
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="changesLimit" id="processSelected" value="selected"
                       [disabled]="!state.bitstream.toggleStatus"
                       [(ngModel)]="state.bitstream.changesLimit">
                <label class="form-check-label" for="processSelected">
                  {{ state.bitstream.selectedBitstreams.length }}
                  {{'access-control-bitstreams-selected' | translate}}

                  <button
                    *ngIf="itemRD"
                    [disabled]="!state.bitstream.toggleStatus && state.bitstream.changesLimit !== 'selected'"
                    (click)="openSelectBitstreamsModal(itemRD.payload)"
                    class="btn btn-outline-dark" type="button">
                    <i class="fa fa-search"></i>
                  </button>

                </label>
              </div>
            </div>
          </div>

          <div class="row mt-3">
            <div class="col-12 col-md-3">
              {{'access-control-mode' | translate}}
            </div>
            <div class="col-12 col-md-8">
              <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="bitstreamMode" id="bitstreamReplace" value="replace"
                       [disabled]="!state.bitstream.toggleStatus"
                       [(ngModel)]="state.bitstream.accessMode">
                <label class="form-check-label" for="bitstreamReplace">
                  {{'access-control-replace-all' | translate}}
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio"
                       name="bitstreamMode" id="bitstreamAdd" value="add"
                       [disabled]="!state.bitstream.toggleStatus"
                       [(ngModel)]="state.bitstream.accessMode">
                <label class="form-check-label" for="bitstreamAdd">
                  {{'access-control-add-to-existing' | translate}}
                </label>
              </div>
            </div>
          </div>

          <h5 class="mt-3">{{'access-control-access-conditions' | translate}}</h5>

          <ds-access-control-array-form
            #bitstreamAccessCmp
            [dropdownOptions]="(dropdownData$ | async)?.bitstreamAccessConditionOptions || []">
          </ds-access-control-array-form>

        </div>
      </div>

      <hr *ngIf="showSubmit">

      <div *ngIf="showSubmit" class="d-flex justify-content-end">
        <button class="btn btn-lg btn-outline-primary mr-3" (click)="reset()">
          {{ 'access-control-reset' | translate }}
        </button>
        <button class="btn btn-lg btn-primary" (click)="submit()">
          {{ 'access-control-execute' | translate }}
        </button>
      </div>
    </div>
  </div>
</div>