@if (submissionCcLicenses) {
  <div class="mb-4 ccLicense-select">
    <div ngbDropdown>
      <input id="cc-license-dropdown"
        class="form-control"
        [(ngModel)]="selectedCcLicense.name"
        placeholder="{{ !storedCcLicenseLink ? ('submission.sections.ccLicense.select' | translate) : ('submission.sections.ccLicense.change' | translate)}}"
        [ngModelOptions]="{standalone: true}"
        ngbDropdownToggle
        role="combobox"
        #script="ngModel">
      <div ngbDropdownMenu aria-labelledby="cc-license-dropdown" class="w-100 scrollable-menu"
        role="menu"
        infiniteScroll
        (scroll)="onScroll($event)"
        [infiniteScrollDistance]="5"
        [infiniteScrollThrottle]="300"
        [infiniteScrollUpDistance]="1.5"
        [fromRoot]="true"
        [scrollWindow]="false">

        @if(submissionCcLicenses?.length === 0) {
          <button class="dropdown-item disabled">
            {{ 'submission.sections.ccLicense.none' | translate }}
          </button>
        } @else {
          @for(license of submissionCcLicenses; track license.id) {
            <button class="dropdown-item" (click)="selectCcLicense(license)">
              {{ license.name }}
            </button>
          }
        }
      </div>
    </div>
  </div>
}

@if (getSelectedCcLicense()) {
  @for (field of getSelectedCcLicense().fields; track field) {
    <div
      class="mb-4">
      <div class="d-flex flex-row">
        <div class="fw-bold {{ field.id }}">
          {{ field.label }}
        </div>
        <button
          class="btn btn-outline-info btn-sm ms-2"
          (click)="openInfoModal(infoModal)">
          <i class="fas fa-question"></i>
        </button>
      </div>
      <ng-template #infoModal>
        <div>
          <div class="modal-header mb-4 ">
            <div>
              <h4>
                {{ field.label }}
              </h4>
              <div [innerHTML]="field.description"></div>
            </div>
            <button type="button" class="btn-close"
              (click)="closeInfoModal()" aria-label="Close">
            </button>
          </div>
          <div class="modal-body">
            @for (value of field.enums; track value) {
              <div
                class="mb-4">
                <h5>
                  {{ value.label }}
                </h5>
                <div [innerHTML]="value.description" class="fw-light"></div>
              </div>
            }
          </div>
        </div>
      </ng-template>
      @if (field.enums?.length > 5) {
        <ds-select [disabled]="field.id === 'jurisdiction' && defaultJurisdiction !== undefined && defaultJurisdiction !== 'none'">
          <ng-container class="selection" *ngVar="getSelectedOption(getSelectedCcLicense(), field) as option">
            @if (option) {
              <span>
                {{ option.label }}
              </span>
            }
            @if (!option) {
              <span>
                {{ 'submission.sections.ccLicense.option.select' | translate }}
              </span>
            }
          </ng-container>
          <ng-container class="menu">
            <div class="options-select-menu overflow-auto">
              @for (option of field.enums; track option) {
                <button
                  class="dropdown-item"
                  (click)="selectOption(getSelectedCcLicense(), field, option)">
                  {{ option.label }}
                </button>
              }
            </div>
          </ng-container>
        </ds-select>
      }
      @if (field.enums?.length <= 5) {
        @for (option of field.enums; track option) {
          <div
            class="d-flex flex-row m-1">
            <div (click)="selectOption(getSelectedCcLicense(), field, option)">
              <input type="radio"
                title="{{ option.label }}"
                class="me-1"
                [checked]="isSelectedOption(getSelectedCcLicense(), field, option)">
              <span>{{ option.label }}</span>
            </div>
          </div>
        }
      }
    </div>
  }
}

@if (ccLicenseLink$) {
  @let licenseLink = (ccLicenseLink$ | async);
  @if (licenseLink) {
    <div
      class="mt-2 p-4 bg-light text-dark">
      <div>
        {{ 'submission.sections.ccLicense.link' | translate }}
      </div>
      <a class="license-link" href="{{ licenseLink }}" target="_blank" rel="noopener noreferrer">
        {{ licenseLink }}
      </a>
      <div class="m-2">
        <div (click)="setAccepted(!accepted)">
          <input type="checkbox"
                 class="me-2"
                 title="accepted"
                 [checked]="accepted">
          <span> {{ 'submission.sections.ccLicense.confirmation' | translate }}</span>
        </div>
      </div>
    </div>
  } @else {
    <ds-loading></ds-loading>
  }
}
