<ng-container *transloco="let t; prefix: 'settingsMeta.providers'">
  <div class="metadata-settings">
    <div class="settings-card">
      <div class="section-header">
        <h3 class="section-title">
          <i class="pi pi-cloud"></i>
          {{ t('sectionTitle') }}
        </h3>
        <p class="section-description">
          {{ t('sectionDesc') }}
        </p>
      </div>

      <div class="section-body">
        <div class="configurable-providers-section">
          <h4 class="provider-group-title">{{ t('configurableTitle') }}</h4>

          <div class="configurable-providers-list">
            <div class="setting-item">
              <div class="setting-header">
                <p-toggleswitch [(ngModel)]="amazonEnabled"></p-toggleswitch>
                <label class="setting-label">Amazon</label>
              </div>
              @if (amazonEnabled) {
                <div class="setting-options">
                  <div class="config-field">
                    <label class="config-label">{{ t('region') }}</label>
                    <p-select
                      [options]="amazonDomains"
                      [(ngModel)]="selectedAmazonDomain"
                      [placeholder]="t('selectDomain')"
                      class="config-select">
                    </p-select>
                  </div>
                  <div class="config-field">
                    <div class="config-label-row">
                      <label class="config-label">{{ t('cookieLabel') }}</label>
                      <app-external-doc-link docType="amazonCookie"></app-external-doc-link>
                    </div>
                    <p class="config-description">{{ t('cookieDesc') }}</p>
                    <input
                      type="text"
                      pInputText
                      [placeholder]="t('cookiePlaceholder')"
                      [(ngModel)]="amazonCookie"
                      class="config-input"/>
                  </div>
                </div>
              }
            </div>

            <div class="setting-item">
              <div class="setting-header">
                <p-toggleswitch [(ngModel)]="googleEnabled"></p-toggleswitch>
                <label class="setting-label">Google Books</label>
              </div>
              @if (googleEnabled) {
                <div class="setting-options">
                  <div class="config-field">
                    <label class="config-label">{{ t('languageRestriction') }}</label>
                    <p-select
                      [options]="googleLanguages"
                      [(ngModel)]="selectedGoogleLanguage"
                      [showClear]="!!selectedGoogleLanguage"
                      [placeholder]="t('selectLanguage')"
                      class="config-select">
                    </p-select>
                  </div>
                  <div class="config-field">
                    <label class="config-label">{{ t('apiKeyOptional') }}</label>
                    <p class="config-description">{{ t('googleApiDesc') }}</p>
                    <input
                      type="text"
                      pInputText
                      [placeholder]="t('googleApiPlaceholder')"
                      [(ngModel)]="googleApiKey"
                      class="config-input"/>
                  </div>
                </div>
              }
            </div>

            <div class="setting-item">
              <div class="setting-header">
                <p-toggleswitch
                  [(ngModel)]="hardcoverEnabled"
                  [disabled]="!hardcoverToken">
                </p-toggleswitch>
                <label class="setting-label">Hardcover</label>
              </div>
              <div class="setting-options">
                <div class="config-field">
                  <div class="config-label-row">
                    <label class="config-label">{{ t('apiToken') }}</label>
                    <app-external-doc-link docType="hardcover"></app-external-doc-link>
                  </div>
                  <input
                    type="text"
                    pInputText
                    [placeholder]="t('hardcoverPlaceholder')"
                    [(ngModel)]="hardcoverToken"
                    (ngModelChange)="onTokenChange($event)"
                    class="config-input"/>
                </div>
              </div>
            </div>

            <div class="setting-item">
              <div class="setting-header">
                <p-toggleswitch [(ngModel)]="comicvineEnabled"></p-toggleswitch>
                <label class="setting-label">Comic Vine</label>
              </div>
              @if (comicvineEnabled) {
                <div class="setting-options">
                  <div class="config-field">
                    <label class="config-label">{{ t('apiToken') }}</label>
                    <input
                      type="text"
                      pInputText
                      [placeholder]="t('comicvinePlaceholder')"
                      [(ngModel)]="comicvineToken"
                      (ngModelChange)="onComicTokenChange($event)"
                      class="config-input"/>
                  </div>
                </div>
              }
            </div>

            <div class="setting-item">
              <div class="setting-header">
                <p-toggleswitch [(ngModel)]="audibleEnabled"></p-toggleswitch>
                <label class="setting-label">Audible</label>
              </div>
              @if (audibleEnabled) {
                <div class="setting-options">
                  <div class="config-field">
                    <label class="config-label">{{ t('region') }}</label>
                    <p-select
                      [options]="audibleDomains"
                      [(ngModel)]="selectedAudibleDomain"
                      [placeholder]="t('selectDomain')"
                      class="config-select">
                    </p-select>
                  </div>
                </div>
              }
            </div>
          </div>
        </div>

        <div class="simple-providers-section">
          <h4 class="provider-group-title">{{ t('readyToUseTitle') }}</h4>

          <div class="simple-providers-grid">
            <div class="setting-item simple-provider">
              <div class="setting-header">
                <p-toggleswitch [(ngModel)]="goodreadsEnabled"></p-toggleswitch>
                <label class="setting-label">Goodreads</label>
              </div>
            </div>

            <div class="setting-item simple-provider">
              <div class="setting-header">
                <p-toggleswitch [(ngModel)]="openLibraryEnabled"></p-toggleswitch>
                <label class="setting-label">Open Library</label>
              </div>
            </div>

            <div class="setting-item simple-provider">
              <div class="setting-header">
                <p-toggleswitch [(ngModel)]="doubanEnabled"></p-toggleswitch>
                <label class="setting-label">Douban</label>
              </div>
            </div>

            <div class="setting-item simple-provider">
              <div class="setting-header">
                <p-toggleswitch [(ngModel)]="lubimyCzytacEnabled"></p-toggleswitch>
                <label class="setting-label">Lubimyczytac</label>
              </div>
            </div>

            <div class="setting-item simple-provider">
              <div class="setting-header">
                <p-toggleswitch [(ngModel)]="ranobedbEnabled"></p-toggleswitch>
                <label class="setting-label">Ranobedb</label>
              </div>
            </div>
          </div>
        </div>

        <div class="setting-actions">
          <p-button [label]="t('saveConfigurations')" icon="pi pi-save" severity="success" [outlined]="true" (click)="saveSettings()"></p-button>
        </div>
      </div>
    </div>
  </div>
</ng-container>
