{{ 'requires-auth' | partial }}

{{ '/validation/server-ts/contacts' | assignTo: contactsDir }}

{{ { 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">
        {{ '<div class="alert alert-danger">{0}</div>' | htmlFormat(errorResponseExcept('title,name,color,filmGenres,age')) }}
        <input type="hidden" name="Continue"  value="{{ `${contactsDir}/` }}">
        <input type="hidden" name="ErrorView" value="{{ `${contactsDir}/${id}/edit` }}">
    </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"
                       {{ {checked:Key == Title} | htmlAttrs }}>
                <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" 
               value="{{ 'name' | formValue(Name) }}" data-invalid="{{errorResponse('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">
            {{#each contactColors}}
            <option value="{{Key}}" {{ {selected:Key == formValue('color',Color)} | htmlAttrs }}>{{Value}}</option>
            {{/each}}
        </select>
    </div>
    <div class="form-group">
        <label class="form-check-label">Favorite Film Genres</label>
        <div class="form-check" data-invalid="{{errorResponse('filmGenres')}}">
            {{#each contactGenres}}
            <div class="custom-control custom-checkbox">
                <input type="checkbox" id="filmGenres-{{it}}" name="filmGenres" value="{{it}}" class="form-check-input"
                       {{ {checked:any(FilmGenres,x => formValue('filmGenres',x) == toString(it))} | htmlAttrs }}>
                <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" 
               value="{{ 'age' | formValue(Age) }}" data-invalid="{{errorResponse('age')}}">
    </div>
    <div class="form-group">
        <button class="btn btn-primary" type="submit">Update Contact</button>
        <a href="{{contactsDir}}">cancel</a>
    </div>
</form>
{{else if ex}}
    <div class="col-6">
        <div class="alert alert-warning">{{ex.Message}}</div>
        <p><a href="{{contactsDir}}">&lt; back</a></p>
    </div>
{{/with}}


{{#capture appendTo scripts}}
<script src="{{contactsDir}}/edit.js"></script>
{{/capture}}

{{ htmlError }}