<h1>Synchronize BOTS contents (configuration)</h1>

<nb-card>
  <nb-card-body>
    <table>
      <thead>
        <tr>
          <td colspan="2">FROM</td>
          <td colspan="2">TO</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <nb-form-field>
              <nb-icon
                nbPrefix
                icon="folder"
              ></nb-icon>

              <nb-select
                class="sync-select"
                placeholder="Source Namespace"
                [(selected)]="this.sourceNamespace"
                (selectedChange)="selectSourceNamespace(this.sourceNamespace)"
              >
                <nb-option
                  *ngFor="let namespace of state.namespaces"
                  [value]="namespace"
                  >{{ namespace.namespace }}</nb-option
                >
              </nb-select>
            </nb-form-field>
          </td>
          <td rowspan="3">
            <nb-icon
              class="arrow-right m-2"
              icon="arrow-right"
            ></nb-icon>
          </td>
          <td>
            <nb-form-field>
              <nb-icon
                nbPrefix
                icon="folder"
              ></nb-icon>
              <nb-select
                class="sync-select"
                placeholder="Target Namespace"
                [(selected)]="this.targetNamespace"
                (selectedChange)="selectTargetNamespace(this.targetNamespace)"
              >
                <nb-option
                  *ngFor="let namespace of state.namespaces"
                  [value]="namespace"
                  >{{ namespace.namespace }}</nb-option
                >
              </nb-select>
            </nb-form-field>
          </td>
        </tr>
        <tr>
          <td>
            <nb-form-field>
              <nb-icon
                nbPrefix
                icon="window"
              ></nb-icon>
              <nb-select
                class="sync-select"
                placeholder="Source Application"
                [(selected)]="this.sourceApplication"
              >
                <nb-option
                  *ngFor="let app of sourceApplications"
                  [value]="app"
                  >{{ app.name }}</nb-option
                >
              </nb-select>
            </nb-form-field>
          </td>
          <td>
            <nb-form-field>
              <nb-icon
                nbPrefix
                icon="window"
              ></nb-icon>
              <nb-select
                class="sync-select"
                placeholder="Target Application"
                [(selected)]="this.targetApplication"
              >
                <nb-option
                  *ngFor="let app of targetApplications"
                  [value]="app"
                  >{{ app.name }}</nb-option
                >
              </nb-select>
            </nb-form-field>
          </td>
        </tr>
      </tbody>
    </table>
    <nb-toggle
      status="primary"
      [(ngModel)]="this.shouldSynchronizeInboxMessages"
      nbTooltip="Copy inbox messages"
      >Copy inbox messages
    </nb-toggle>
    <div>
      <button
        nbButton
        status="primary"
        (click)="copyConfiguration()"
      >
        Copy
      </button>
    </div>
  </nb-card-body>
</nb-card>
