import {Component} from '@angular/core';
import { {{name}} } from './model.Service';
import { DatePickerOptions, DateModel } from 'ng2-datepicker';

//----------------------------------
// Component for {{name}}
// created with Magic code generator
//----------------------------------
@Component ({
 selector: '{{name}}-form',
 styleUrls: [ './form.component.css' ],
 providers: [{{name}}],
 template: `
 <div class="container">
    <h1>{{name}}</h1>
    <hr>
    <form id="{{name}}" #form="ngForm" (ngSubmit)="saveForm(form.value)">
        {{#each model}}
        {{#xif "this.type == Date"}}
            <label for="{{name}}-{{@key}}"class="col-sm-2 col-form-label">
                {{#if this.label}}{{this.label}}{{/if}}
            </label>
            <div class="col-sm-10">
                <ng2-datepicker [options]="options" [(ngModel)]="{{@key}}" id="{{name}}-{{@key}}"></ng2-datepicker>
            </div>
        </div>
        {{/xif}}
        {{#xif "this.type == Boolean"}}
        <div id="{{../name}}_{{@key}}" class="form-group row">
            <label for="{{name}}-{{@key}}"class="col-sm-2 col-form-label">
            <div class="col-sm-10">
                <input [(ngModel)]="{{@key}}" id="{{name}}-{{@key}}" name="{{@key}}" type="checkbox" class="form-control">
            </div>
                {{#if this.label}}{{this.label}}{{/if}}
            </label>
        </div>
        {{/xif}}
        {{#xif "this.type == String || this.type == Number"}}
        <div id="{{../name}}_{{@key}}" class="form-group row">
            <label for="{{name}}-{{@key}}"class="col-sm-2 col-form-label">
                {{#if this.label}}{{this.label}}{{/if}}
            </label>
            {{#xif "this.enum == null"}}
            <div class="col-sm-10">
                <input [(ngModel)]="{{@key}}" id="{{name}}-{{@key}}" name="{{@key}}" class="form-control" placeholder="{{#if this.label}}{{this.label}}{{else}}{{key}}{{/if}}">
            </div>
            {{/xif}}
            {{#xif  "this.enum != null"}}
            <div class="col-sm-10">
                <select class="form-control" id="exampleSelect1">
                    {{#each enum}}
                    <option>{{this}}</option>
                    {{/each}}
                </select>
            </div>
            {{/xif}}
        </div>
        {{/xif}}
        {{/each}}
        <input class="btn btn-primary" type="submit" value="Submit">
    </form> 
</div> 
`
})
export class {{name}}Form {
 {{#each model}}
    {{@key}}:"data";
{{/each}}
    value: any;
    date: DateModel;
    options: DatePickerOptions;

    constructor(private data: {{name}}) { 
        this.options = new DatePickerOptions();
    }

    saveForm(value: any) {
        console.log(value);
        this.data.save(value);
    }
}