{{ 'requires-auth' | partial }}

{{ '/validation/server/contacts/' | assignTo: continue }}

{{ { id } | sendToGateway('GetContact', {catchError:'ex'}) | assignTo: response }}

{{#with response.Result}}
<h3>Update Contact</h3>

<form action="/contacts/{{Id}}" method="post" class="col-lg-4">
    <div class="form-group">
        {{ 'title,name,color,filmGenres,age' | validationSummary }}
        {{ {continue,errorView:`/validation/server/contacts/${id}/edit`} | htmlHiddenInputs }}
    </div>
    <div class="form-group">
        {{ {id:'title',type:'radio',value:Title} | formInput({values:contactTitles,inline:true}) }}
    </div>
    <div class="form-group">
        {{ {id:'name',value:Name} | formInput({label:'Name'}) }}
    </div>
    <div class="form-group">
        {{ {id:'color',class:'col-4',value:Color}
           | formSelect({label:'Favorite color',values:contactColors}) }}
    </div>
    <div class="form-group">
        {{ {id:'filmGenres',type:'checkbox',value:FilmGenres} | formInput({label:'Favorite Film Genres',values:contactGenres,help:"choose one or more"}) }}
    </div>
    <div class="form-group">
        {{ {id:'age',type:'number',min:13,value:Age,class:'col-3'} | formInput({label:'Age'}) }}
    </div>
    <div class="form-group">
        <button class="btn btn-primary" type="submit">Update Contact</button>
        <a href="{{continue}}">cancel</a>
    </div>
</form>
{{else if ex}}
    <div class="col-6">
        <div class="alert alert-warning">{{ex.Message}}</div>
        <p><a href="{{continue}}">&lt; back</a></p>
    </div>
{{/with}}

{{ htmlError }}