{$layout}
{$template "menu"}

<div class="cache-config-container">
    <div class="cache-config-form">
        <div class="form-title">
            <i class="icon refresh"></i> {{t('cache_purge@刷新缓存')}}
        </div>
        
        <p class="comment">
            <i class="icon info circle"></i> {{t('cache_purge@刷新说明')}}
        </p>
        
        <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>
            
            <div class="config-section">
                <div class="config-item">
                    <div class="item-label">{{t('cache_purge@URL类型')}}</div>
                    <div class="item-content">
                        <div class="ui radio checkbox">
                            <radio name="keyType" :v-value="'key'" v-model="keyType">
                                <i class="icon linkify"></i> {{t('cache_purge@URL')}}
                            </radio>
                        </div>
                        <div class="ui radio checkbox" style="margin-left: 1em">
                            <radio name="keyType" :v-value="'prefix'" v-model="keyType">
                                <i class="icon folder"></i> {{t('cache_purge@目录')}}
                            </radio>
                        </div>
                    </div>
                </div>
                
                <div class="config-item">
                    <div class="item-label">
                        <span v-if="keyType == 'key'">{{t('cache_purge@要刷新的URL列表')}}</span>
                        <span v-if="keyType == 'prefix'">{{t('cache_purge@要刷新的URL目录列表')}}</span>
                    </div>
                    <div class="item-content">
                        <textarea name="keys" rows="15" ref="keysBox" class="ui textarea"></textarea>
                        <p class="comment" v-if="keyType == 'key'">
                            <i class="icon info circle"></i> {{t('cache_purge@每行一个URL比如')}}<code-label>https://example.com/hello/world.html</code-label>。
                        </p>
                        <p class="comment" v-if="keyType == 'prefix'">
                            <i class="icon info circle"></i> {{t('cache_purge@每行一个URL目录比如')}}<code-label>https://example.com/hello/</code-label>；{{t('cache_purge@如果只填写域名部分表示清理全站比如')}}<code-label>https://example.com/</code-label>。
                        </p>
                    </div>
                </div>
                
                <div class="config-item">
                    <div class="item-label">{{t('cache_purge@操作结果')}}</div>
                    <div class="item-content">
                        <div v-if="isRequesting" class="ui info message mini">
                            <i class="icon spinner loading"></i> {{t('cache_purge@数据发送中')}}
                        </div>
                        <div v-if="!isRequesting && !isOk && message.length > 0" class="ui negative message mini">
                            <i class="icon exclamation circle"></i> {{t('cache_purge@失败')}}{{message}}
                        </div>
                        <div v-if="!isRequesting && !isOk && failKeys.length > 0" class="fail-keys-box">
                            <div v-for="failKey in failKeys" class="ui negative message mini">
                                <i class="icon exclamation circle"></i> {{failKey.key}}: {{failKey.reason}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="action-buttons">
                <submit-btn v-if="!isRequesting" class="primary">
                    <i class="icon refresh"></i> {{t('cache_purge@提交')}}
                </submit-btn>
            </div>
        </form>
    </div>
</div>