import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
            <h1>
              {{title}}
            </h1>
            <h1>
              Hello Donor, please fill out the form below.
            </h1>

            <p>
              Enter name:
            </p>
             <textarea ng-model="name"></textarea>
            <p>
              Enter location:
            </p>
             <textarea ng-model="location"></textarea>
            <p>
              Enter quatity:
            </p>
              <textarea ng-model="quantity"></textarea>
            <p>
              Is it perishable?:
            </p>
            <form [formGroup]="radioGroupForm">
                <div ngbRadioGroup name="radioBasic" formControlName="model">
                    <label class="perishableButtons">
                        <input type="radio" [value]="0"> Yes
                    </label>
                    <label class="perishableButtons">
                        <input type="radio" value="1"> No
                    </label>
                </div>
            </form>
            <hr>
              <!--if yes then following code elements are shown -->
            <p>
              When is it perishable by?
            </p>
                Date:
                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                          <input class="form-control" placeholder="yyyy-mm-dd"
                            name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
                        <div class="input-group-addon" (click)="d.toggle()" >
                            <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
                        </div>
                        </div>
                   </div>
                </form>
              <hr>

            <p>
              Does it need to be refrigerated?
            </p>
            <form [formGroup]="radioGroupForm">
                <div ngbRadioGroup name="radioBasic" formControlName="model">
                    <label class="refrigButtons">
                        <input type="radio" [value]="0"> Yes
                    </label>
                    <label class="refrigButtons">
                        <input type="radio" value="1"> No
                    </label>
                </div>
            </form>
<!-- Alligator code
            <div class="jumbotron">
  <div class="container">
    <ngb-alert type="success" [dismissible]="false">
      Bootstrap is working!
    </ngb-alert>

    <h1>
      <i class="fa fa-bath" aria-hidden="true"></i>
      And so is Font Awesome!
    </h1>
  </div>
</div>

<div class="container">
  <p>
    A progress bar:
    <ngb-progressbar showValue="true" type="success" [value]="65">
    </ngb-progressbar>
  </p>
</div>

<div class="container">
  <ngb-tabset>
    <ngb-tab title="Bacon">
        <ng-template ngbTabContent>
          <p class="mt-4">Content for tab 1.
            <button type="button"
                    class="btn btn-secondary"
                    placement="bottom"
                    ngbPopover="A popover in tab 1"
                    popoverTitle="Bacon is good">
              Click me
            </button>
          </p>
        </ng-template>
      </ngb-tab>
      <ngb-tab title="Lettuce">
        <ng-template ngbTabContent>
          <p>Content for tab 2</p>
        </ng-template>
      </ngb-tab>
      <ngb-tab title="Tomatoes">
        <ng-template ngbTabContent>
          <p>Content for tab 3</p>
        </ng-template>
      </ngb-tab>
    </ngb-tabset>
</div>
          -->
      `
})
export class AppComponent {
  title = 'App works!'
}