<h1>Documents</h1>

<nb-card
  *ngIf="fileList"
  class="mt-2"
>
  <nb-card-body>
    <div class="table-list table-list-header">
      <div class="table-list-entry">Story</div>
      <div class="table-list-entry bordered text-center">Category</div>
      <div class="table-list-entry bordered text-center">File name/Url</div>
      <div class="table-list-entry bordered text-center">File title</div>
      <div class="table-list-entry text-center">Actions</div>
    </div>
    <div
      class="table-list"
      *ngFor="let file of fileList"
    >
      <div class="table-list-entry">
        <div class="font-weight-bold">
          <nb-icon
            *ngIf="getStoryWithThisMediaFile(file).isBuiltIn()"
            class="align-middle"
            nbTooltip="Built-in Story"
            icon="box"
          ></nb-icon>
          <nb-icon
            *ngIf="getStoryWithThisMediaFile(file).isSimpleAnswer()"
            class="align-middle"
            nbTooltip="Message Story"
            icon="chat-left"
          ></nb-icon>
          <nb-icon
            *ngIf="getStoryWithThisMediaFile(file).isScriptAnswer()"
            class="align-middle"
            nbTooltip="Script Story"
            icon="code"
          ></nb-icon>
          {{ getStoryWithThisMediaFile(file)?.name }}
        </div>
        <span class="text-muted">{{ getStoryWithThisMediaFile(file)?.description }}</span>
      </div>

      <div class="table-list-entry bordered text-center">
        {{ getStoryWithThisMediaFile(file)?.category }}
      </div>

      <div class="table-list-entry bordered text-center">
        <a
          href="{{ file.url(rest.url) }}"
          target="_blank"
        >
          <div *ngIf="file.isImage()">
            <img
              class="image mt-1"
              src="{{ file.url(rest.url) }}"
            />
          </div>
          <small>{{ file.name }}</small>
        </a>
      </div>

      <div class="table-list-entry bordered text-center">
        {{ getAnswerWithThisMediaFile(file)?.mediaMessage?.title?.defaultLabel }}
      </div>

      <div class="table-list-entry text-center">
        <button
          nbButton
          ghost
          shape="round"
          nbTooltip="Update File"
          (click)="displayMediaMessage(file)"
        >
          <nb-icon icon="pencil"></nb-icon>
        </button>
      </div>
    </div>
  </nb-card-body>
</nb-card>
