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

//----------------------------------
// Component for {{name}}
// created with Magic code generator
//----------------------------------
@Component ({
 selector: '{{name}}-form',
 styleUrls: [ './form.component.css' ],
 template: `
 <div class="container">
    <h1>{{name}}</h1>
    <hr>
    <form id="{{name}}" #form="ngForm" (ngSubmit)="logForm(form.value)">
        {{#each model}}
        {{#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="Enter text">
            </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;

    constructor() { }

    logForm(value: any) {
        console.log(value);
    }
}