{$layout}
{$template "menu"}

<div class="ui margin"></div>
<form  method="post" class="ui form" data-tea-action="$" data-tea-success="success">
    <csrf-token></csrf-token>
    <div class="config-section">
        <div class="section-title">{{t('添加存储')}}</div>
        
        <div class="config-item">
            <div class="item-label">{{t('存储名称')}} *</div>
            <div class="item-content">
                <input type="text" name="name" maxlength="50" ref="focus" :placeholder="t('例如：默认NFS存储')"/>
            </div>
        </div>
        
        <div class="config-item">
            <div class="item-label">{{t('存储方式')}} *</div>
            <div class="item-content">
                <b-select
                    name="storageType"
                    v-model="storageType"
                    :options="[
                        ...storageTypes.map(node => ({
                            label: node.name??'',
                            value: node.code??'',
                        }))
                    ]"
                ></b-select>
                <p v-if="storageType === 'nfs'" class="comment">{{t('请在API节点上使用NFS类似的文件系统挂载存储目录')}}</p>
                <p v-if="storageType === 's3'" class="comment">{{t('请填写S3相关信息')}}</p>
            </div>
        </div>
        
        <div class="config-item" v-if="storageType === 'nfs'">
            <div class="item-label">{{t('存储路径')}}</div>
            <div class="item-content">
                <input type="text" name="storagePath" v-model="storagePath" maxlength="150" :placeholder="t('例如：/data/pages_storage')"/>
                 <p class="comment">{{t('pages将上传资产到相应的路径下')}}</p>
            </div>
        </div>
        
        <div class="config-item" v-if="storageType === 's3'">
            <div class="item-label">Access Key</div>
            <div class="item-content">
                <input type="text" name="accessKey" v-model="accessKey" maxlength="150" placeholder="S3 Access Key"/>
            </div>
        </div>
        
        <div class="config-item" v-if="storageType === 's3'">
            <div class="item-label">Secret Key</div>
            <div class="item-content">
                <input type="password" name="secretKey" v-model="secretKey" maxlength="150" placeholder="S3 Secret Key"/>
            </div>
        </div>
        
        <div class="config-item" v-if="storageType === 's3'">
            <div class="item-label">Region</div>
            <div class="item-content">
                <input type="text" name="region" v-model="region" maxlength="150" :placeholder="t('例如：us-east-1')"/>
            </div>
        </div>
        
        <div class="config-item" v-if="storageType === 's3'">
            <div class="item-label">Bucket</div>
            <div class="item-content">
                <input type="text" name="bucket" v-model="bucket" maxlength="150" :placeholder="t('S3 Bucket 名称')"/>
            </div>
        </div>
        
        <div class="config-item" v-if="storageType === 's3'">
            <div class="item-label">Endpoint</div>
            <div class="item-content">
                <input type="text" name="endpoint" v-model="endpoint" maxlength="150" placeholder="例如：s3.us-east-1.amazonaws.com"/>
                 <p class="comment">{{t('如果使用兼容S3的存储，请填写对应的Endpoint。')}}</p>
            </div>
        </div>
    </div>

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