<div class="main-container">
  <div class="scrollable-area with-footer with-right-panel">
    @if (!isFormReady) {
      <nsi-spinner></nsi-spinner>
    }
    @if (isFormReady) {
      <form
        [formGroup]="form"
        (ngSubmit)="save()">
        <pa-accordion allowMultipleExpanded>
          <pa-accordion-item
            id="general"
            #generalAccordionItem
            [itemTitle]="'resource.preview.general' | translate"
            expanded>
            <pa-accordion-item-body>
              <div class="form-section">
                <pa-input
                  id="uid"
                  readonly
                  [value]="(resource | async)?.uuid">
                  {{ 'generic.uid' | translate }}
                </pa-input>
                <pa-input
                  id="slug"
                  formControlName="slug">
                  {{ 'generic.slug' | translate }}
                </pa-input>
                <pa-input
                  id="title"
                  formControlName="title">
                  {{ 'resource.title' | translate }}
                </pa-input>
                <nsi-expandable-textarea
                  id="summary"
                  formControlName="summary"
                  resizable
                  modalTitle="resource.summary"
                  (resizing)="onResizingTextarea(generalAccordionItem)"
                  [rows]="5">
                  {{ 'resource.summary' | translate }}
                </nsi-expandable-textarea>
                @if (hiddenResourcesEnabled | async) {
                  <pa-toggle
                    formControlName="hidden"
                    labelOnRight>
                    {{ 'resource.hidden' | translate }}
                  </pa-toggle>
                }
                <div>
                  <div>
                    <label class="title-s">
                      {{ 'resource.thumbnail.label' | translate }}
                    </label>
                    <div class="body-s">{{ 'resource.thumbnail.help' | translate }}</div>
                  </div>
                  <div class="thumbnails-container">
                    @if (!newThumbnail) {
                      <div class="drop-container">
                        <div
                          class="drop-image-area"
                          [class.file-over]="hasBaseDropZoneOver"
                          stfFileDrop
                          fileDropAccept="image/*"
                          (fileOver)="fileOverBase($event)"
                          (atFileDrop)="uploadThumbnail($event)"
                          (click)="chooseFiles($event)">
                          <span>{{ 'resource.thumbnail.drop' | translate }}</span>
                        </div>
                      </div>
                    }
                    <input
                      #thumbnailFileInput
                      type="file"
                      accept="image/*"
                      stfFileSelect
                      hidden
                      (atFileSelect)="uploadThumbnail($event)" />
                    @if (newThumbnail) {
                      <stf-thumbnail
                        alt="New thumbnail"
                        [url]="newThumbnail"
                        [selected]="newThumbnail === selectedThumbnail"
                        (select)="selectThumbnail(newThumbnail)"
                        (delete)="markThumbnailForDeletion(newThumbnail)"></stf-thumbnail>
                    }
                    @for (thumb of thumbnailsLoaded | async; track thumb.uri) {
                      <div>
                        <stf-thumbnail
                          [disabled]="isSaving"
                          [url]="thumb.blob"
                          [selected]="thumb.uri === selectedThumbnail"
                          [alt]="'Thumbnail ' + $index"
                          (select)="selectThumbnail(thumb.uri)"
                          (delete)="markThumbnailForDeletion(thumb.uri)"></stf-thumbnail>
                      </div>
                    }
                    @if (isSaving) {
                      <div class="loading-mask">
                        <nsi-spinner></nsi-spinner>
                      </div>
                    }
                  </div>
                </div>
              </div>
            </pa-accordion-item-body>
          </pa-accordion-item>
          <pa-accordion-item
            id="origin"
            [itemTitle]="'resource.preview.origin' | translate"
            #originAccordionItem>
            <pa-accordion-item-body>
              <section
                formGroupName="origin"
                class="form-section">
                <pa-input
                  id="authors"
                  help="resource.origin.collaborators-helper"
                  formControlName="collaborators">
                  {{ 'resource.origin.collaborators' | translate }}
                </pa-input>
                <pa-date-picker
                  id="created"
                  [label]="'resource.origin.created' | translate"
                  formControlName="created"></pa-date-picker>
                <pa-date-picker
                  id="modified"
                  [label]="'resource.origin.modified' | translate"
                  formControlName="modified"></pa-date-picker>
                <pa-input
                  id="filename"
                  formControlName="filename">
                  {{ 'resource.origin.filename' | translate }}
                </pa-input>
                <pa-input
                  id="url"
                  formControlName="url">
                  {{ 'resource.origin.url' | translate }}
                </pa-input>
                <nsi-expandable-textarea
                  id="tags"
                  formControlName="tags"
                  [help]="'resource.origin.multi-values' | translate"
                  modalTitle="resource.origin.tags"
                  [rows]="3">
                  {{ 'resource.origin.tags' | translate }}
                </nsi-expandable-textarea>
                <nsi-expandable-textarea
                  id="related"
                  [help]="'resource.origin.multi-values' | translate"
                  formControlName="related"
                  modalTitle="resource.origin.related"
                  [rows]="3">
                  {{ 'resource.origin.related' | translate }}
                </nsi-expandable-textarea>
                <pa-input
                  id="path"
                  formControlName="path">
                  {{ 'resource.origin.path' | translate }}
                </pa-input>
                <div>
                  <div class="title-s">{{ 'resource.origin.metadata.title' | translate }}</div>
                  <pa-table
                    formArrayName="metadata"
                    columns="45% 45% auto">
                    <pa-table-header>
                      <pa-table-cell header>{{ 'resource.origin.metadata.key' | translate }}</pa-table-cell>
                      <pa-table-cell header>{{ 'resource.origin.metadata.value' | translate }}</pa-table-cell>
                      <pa-table-cell header></pa-table-cell>
                    </pa-table-header>
                    @for (entry of metadataControls; track entry; let entryIndex = $index) {
                      <pa-table-row [formGroup]="entry">
                        <pa-table-cell>
                          <pa-input
                            formControlName="key"
                            [placeholder]="'resource.origin.metadata.key' | translate"></pa-input>
                        </pa-table-cell>
                        <pa-table-cell>
                          <pa-input
                            formControlName="value"
                            [placeholder]="'resource.origin.metadata.value' | translate"></pa-input>
                        </pa-table-cell>
                        <pa-table-cell>
                          <pa-button
                            aspect="basic"
                            size="small"
                            icon="trash"
                            (click)="removeMetadata(entryIndex)"></pa-button>
                        </pa-table-cell>
                      </pa-table-row>
                    }
                  </pa-table>
                  <pa-button
                    size="small"
                    icon="plus"
                    iconAndText
                    (click)="addMetadata()">
                    {{ 'resource.origin.metadata.add' | translate }}
                  </pa-button>
                </div>
              </section>
            </pa-accordion-item-body>
          </pa-accordion-item>
          <pa-accordion-item
            id="extra"
            #extraAccordionItem
            [itemTitle]="'resource.extra-metadata.label' | translate">
            <pa-accordion-item-body>
              <section class="form-section extra-metadata-container">
                <pa-toggle [(value)]="editExtraMetadata">
                  {{ 'resource.extra-metadata.edit-toggle' | translate }}
                </pa-toggle>
                @if (editExtraMetadata) {
                  <nsi-expandable-textarea
                    id="extra"
                    formControlName="extra"
                    resizable
                    modalTitle="resource.extra-metadata.label"
                    (resizing)="onResizingTextarea(extraAccordionItem)"
                    [rows]="5">
                    {{ 'resource.extra-metadata.label' | translate }}
                  </nsi-expandable-textarea>
                } @else {
                  <nsi-json-viewer [json]="extraMetadata"></nsi-json-viewer>
                }
              </section>
            </pa-accordion-item-body>
          </pa-accordion-item>
          <pa-accordion-item
            id="security"
            #securityAccordionItem
            [itemTitle]="'resource.security.label' | translate">
            <pa-accordion-item-body>
              <section
                class="form-section"
                formGroupName="security">
                <nsi-expandable-textarea
                  [rows]="3"
                  [help]="'resource.security.access-groups.help' | translate"
                  formControlName="access_groups"
                  resizable
                  modalTitle="resource.security.access-groups.label"
                  (resizing)="onResizingTextarea(securityAccordionItem)">
                  {{ 'resource.security.access-groups.label' | translate }}
                </nsi-expandable-textarea>
              </section>
            </pa-accordion-item-body>
          </pa-accordion-item>
        </pa-accordion>
      </form>
    }

    <footer class="form-buttons with-right-panel">
      <pa-button
        kind="primary"
        [disabled]="!form.valid || (form.pristine && !this.thumbnailChanged) || isSaving"
        (click)="save()">
        {{ 'generic.save' | translate }}
      </pa-button>

      <pa-button
        aspect="basic"
        [disabled]="(form.pristine && !this.thumbnailChanged) || isSaving"
        (click)="cancel()">
        {{ 'generic.cancel' | translate }}
      </pa-button>
    </footer>
  </div>
  @if (isTrial | async) {
    <div class="right-panel-container">
      <ncom-hint
        label="How to modify a resource with the API"
        learnMore="https://docs.nuclia.dev/docs/api#tag/Resources/operation/modify_resource_rid_prefix_kb__kbid__resource__rid__patch"
        [values]="hintValues | async">
        <pre><code>curl $$RESOURCE$$ \
          -X PATCH \
          -H "authorization: Bearer $$AUTH_TOKEN$$" \
        --data-raw '$$DATA$$'</code>
      </pre>
      </ncom-hint>
    </div>
  }
</div>
