<div class="application-form">
    <div class="application-tips">
        <h2>TIPS</h2>
        <p>{{formTip}}</p>
    </div>
    <div class="form">
        {{# form}}
        <form id="application-form" c-id="{{id}}" action="" onsubmit="return false;">
            <p class="clearfix">
                <label for="user-name">姓名：</label>
                <input id="userName" name="userName" class="char required" type="text" value="{{name}}">
            </p>
            <p class="clearfix">
                <label for="user-tell">手機：</label>
                <input id="userTell" name="userTell" class="char required" type="text" value="{{tell}}">
                <i class="verification-btn">獲取驗證碼</i>
            </p>
            <p class="clearfix">
                <label for="user-verification">驗證碼：</label>
                <input id="userVerification" name="verification" class="char" type="text">
                <i class="verification-icon">驗證碼錯誤</i>
            </p>
            <p class="address-char clearfix">
                <label for="user-address">地址：</label>
                <span id="userAddress" class="varchar" contentEditable="true">{{address}}</span>
            </p>
            <p class="clearfix">
                <label for="user-age">年齡：</label>
                <input id="userAge" name="age" class="char required" type="text" value="{{age}}">
            </p>
            <p class="gender-select clearfix">
                <label>性別：</label>
                {{#each gender}}
                <span class="select-item clearfix">
                    <input id="gender{{@index}}" class="gender radio" name="user-gender" type="radio" value="{{value}}" {{#if default}}checked{{/if}}>
                    <label class="radio-label {{#if default}}current{{/if}}" for="gender{{@index}}">{{value}}</label>
                </span>
                {{/each}}
            </p>
            <p class="skin-select clearfix">
                <label>膚質：</label>
                {{#each skin}}
                <span class="select-item clearfix">
                    <input id="skin{{@index}}" class="radio" name="user-skin" type="radio" value="{{text}}" {{#if default}}checked{{/if}}>
                    <label class="radio-label radio-long-label {{#if default}}current{{/if}}" for="skin{{@index}}">{{text}}</label>
                </span>
                {{/each}}
            </p>
            <p class="clearfix">
                <label>您的問題</label>
            </p>
            <p class="trouble-wrap clearfix">
                {{#each problem}}
                <span class="select-item clearfix">
                    <input id="trouble{{@index}}" class="checkbox" name="user-trouble" type="checkbox" value="{{text}}" {{#if default}}checked{{/if}}>
                    <em class="{{#if default}}current{{/if}}"></em>
                    <label class="checkbox-label" for="trouble{{@index}}">{{text}}</label>
                </span>
                {{/each}}
            </p>
            <div class="application-reason" contentEditable="true">
                {{# reason}}
                    {{.}}
                {{/ reason}}
                {{^ reason}}
                <span class="placeholder">你可以從肌膚現有問題，鐘愛哪些產品等方面提交申請理由</span>
                {{/ reason}}
            </div>
            <p class="clearfix">
                <input id="submit-btn" class="submit-btn" type="submit" value="免費申請">
            </p>
        </form>
        {{/ form}}
    </div>
</div>