import {Component} from '@angular/core';
import {NavigationComponent} from '@vendasta/fec-nav';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
import {FormBuilder, FormControl} from '@angular/forms';
import {LatLngBoundsLiteral} from '@agm/core';

@Component({
  template: `
      <div [innerHTML]="readMe"></div>
      
      <h1>Example:</h1>
      <va-geo-input [control]="control1" [bounds]="bounds"></va-geo-input>
      <div>
          Data: <span>{{control1.value | json}}</span>
      </div>
  `,
  styles: [require('../../../assets/doc.scss')]
})
export class FormsGeoDocComponent {
  public readMe: SafeHtml;
  public control1: FormControl = new FormControl();
  public bounds: LatLngBoundsLiteral = {
    north : 52.209761,
    east : -106.517579,
    south : 52.069548,
    west : -106.7758751
  };

  constructor(private nav: NavigationComponent, public sanitizer: DomSanitizer, private fb: FormBuilder) {
    nav.activeMenuId = 'forms-geo-doc';
    this.readMe = this.sanitizer.bypassSecurityTrustHtml(require('./README.html'));
  }
}