{$layout "layout_popup"}

<!-- <h3>创建鉴权方式</h3> -->
<form class="ui form" data-tea-action="$" data-tea-success="success">
    <csrf-token></csrf-token>

    <table class="ui table definition selectable">
        <tr>
            <td class="title">{{t('access_createPopup@名称')}} *</td>
            <td>
                <input type="text" name="name" maxlength="50" ref="focus"/>
            </td>
        </tr>
        <tr>
            <td>{{t('access_createPopup@鉴权类型')}} *</td>
            <td>
                <b-select
                    name="type"
                    v-model="type"
                    @change="changeType"
                    auto-width
                    :options="[
                        {label: t('access_createPopup@鉴权类型Placeholder'), value: ''},
                        ...authTypes.map(authType => ({
                            label: authType.name,
                            value: authType.code,
                        }))
                    ]"
                ></b-select>

                <!-- <select class="ui dropdown auto-width" name="type" v-model="type" @change="changeType">
                    <option value="">[鉴权类型]</option>
                    <option v-for="authType in authTypes" :value="authType.code">{{authType.name}}</option>
                </select> -->
                <p class="comment" v-html="authDescription"></p>
            </td>
        </tr>

        <!-- TypeA -->
        <tbody v-show="type == 'typeA'">
            <tr>
                <td>{{t('access_createPopup@鉴权密钥')}} *</td>
                <td>
                    <input type="text" maxlength="40" name="typeASecret" v-model="typeASecret" autocomplete="off"/>
                    <p class="comment">{{t('access_createPopup@只能包含字母数字长度不超过40')}}<a href="" @click.prevent="generateTypeASecret()">{{t('access_createPopup@随机生成')}}</a></p>
                </td>
            </tr>
            <tr>
                <td>{{t('access_createPopup@签名参数')}} *</td>
                <td>
                    <input type="text" maxlength="30" name="typeASignParamName" value="sign" v-model="typeASignParamName" @input="changeTypeASignParamName"/>
                </td>
            </tr>
            <tr>
                <td>{{t('access_createPopup@有效时间')}}</td>
                <td>
                    <div class="ui input right labeled">
                        <input type="text" maxlength="8" name="typeALife" value="30" style="width: 7em"/>
                        <span class="ui label">{{t('access_createPopup@秒')}}</span>
                    </div>
                    <p class="comment">{{t('access_createPopup@链接有效时间')}}</p>
                </td>
            </tr>
        </tbody>

        <!-- TypeB -->
        <tbody v-show="type == 'typeB'">
            <tr>
                <td>{{t('access_createPopup@鉴权密钥')}} *</td>
                <td>
                    <input type="text" maxlength="40" name="typeBSecret" v-model="typeBSecret" autocomplete="off"/>
                    <p class="comment">{{t('access_createPopup@只能包含字母数字长度不超过40')}}<a href="" @click.prevent="generateTypeBSecret()">{{t('access_createPopup@随机生成')}}</a></p>
                </td>
            </tr>
            <tr>
                <td>{{t('access_createPopup@有效时间')}}</td>
                <td>
                    <div class="ui input right labeled">
                        <input type="text" maxlength="8" name="typeBLife" value="30" style="width: 7em"/>
                        <span class="ui label">{{t('access_createPopup@秒')}}</span>
                    </div>
                    <p class="comment">{{t('access_createPopup@链接有效时间')}}</p>
                </td>
            </tr>
        </tbody>

        <!-- TypeC -->
        <tbody v-show="type == 'typeC'">
            <tr>
                <td>{{t('access_createPopup@鉴权密钥')}} *</td>
                <td>
                    <input type="text" maxlength="40" name="typeCSecret" v-model="typeCSecret" autocomplete="off"/>
                    <p class="comment">{{t('access_createPopup@只能包含字母数字长度不超过40')}}<a href="" @click.prevent="generateTypeCSecret()">{{t('access_createPopup@随机生成')}}</a></p>
                </td>
            </tr>
            <tr>
                <td>{{t('access_createPopup@有效时间')}}</td>
                <td>
                    <div class="ui input right labeled">
                        <input type="text" maxlength="8" name="typeCLife" value="30" style="width: 7em"/>
                        <span class="ui label">{{t('access_createPopup@秒')}}</span>
                    </div>
                    <p class="comment">{{t('access_createPopup@链接有效时间')}}</p>
                </td>
            </tr>
        </tbody>

        <!-- TypeD -->
        <tbody v-show="type == 'typeD'">
            <tr>
                <td>{{t('access_createPopup@鉴权密钥')}} *</td>
                <td>
                    <input type="text" maxlength="40" name="typeDSecret" v-model="typeDSecret" autocomplete="off"/>
                    <p class="comment">{{t('access_createPopup@只能包含字母数字长度不超过40')}}<a href="" @click.prevent="generateTypeDSecret()">{{t('access_createPopup@随机生成')}}</a></p>
                </td>
            </tr>
            <tr>
                <td>{{t('access_createPopup@签名参数')}} *</td>
                <td>
                    <input type="text" maxlength="30" name="typeDSignParamName" value="sign" v-model="typeDSignParamName" @input="changeTypeDSignParamName"/>
                </td>
            </tr>
            <tr>
                <td>{{t('access_createPopup@时间戳参数')}} *</td>
                <td>
                    <input type="text" maxlength="30" name="typeDTimestampParamName" value="t" v-model="typeDTimestampParamName" @input="changeTypeDTimestampParamName"/>
                </td>
            </tr>
            <tr>
                <td>{{t('access_createPopup@有效时间')}}</td>
                <td>
                    <div class="ui input right labeled">
                        <input type="text" maxlength="8" name="typeDLife" value="30" style="width: 7em"/>
                        <span class="ui label">{{t('access_createPopup@秒')}}</span>
                    </div>
                    <p class="comment">{{t('access_createPopup@链接有效时间')}}</p>
                </td>
            </tr>
        </tbody>

        <!-- BasicAuth -->
        <tbody v-show="type == 'basicAuth'">
            <tr>
                <td>{{t('access_createPopup@用户')}} *</td>
                <td>
                    <http-auth-basic-auth-user-box></http-auth-basic-auth-user-box>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <a href="" @click.prevent="showMoreBasicAuthOptions()">{{t('access_createPopup@更多基本认证选项')}}<i class="ui icon angle" :class="{up: moreBasicAuthOptionsVisible, down: !moreBasicAuthOptionsVisible}"></i></a>
                </td>
            </tr>
            <tr v-show="moreBasicAuthOptionsVisible">
                <td>{{t('access_createPopup@认证领域名_Realm')}}</td>
                <td>
                    <input type="text" name="basicAuthRealm" value="" maxlength="100"/>
                </td>
            </tr>
            <tr v-show="moreBasicAuthOptionsVisible">
                <td>{{t('access_createPopup@字符集')}}</td>
                <td>
                    <input type="text" name="basicAuthCharset" style="width: 6em" maxlength="50"/>
                    <p class="comment">{{t('access_createPopup@类似于')}}<code-label>UTF-8</code-label>。</p>
                </td>
            </tr>
        </tbody>

        <!-- SubRequest -->
        <tbody v-show="type == 'subRequest'">
            <tr>
                <td>{{t('access_createPopup@子请求URL')}} *</td>
                <td>
                    <input type="text" name="subRequestURL" maxlength="1024"/>
                    <p class="comment">{{t('access_createPopup@可以是一个完整的URL也可以是一个路径')}}</p>
                </td>
            </tr>
            <tr>
                <td>{{t('access_createPopup@请求方法')}}</td>
                <td>
                    <radio name="subRequestFollowRequest" :v-value="1" v-model="subRequestFollowRequest">{{t('access_createPopup@同当前请求一致')}}</radio> &nbsp; &nbsp;
                    <radio name="subRequestFollowRequest" :v-value="0" v-model="subRequestFollowRequest">{{t('access_createPopup@自定义')}}</radio>
                    <div style="margin-top: 0.8em" v-show="subRequestFollowRequest == 0">
                        <div class="ui divider"></div>
                        <b-select
                            name="subRequestMethod"
                            v-model="subRequestMethod"
                            auto-width
                            :options="[
                                {label: 'POST', value: 'POST'},
                                {label: 'GET', value: 'GET'},
                                {label: 'PUT', value: 'PUT'},
                                {label: 'HEAD', value: 'HEAD'},
                            ]"
                        ></b-select>

                        <!-- <select class="ui dropdown auto-width" name="subRequestMethod">
                            <option value="POST">POST</option>
                            <option value="GET">GET</option>
                            <option value="PUT">PUT</option>
                            <option value="HEAD">HEAD</option>
                        </select> -->
                    </div>
                </td>
            </tr>
        </tbody>
        <tr>
            <td colspan="2"><more-options-indicator></more-options-indicator></td>
        </tr>
        <tbody v-show="moreOptionsVisible">
            <tr>
                <td>{{t('access_createPopup@限定文件扩展名')}}</td>
                <td>
                    <values-box name="exts"></values-box>
                    <p class="comment">{{t('access_createPopup@如果不为空则表示只有这些扩展名的文件才需要鉴权扩展名需要包含点符号_比如')}}<code-label>.png</code-label></p>
                </td>
            </tr>
            <tr>
                <td>{{t('access_createPopup@限定域名')}}</td>
                <td>
                    <domains-box></domains-box>
                    <p class="comment">{{t('access_createPopup@如果不为空则表示只有这些域名的文件才需要鉴权')}}</p>
                </td>
            </tr>
        </tbody>
    </table>

    <submit-btn></submit-btn>
</form>