<div class="wrapper">
  <div class="wrapper-add">
    <div class="container">
      <h1>Tworzenie grupy</h1>
      <br />
      <form ngNativeValidate action="/" method="post" #user="ngForm" (ngSubmit)="add(user.value)">
        <label>
            Wprowadź nazwę dla grupy:
            <input type="text" name="name" maxlength="150" class="form-control" ngModel required />
        </label>
        <br />
        <label>
            Wprowadź opis grupy:
            <textarea name="description" class="form-control" ngModel required></textarea>
        </label>
        <br /><br />
        <button #btn class="btn btn-study-cave" type="submit"><i class="fas fa-check-circle"></i> Dodaj grupę!</button>
        <button class="btn btn-study-cave" routerLink="/my-groups"><i class="fas fa-arrow-left"></i> Powrót</button>
      </form>
    </div>
  </div>
</div>

<p-dialog header="Informacja" [(visible)]="showInfoDialog" [responsive]="true"
  [minWidth]="300" [minY]="70" [draggable]="false" [closable]="false">
  <p>Twoja grupa została utworzona prawidłowo.</p>
  <p>Poniżej znajduje się kod dostępu poprzez który możesz dodawać członków:</p>
  <!--<p><b>{{ createdGroup.key }}</b></p>-->
  <p><b>{{ createdGroup.groupKey }}</b></p>
  <br />
  <p>Kod ten będzie dostępny także w sekcji "Zarządzaj grupą."</p>
  <br />
  <!-- To check later -->
  <button class="btn btn-study-cave" (click)="showInfoDialog = false" [routerLink]="['/groups/manage', createdGroup.id]">Rozumiem</button>
</p-dialog>
