<div class="container">
  <h2>
    {{ "PAGES.OPTIONS.ADDON.TITLE" | translate }}
  </h2>

  <div>
    <div>
      {{ "PAGES.OPTIONS.ADDON.ENABLED_PROVIDERS.FIELD_LABEL" | translate }}
    </div>
    <small class="text-2">{{ "PAGES.OPTIONS.ADDON.ENABLED_PROVIDERS.DESCRIPTION" | translate }}</small>
    <div class="bg-secondary-3">
      <mat-selection-list #shoes (selectionChange)="onProviderStateSelectionChange($event)">
        <mat-list-option
          *ngFor="let state of addonProviderStates$ | async"
          [value]="state.providerName"
          [(selected)]="state.enabled"
        >
          <div>
            {{ state.providerName }}
            <span *ngIf="state.adRequired" class="text-3">
              - {{ "PAGES.OPTIONS.ADDON.AD_REQUIRED_HINT" | translate }}</span
            >
            <span *ngIf="state.providerNote" class="text-3"> - {{ state.providerNote | translate }}</span>
          </div>
        </mat-list-option>
      </mat-selection-list>
    </div>
  </div>

  <form #prefForm [formGroup]="preferenceForm">
    <div class="divider"></div>
    <div class="setting row align-items-center">
      <div class="flex-grow-1">
        <div>
          {{ "PAGES.OPTIONS.ADDON.GITHUB_PERSONAL_ACCESS_TOKEN.TITLE" | translate }}
        </div>
        <small
          class="text-2 changelog"
          [innerHtml]="'PAGES.OPTIONS.ADDON.GITHUB_PERSONAL_ACCESS_TOKEN.MESSAGE' | translate"
        ></small>
      </div>
      <mat-form-field class="example-full-width" appearance="fill">
        <mat-label>{{ "PAGES.OPTIONS.ADDON.GITHUB_PERSONAL_ACCESS_TOKEN.PLACEHOLDER" | translate }}</mat-label>
        <input matInput formControlName="ghPersonalAccessToken" type="password" />
      </mat-form-field>
    </div>
    <div class="setting row align-items-center">
      <div class="flex-grow-1">
        <div>
          {{ "PAGES.OPTIONS.ADDON.WAGO_ACCESS_KEY.TITLE" | translate }}
        </div>
        <small
          class="text-2 changelog"
          [innerHtml]="'PAGES.OPTIONS.ADDON.WAGO_ACCESS_KEY.MESSAGE' | translate"
        ></small>
      </div>
      <mat-form-field class="example-full-width" appearance="fill">
        <mat-label>{{ "PAGES.OPTIONS.ADDON.WAGO_ACCESS_KEY.PLACEHOLDER" | translate }}</mat-label>
        <input matInput formControlName="wagoAccessToken" type="password" />
      </mat-form-field>
    </div>
  </form>
</div>
