Untitled

@if (resourceSharePage) {
  <div>
    <p-tabView [activeIndex]="0" id="maincontent" class="start-tabview">
      <p-tabPanel header="{{ 'Text Resources' | translate }}">
        <div class="notes-container">
          <div class="sidebar">
            <div class="sidebar-header">
              <div class="note-title1">
                <h3>{{ 'notes.notes_title' | translate }}</h3>
              </div>
              <div class="sidebar-icon">
                <p-button
                  icon="pi pi-trash"
                  class="notes-icon1"
                  [text]="true"
                  [disabled]="true">
                  <i class="ri-delete-bin-fill"></i>
                </p-button>

                <p-button
                  [text]="true"
                  icon="pi pi-edit"
                  class="notes-icon2"
                  [disabled]="true">
                  <i class="ri-add-fill"></i>
                </p-button>
              </div>
            </div>

            @for (note of notes; track note; let i = $index) {
              <div
                (click)="selectTitle(i)"
                class="note-title"
                [class.active]="i === selectedNoteIndex">
                <div class="title-3">
                  {{ note.title }}
                </div>
                <div class="title-2">
                  {{ note.created_at | date: 'dd/MM/yyyy HH:mm' }}
                </div>
              </div>
            }
          </div>

          <div class="editor">
            <ckeditor
              class="ckeditor-container"
              data-cy="resource-description"
              [editor]="Editor"
              [disabled]="true"
              [config]="editorConfig"
              [(ngModel)]="editorData">
            </ckeditor>
          </div>
        </div>
      </p-tabPanel>
      <p-tabPanel header="{{ 'Other resources' | translate }}">
        @if (resources.length) {
          <section class="gallery-header">
            @if (layout === 'gallery') {
              <h5 class="title">
                {{ currentTitle }}
              </h5>
            }

            <span>
              @if (
                shuffle &&
                layout === 'list' &&
                !isShuffling &&
                !isInProgressResources()
              ) {
                <p-button (click)="setShuffle(true)">
                  {{ 'resource_upload.shuffle' | translate }}
                </p-button>
              }
            </span>

            @if (shuffle && layout === 'list' && isShuffling) {
              <div class="actions gallery-header">
                <p-button
                  icon="ri-check-line"
                  severity="success"
                  data-cy="save-shuffle-btn"
                  [rounded]="true"
                  (click)="saveShuffle()">
                </p-button>
                <p-button
                  icon="ri-close-line"
                  severity="danger"
                  data-cy="cancel-shuffle-btn"
                  [rounded]="true"
                  (click)="setShuffle(false)">
                </p-button>
              </div>
            }

            @if (!shuffle) {
              <span></span>
            }

            @if (!isQMInfo) {
              <span class="p-buttonset">
                <p-button
                  icon="ri-gallery-line"
                  [text]="layout !== 'gallery'"
                  (click)="setLayout('gallery')"></p-button>
                <p-button
                  icon="ri-list-check-2"
                  [text]="layout !== 'list'"
                  (click)="setLayout('list')"></p-button>
              </span>
            }
          </section>
          @if (resources.length && layout === 'gallery') {
            <eino-resource-preview-carousel
              [items]="filteredResources"
              [edit]="edit"
              [isQMInfo]="isQMInfo"
              [showDownloader]="showDownloader"
              [showShareResourceDownloader]="showShareResourceDownloader"
              (currentTitle)="handleCurrentTitle($event)"
              (delete)="
                removeResource($event)
              "></eino-resource-preview-carousel>
          }
          @if (resources.length && layout === 'list') {
            <eino-resource-preview-carousel-list
              [resources]="filteredResources"
              [isShuffling]="isShuffling"
              [edit]="edit"
              [addExtension]="addExtension"
              [showDownloader]="showDownloader"
              [showShareResourceDownloader]="showShareResourceDownloader"
              (reorder)="handleReorder($event)"
              (delete)="removeResource($event)"
              (rename)="
                renameResource($event)
              "></eino-resource-preview-carousel-list>
          }
        }
      </p-tabPanel>
    </p-tabView>
  </div>
} @else {
  @if (resourceType === 'text' && resourceDrawerMode() === 'view') {
    <div class="notes-container">
      <div class="sidebar">
        <div class="sidebar-header">
          <div class="note-title1">
            <h3>{{ 'notes.notes_title' | translate }}</h3>
          </div>
          <div class="sidebar-icon">
            <p-button
              icon="pi pi-trash"
              class="notes-icon1"
              [text]="true"
              [disabled]="true">
              <i class="ri-delete-bin-fill"></i>
            </p-button>

            <p-button
              [text]="true"
              icon="pi pi-edit"
              class="notes-icon2"
              [disabled]="true">
              <i class="ri-add-fill"></i>
            </p-button>
          </div>
        </div>

        @for (note of notes; track note; let i = $index) {
          <div
            (click)="selectTitle(i)"
            class="note-title"
            [class.active]="i === selectedNoteIndex">
            <div class="title-3">
              {{ note.title }}
            </div>
            <div class="title-2">
              {{ note.created_at | date: 'dd/MM/yyyy HH:mm' }}
            </div>
          </div>
        }
      </div>

      <div class="editor">
        <ckeditor
          class="ckeditor-container"
          data-cy="resource-description"
          [editor]="Editor"
          [disabled]="true"
          [config]="editorConfig"
          [(ngModel)]="editorData">
        </ckeditor>
      </div>
    </div>
  } @else if (resourceType !== 'text') {
    @if (resources.length) {
      <section class="gallery-header">
        @if (layout === 'gallery') {
          <h5 class="title">
            {{ currentTitle }}
          </h5>
        }

        <span>
          @if (
            shuffle &&
            layout === 'list' &&
            !isShuffling &&
            !isInProgressResources()
          ) {
            <p-button (click)="setShuffle(true)">
              {{ 'resource_upload.shuffle' | translate }}
            </p-button>
          }
        </span>

        @if (shuffle && layout === 'list' && isShuffling) {
          <div class="actions gallery-header">
            <p-button
              icon="ri-check-line"
              severity="success"
              data-cy="save-shuffle-btn"
              [rounded]="true"
              (click)="saveShuffle()">
            </p-button>
            <p-button
              icon="ri-close-line"
              severity="danger"
              data-cy="cancel-shuffle-btn"
              [rounded]="true"
              (click)="setShuffle(false)">
            </p-button>
          </div>
        }

        @if (!shuffle) {
          <span></span>
        }

        @if (!isQMInfo) {
          <span class="p-buttonset">
            <p-button
              icon="ri-gallery-line"
              [text]="layout !== 'gallery'"
              (click)="setLayout('gallery')"></p-button>
            <p-button
              icon="ri-list-check-2"
              [text]="layout !== 'list'"
              (click)="setLayout('list')"></p-button>
          </span>
        }
      </section>
    }

    @if (resources.length && layout === 'gallery') {
      <eino-resource-preview-carousel
        [items]="filteredResources"
        [edit]="edit"
        [isQMInfo]="isQMInfo"
        [showDownloader]="showDownloader"
        [showShareResourceDownloader]="showShareResourceDownloader"
        (currentTitle)="handleCurrentTitle($event)"
        (delete)="removeResource($event)"></eino-resource-preview-carousel>
    }

    @if (resources.length && layout === 'list') {
      <eino-resource-preview-carousel-list
        [resources]="filteredResources"
        [isShuffling]="isShuffling"
        [edit]="edit"
        [addExtension]="addExtension"
        [showDownloader]="showDownloader"
        [showShareResourceDownloader]="showShareResourceDownloader"
        (reorder)="handleReorder($event)"
        (delete)="removeResource($event)"
        (rename)="renameResource($event)"></eino-resource-preview-carousel-list>
    }
  }
}