<!--
  ~ Copyright (C) 2017/2021 e-voyageurs technologies
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<nb-card>
  <nb-card-body style="padding: 2rem 5.5rem">
    <nb-stepper
      #stepper
      [linear]="true"
    >
      <nb-step
        [stepControl]="languageForm"
        label="Choose your language"
      >
        <form
          #languageForm="ngForm"
          [formGroup]="firstFormGroup"
          class="step-container"
        >
          <div class="input-group group-margin-top">
            <nb-select
              placeholder="Language"
              formControlName="firstCtrl"
              required
              class="list"
            >
              <nb-option
                *ngFor="let l of state.locales; let i = index"
                [value]="l.first"
                >{{ l.second }}</nb-option
              >
            </nb-select>
          </div>
          <div class="submit-btn">
            <button
              nbButton
              nbStepperNext
              [status]="firstFormGroup.invalid ? 'basic' : 'primary'"
            >
              next
            </button>
          </div>
        </form>
      </nb-step>

      <nb-step
        [stepControl]="channelForm"
        label="Select a first Channel"
      >
        <form
          #channelForm="ngForm"
          [formGroup]="secondFormGroup"
        >
          <div class="input-group group-margin-top">
            <nb-select
              required
              placeholder="Channel"
              [formControl]="channel"
              class="list"
            >
              <span
                *ngIf="channel.value"
                class="connector"
              >
                <img
                  src="{{ channel.value.iconUrl() }}"
                  class="connector-icon"
                  [nbTooltip]="channel.value.label()"
                />
                {{ channel.value.label() }}
              </span>
              <nb-option
                *ngFor="let c of connectorTypes"
                [value]="c"
                class="connector"
              >
                <img
                  src="{{ c.iconUrl() }}"
                  class="connector-icon"
                  [nbTooltip]="c.label()"
                />
                {{ c.label() }}
              </nb-option>
            </nb-select>
          </div>
          <div class="submit-btn">
            <button
              nbButton
              nbStepperPrevious
              class="btn-margin"
              status="primary"
            >
              prev
            </button>
            <button
              nbButton
              nbStepperNext
              class="btn-margin"
              [status]="channel.invalid ? 'basic' : 'primary'"
            >
              next
            </button>
          </div>
        </form>
      </nb-step>

      <nb-step
        [stepControl]="somethingForm"
        label="Create your Assistant"
      >
        <form
          #somethingForm="ngForm"
          class="step-container"
        >
          <div class="input-group group-margin-top">
            <p class="create">
              After clicking on the "Create" button, you would have to enter a few first user phrases for your Assistant.
            </p>
          </div>
          <div class="submit-btn">
            <button
              nbButton
              status="basic"
              class="btn-margin"
              (click)="stepper.reset()"
            >
              Reset
            </button>
            <button
              nbButton
              status="primary"
              class="btn-margin"
              (click)="validate()"
              color="primary"
            >
              Create
            </button>
          </div>
        </form>
      </nb-step>
    </nb-stepper>
  </nb-card-body>
</nb-card>
