<div
  *ngIf="stories?.length"
  class="table-list table-list-header"
>
  <div class="table-list-entry">Story</div>
  <div class="table-list-entry bordered text-center">Main intent</div>
  <div class="table-list-entry bordered text-center">Infos</div>
  <div class="table-list-entry bordered text-center">Last edited</div>
  <div class="table-list-entry text-center">Actions</div>
</div>

<div
  class="table-list"
  *ngFor="let story of stories"
>
  <div class="table-list-entry">
    <div
      class="font-weight-bold ellipsis"
      [nbTooltip]="story.name"
    >
      <nb-icon
        *ngIf="story.isBuiltIn()"
        class="align-middle mr-2"
        nbTooltip="Built-in Story"
        icon="box"
      ></nb-icon>
      <nb-icon
        *ngIf="story.isSimpleNonFaqAnswer()"
        class="align-middle mr-2"
        nbTooltip="Message Story"
        icon="chat-left"
      ></nb-icon>
      <nb-icon
        *ngIf="story.isSimpleFaqAnswer()"
        class="align-middle mr-2"
        nbTooltip="Message Faq Story"
        icon="chat-left-text"
      ></nb-icon>
      <nb-icon
        *ngIf="story.isScriptAnswer()"
        class="align-middle mr-2"
        nbTooltip="Script Story"
        icon="code"
      ></nb-icon>
      {{ story.name }}
    </div>
    <span class="text-muted">{{ story.description }}</span>
  </div>

  <div
    class="table-list-entry bordered text-center ellipsis"
    [nbTooltip]="story.intent.getIntentLabel(state)"
  >
    {{ story.intent.getIntentLabel(state) }}
  </div>

  <div class="table-list-entry bordered text-center">
    <button
      nbButton
      ghost
      shape="round"
      (click)="displayIntentStoryDetails(story.intent)"
      nbTooltip="Show intent story details"
    >
      <nb-icon icon="book"></nb-icon>
    </button>
  </div>

  <div class="table-list-entry bordered text-center">
    {{ story.lastEdited | date: dateFormat }}
  </div>

  <div class="table-list-entry text-center">
    <div class="d-flex justify-content-center">
      <button
        nbButton
        ghost
        shape="round"
        status="info"
        nbTooltip="View/Edit Story"
        (click)="editStory(story)"
      >
        <nb-icon icon="pencil"></nb-icon>
      </button>
      <button
        nbButton
        ghost
        shape="round"
        nbTooltip="Export Story"
        (click)="downloadStory(story)"
      >
        <nb-icon icon="download"></nb-icon>
      </button>
      <button
        nbButton
        ghost
        shape="round"
        status="danger"
        nbTooltip="Delete Story"
        (click)="deleteStory(story)"
      >
        <nb-icon icon="trash"></nb-icon>
      </button>
    </div>
  </div>
</div>
