<ng-container *transloco="let t; prefix:'theme-manager'">

  <div class="position-relative">
    @if (accountService.hasAdminRole()) {
      <button class="btn btn-outline-primary position-absolute custom-position" (click)="selectTheme(undefined)" [title]="t('add')">
        <i class="fa fa-plus" aria-hidden="true"></i><span class="phone-hidden ms-1">{{t('add')}}</span>
      </button>
    }
  </div>

  <p class="ps-2">{{t('description')}}</p>


  <div class="row g-0 theme-container">
    <div class="col-lg-3 col-md-5 col-sm-7 col-xs-7 scroller">
      <div class="pe-2">
        <ul style="height: 100%" class="list-group list-group-flush">

          <li class="list-group-item d-flex justify-content-between align-items-start" style="height: 2.5rem" aria-hidden="true">
            <div class="fw-bold section-header">{{t('downloaded')}}</div>
          </li>

          @for (theme of downloadedThemes; track theme.name) {
            <ng-container [ngTemplateOutlet]="themeOption" [ngTemplateOutletContext]="{ $implicit: theme, downloaded: true}" />
          }

          <li class="list-group-item d-flex justify-content-between align-items-start" style="height: 2.5rem" aria-hidden="true">
            <div class="fw-bold section-header">{{t('downloadable')}}</div>
          </li>

          @for (theme of downloadableThemes; track theme.name) {
            <ng-container [ngTemplateOutlet]="themeOption" [ngTemplateOutletContext]="{ $implicit: theme, downloaded: false}" />
          }
        </ul>
      </div>
    </div>

    <div class="col-lg-9 col-md-7 col-sm-4 col-xs-4 ps-3">
      <div class="card p-3">

        @if (selectedTheme === undefined) {
          <div class="row pb-4">
            <div class="mx-auto">
              <div class="d-flex justify-content-center">
                <div class="d-flex justify-content-evenly">
                  @if (accountService.hasAdminRole()) {
                    {{t('preview-default-admin')}}
                  } @else {
                    {{t('preview-default')}}
                  }
                </div>
              </div>
            </div>
          </div>


          @if (files && files.length > 0) {
            <app-loading [loading]="isUploadingTheme" />
          } @else if (accountService.hasAdminRole()) {
            <app-file-drag-and-drop-upload
              (dropped)="dropped($event)"
              [uploadText]="t('upload-continued')"
              [acceptableExtensions]="acceptableExtensions"
            />
          }

        } @else {
          <h4>
            {{selectedTheme.name | sentenceCase}}
            <div class="float-end">
              @if (selectedTheme.isSiteTheme) {
                @if (selectedTheme.name !== 'Dark' && canUseThemes()) {
                  <button class="btn btn-danger me-1" (click)="deleteTheme(selectedTheme.site!)">{{t('delete')}}</button>
                }
                @if (accountService.hasAdminRole()) {
                  <button class="btn btn-secondary me-1" [disabled]="selectedTheme.site?.isDefault" (click)="updateDefault(selectedTheme.site!)">{{t('set-default')}}</button>
                }
                <button class="btn btn-primary me-1" [disabled]="currentTheme && selectedTheme.name === currentTheme.name" (click)="applyTheme(selectedTheme.site!)">{{t('apply')}}</button>
              } @else if (canUseThemes()) {
                <button class="btn btn-primary" [disabled]="selectedTheme.downloadable?.alreadyDownloaded" (click)="downloadTheme(selectedTheme.downloadable!)">{{t('download')}}</button>
              }
            </div>
          </h4>
          @if(!selectedTheme.isSiteTheme) {
            <p>{{selectedTheme.downloadable!.description | defaultValue}}</p>

            <app-carousel-reel [items]="selectedTheme.downloadable!.previewUrls" [title]="t('preview-title')">
              <ng-template #carouselItem let-item>
                <app-image [imageUrl]="item" height="108px" width="260px" (click)="previewImage(item)" />
              </ng-template>
            </app-carousel-reel>
          } @else {
            <p>{{selectedTheme.site!.description | defaultValue}}</p>

            <app-carousel-reel [items]="selectedTheme.site!.previewUrls" [title]="t('preview-title')">
              <ng-template #carouselItem let-item>
                <app-image [imageUrl]="item" height="108px" width="260px" (click)="previewImage(item)" />
              </ng-template>
            </app-carousel-reel>
          }
        }
      </div>
    </div>
  </div>


  <ng-template #themeOption let-item let-downloaded="downloaded">
    @if (item !== undefined) {

      <li class="list-group-item d-flex justify-content-between align-items-start {{selectedTheme && selectedTheme.name === item.name ? 'active' : ''}}" (click)="selectTheme(item)">
        <div class="ms-2 me-auto">
          <div class="fw-bold">{{item.name | sentenceCase}}</div>

          @if (item.provider !== ThemeProvider.System && item.compatibleVersion) {
            <span class="pill p-1 me-1 version">v{{item.compatibleVersion}}</span>
          } @else if (item.hasOwnProperty('lastCompatibleVersion')) {
            <span class="pill p-1 me-1 version">v{{item.lastCompatibleVersion}}</span>
          }

          @if (currentTheme && item.name === currentTheme.name) {
            <span class="pill p-1 active">{{t('active-theme')}}</span>
          }

          @if (item.hasOwnProperty('isDefault') && item.isDefault) {
            <span class="pill p-1 ms-1">{{t('default-theme')}}</span>
          }
        </div>
      </li>
    }
  </ng-template>


</ng-container>
