{$layout}
{$template "menu"}

<div class="margin"></div>

<div><span class="grey">刷新缓存指的是标记URL列表或目录为失效状态，当有新的用户请求这些URL时，会再次从源站读取最新的内容。</span></div>

<form method="post" class="ui form" data-tea-action="$" data-tea-before="before" data-tea-success="success" data-tea-fail="fail" data-tea-done="done" data-tea-timeout="300">
    <csrf-token></csrf-token>
    <table class="ui table definition selectable">
        <tr>
            <td class="title">URL类型</td>
            <td>
                <radio name="keyType" :v-value="'key'" v-model="keyType">URL</radio> &nbsp;
                <radio name="keyType" :v-value="'prefix'" v-model="keyType">目录</radio>
            </td>
        </tr>
        <tr>
            <td>
                <span v-if="keyType == 'key'">要刷新的URL列表</span>
                <span v-if="keyType == 'prefix'">要刷新的URL目录列表</span>
            </td>
            <td>
                <textarea name="keys" rows="20" ref="keysBox"></textarea>
                <p class="comment" v-if="keyType == 'key'">每行一个URL，比如<code-label>https://example.com/hello/world.html</code-label>。</p>
                <p class="comment" v-if="keyType == 'prefix'">每行一个URL目录，比如<code-label>https://example.com/hello/</code-label>；如果只填写域名部分，表示清理全站，比如<code-label>https://example.com/</code-label>。</p>
            </td>
        </tr>
        <tr>
            <td>操作结果</td>
            <td>
                <div v-if="isRequesting">数据发送中...</div>
                <span class="red" v-if="!isRequesting && !isOk && message.length > 0">失败：{{message}}</span>
                <div v-if="!isRequesting && !isOk && failKeys.length > 0" class="fail-keys-box">
                    <div v-for="failKey in failKeys">
                        <span class="red">{{failKey.key}}: {{failKey.reason}}</span>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <submit-btn v-if="!isRequesting">提交</submit-btn>
</form>