<nb-card
  class="min-width-90vw"
  *ngIf="!loading && !intent"
>
  <nb-card-body class="p-0 pb-2">
    <tock-no-data-found
      title="Intent not found"
      message="There is no intention of the name '{{ this.intentName || this.intentId }}'. Perhaps it has been deleted."
    ></tock-no-data-found>
  </nb-card-body>
</nb-card>

<nb-card
  class="min-width-90vw"
  *ngIf="intent"
>
  <nb-card-header class="d-flex justify-content-between align-items-start gap-1">
    <div>Intent &laquo;{{ this.intent.label || this.intent.name }}&raquo; story details</div>
    <button
      nbButton
      ghost
      shape="round"
      nbTooltip="Cancel"
      (click)="cancel()"
    >
      <nb-icon icon="x-lg"></nb-icon>
    </button>
  </nb-card-header>

  <nb-card-body
    class="p-0 pb-2"
    [nbSpinner]="loading"
  >
    <div *ngIf="story">
      <ul class="list-group list-group-flush">
        <li
          class="list-group-item text-warning"
          *ngIf="!story.storyId"
        >
          There is currently no story associated with this intent
        </li>

        <li
          class="list-group-item"
          *ngIf="story.storyId"
        >
          <div class="row">
            <div class="col">
              <div class="font-weight-bold">Story name :</div>
              {{ story.name }}
            </div>

            <div class="col">
              <div class="font-weight-bold">Type :</div>

              <nb-icon
                *ngIf="story.isBuiltIn()"
                nbTooltip="Built-in Story"
                class="align-middle"
                icon="box"
              ></nb-icon>
              <nb-icon
                *ngIf="story.isSimpleNonFaqAnswer()"
                nbTooltip="Message Story"
                icon="chat-left"
                class="align-middle"
              ></nb-icon>
              <nb-icon
                *ngIf="story.isSimpleFaqAnswer()"
                class="align-middle"
                nbTooltip="Message Faq Story"
                icon="chat-left-text"
              ></nb-icon>
              <nb-icon
                *ngIf="story.isScriptAnswer()"
                nbTooltip="Script Story"
                class="align-middle"
                icon="code"
              ></nb-icon>

              <span *ngIf="story.isBuiltIn()"> BuiltIn</span>
              <span *ngIf="story.isSimpleNonFaqAnswer()"> Simple</span>
              <span *ngIf="story.isSimpleFaqAnswer()"> Simple (Faq)</span>
              <span *ngIf="story.isScriptAnswer()"> Scripted</span>
            </div>

            <div class="col">
              <div class="font-weight-bold">Category :</div>
              {{ story.category }}
            </div>
          </div>
        </li>

        <li class="list-group-item">
          <label
            class="font-weight-bold"
            *ngIf="story.storyId"
          >
            Default sentence :
          </label>

          <div>
            <span *ngIf="story.storyId">
              <span class="text-mitigated-light">&laquo;</span>{{ story.userSentence }}<span class="text-mitigated-light">&raquo;</span>
              <span
                nbTooltip="Locale"
                class="ml-2"
              >
                [{{ story.userSentenceLocale }}]
              </span>

              <button
                nbButton
                ghost
                size="tiny"
                class="ml-2"
                nbTooltip="Test this sentence in a dialog"
                (click)="testDialogSentence(story.userSentence, story.userSentenceLocale)"
              >
                <nb-icon icon="terminal-plus"></nb-icon>
              </button>
            </span>

            <div
              class="mt-1"
              *ngIf="sentences?.length"
            >
              <button
                nbButton
                size="tiny"
                (click)="sentencesReveal = !sentencesReveal"
                class="mt-2"
              >
                <nb-icon
                  *ngIf="!sentencesReveal"
                  class="align-middle"
                  icon="chevron-right"
                ></nb-icon>
                <nb-icon
                  *ngIf="sentencesReveal"
                  class="align-middle"
                  icon="chevron-down"
                ></nb-icon>
                Show all intent sentences
              </button>

              <ul
                *ngIf="sentencesReveal"
                class="list-group list-group-flush mt-2"
              >
                <li
                  *ngFor="let sentence of sentences"
                  class="list-group-item"
                >
                  <small>
                    <span class="text-mitigated-light">&laquo;</span>{{ $any(sentence).text
                    }}<span class="text-mitigated-light">&raquo;</span>
                    <span
                      nbTooltip="Locale"
                      class="ml-2"
                    >
                      [{{ $any(sentence).language }}]
                    </span>
                    <span
                      nbTooltip="Usage count"
                      class="ml-2"
                      >({{ $any(sentence).classification?.usageCount }})</span
                    >

                    <button
                      nbButton
                      ghost
                      size="tiny"
                      class="ml-2"
                      nbTooltip="Test this sentence in a dialog"
                      (click)="testDialogSentence($any(sentence).text, $any(sentence).language)"
                    >
                      <nb-icon icon="terminal-plus"></nb-icon>
                    </button>
                  </small>
                </li>
              </ul>
            </div>
          </div>
        </li>

        <li
          class="list-group-item"
          *ngIf="story.storyId"
        >
          <label class="font-weight-bold"> Default answer(s) : </label>

          <ng-container *ngIf="story.isSimpleAnswer()">
            <div *ngFor="let answer of story.answers">
              <div *ngFor="let subanswer of $any(answer).answers">
                <span class="text-mitigated-light">&laquo;</span>{{ subanswer.label.defaultLocalizedLabel().label
                }}<span class="text-mitigated-light">&raquo;</span>
              </div>
            </div>
          </ng-container>

          <ng-container *ngIf="story.isBuiltIn()">
            <div *ngFor="let answer of story.answers">
              {{ answer.simpleTextView(true) }}
            </div>
          </ng-container>
          <ng-container *ngIf="story.isScriptAnswer()">
            <div *ngFor="let answer of story.answers">
              {{ answer.simpleTextView(true) }}
            </div>
          </ng-container>
        </li>
      </ul>
    </div>
  </nb-card-body>
</nb-card>
