<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      *ngIf="createOptions" [formGroup]="serverForm" class="fl-content">
  <app-form-errors #formErrors [formGroup]="serverForm"></app-form-errors>
  <div layoutDirection="column">
    <mat-form-field>
      <mat-label i18n>Name</mat-label>
      <input matInput placeholder="Name" i18n-placeholder type="text" formControlName="name" required>
      <mat-error>{{fieldErrors['name']}}</mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-label i18n>Group</mat-label>
      <mat-select formControlName="group" placeholder="Group" i18n-placeholder required>
        <mat-option *ngFor="let group of createOptions.groups" [value]="group.id">
          {{ group.name }}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['group']}}</mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-label i18n>Status</mat-label>
      <mat-select formControlName="status" placeholder="Status" i18n-placeholder required>
        <mat-option *ngFor="let status of createOptions.statusList" [value]="status[0]">
          {{ status[1] }}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['status']}}</mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-label i18n>Server type</mat-label>
      <mat-select formControlName="plugin" placeholder="Server type" i18n-placeholder required>
        <mat-option *ngFor="let plugin of createOptions.plugins" [value]="plugin.id">
          {{ plugin.display_name }}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['plugin'] }}</mat-error>
    </mat-form-field>

    <ng-container *ngIf="selectedPlugin && selectedPlugin.has_server_settings" formGroupName="hosting_server_settings">
      <p>Server configuration</p>
      <div layoutDirection="row" layoutDirection-xs="column" layoutAlign="start center" appLayoutGap="10px">
        <mat-form-field *ngIf="selectedPlugin.server_settings.hostname" appFlex="40">
          <mat-label i18n>Hostname</mat-label>
          <input matInput placeholder="Hostname" i18n-placeholder type="text" formControlName="hostname"
                 [required]="selectedPlugin.server_settings.hostname.required">
          <mat-error>{{fieldErrors['hosting_server_settings.hostname']}}</mat-error>
        </mat-form-field>

        <mat-form-field *ngIf="selectedPlugin.server_settings.port" appFlex="20">
          <mat-label i18n>Port</mat-label>
          <input matInput placeholder="Port" i18n-placeholder type="number" formControlName="port"
                 min="0" max="65535" [required]="selectedPlugin.server_settings.hostname.required">
          <mat-error>{{fieldErrors['hosting_server_settings.port']}}</mat-error>
        </mat-form-field>

        <ng-container *ngIf="selectedPlugin.server_settings.secure">
          <mat-checkbox [color]="'primary'" appFlex="20" formControlName="secure" i18n>
            Secure connection
          </mat-checkbox>
        </ng-container>
      </div>

      <mat-form-field *ngIf="selectedPlugin.server_settings.hostname">
        <mat-label i18n>Username</mat-label>
        <input matInput placeholder="Username" i18n-placeholder type="text" formControlName="username"
               [required]="selectedPlugin.server_settings.username.required">
        <mat-error>{{fieldErrors['hosting_server_settings.username']}}</mat-error>
      </mat-form-field>

      <mat-form-field *ngIf="selectedPlugin.server_settings.password">
        <mat-label i18n>Password</mat-label>
        <input matInput placeholder="Password" i18n-placeholder type="text" formControlName="password"
               [required]="selectedPlugin.server_settings.username.required">
        <mat-error>{{fieldErrors['hosting_server_settings.password']}}</mat-error>
      </mat-form-field>

      <mat-form-field *ngIf="selectedPlugin.server_settings.hostname">
        <mat-label i18n>Access token</mat-label>
        <input matInput placeholder="Access token" i18n-placeholder type="text" formControlName="api_token"
               [required]="selectedPlugin.server_settings.api_token.required">
        <mat-error>{{fieldErrors['hosting_server_settings.api_token']}}</mat-error>
      </mat-form-field>

      <mat-form-field *ngIf="selectedPlugin.server_settings.port">
        <mat-label i18n>Max number of accounts</mat-label>
        <input matInput placeholder="Max number of accounts" i18n-placeholder type="number" formControlName="max_accounts"
               min="0" max="65535" [required]="selectedPlugin.server_settings.max_accounts.required">
        <mat-error>{{fieldErrors['hosting_server_settings.max_accounts']}}</mat-error>
      </mat-form-field>

      <mat-form-field *ngIf="selectedPlugin.server_settings.status_url">
        <mat-label i18n>Status URL</mat-label>
        <input matInput placeholder="Status URL" i18n-placeholder type="text" formControlName="status_url"
               [required]="selectedPlugin.server_settings.status_url.required">
        <mat-error>{{fieldErrors['hosting_server_settings.status_url']}}</mat-error>
      </mat-form-field>

      <mat-form-field *ngIf="selectedPlugin.server_settings.hostname">
        <mat-label i18n>Location</mat-label>
        <input matInput placeholder="Location" i18n-placeholder type="text" formControlName="location"
               [required]="selectedPlugin.server_settings.location.required">
        <mat-error>{{fieldErrors['hosting_server_settings.location']}}</mat-error>
      </mat-form-field>
    </ng-container>

    <app-plugin-ui *ngIf="selectedPlugin && selectedPlugin.has_settings_component"
      [pluginName]="selectedPlugin.label" panelName="staff" componentName="ServerSettings"
                   [componentData]="object.settings">
    </app-plugin-ui>
  </div>
</form>
