{{ 'requires-auth' | partial }}

{{ '/validation/client-ts/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" data-validation-summary="title,name,color,filmGenres,age"></div>
    
        <div class="form-group">
            <div class="form-check">
                {{#each contactTitles}}
                <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="title-{{Key}}" name="title" value="{{Key}}" class="custom-control-input">
                    <label class="custom-control-label" for="title-{{Key}}">{{Value}}</label>
                </div>
                {{/each}}
            </div>
        </div>
        <div class="form-group">
            <label for="name">Full Name</label>
            <input class="form-control" id="name" name="name" type="text" placeholder="Name">
            <small id="name-help" class="text-muted">Your first and last name</small>
        </div>
        <div class="form-group">
            <label class="form-label" for="color">Favorite color</label>
            <select id="color" name="color" class="col-4 form-control">
                <option value=""></option>
                {{#each contactColors}}
                <option value="{{Key}}">{{Value}}</option>
                {{/each}}
            </select>
        </div>
        <div class="form-group">
            <label class="form-check-label">Favorite Film Genres</label>
            <div class="form-check">
                {{#each contactGenres}}
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" id="filmGenres-{{it}}" name="filmGenres" value="{{it}}" class="form-check-input">
                    <label class="form-check-label" for="filmGenres-{{it}}">{{it}}</label>
                </div>
                {{/each}}
            </div>
        </div>
        <div class="form-group">
            <input class="form-control col-3" name="age" type="number" min="3" placeholder="Age">
        </div>
        <div class="form-group">
            <button class="btn btn-primary" type="submit">Update Contact</button>
            <a href="{{continue}}">cancel</a>
        </div>
    </form>
    
    {{#capture appendTo scripts}}
    <script>var CONTACT = {{response.Result | json}};</script>
    <script src="../edit.js"></script>
    {{/capture}}
    
{{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}}