{$layout}
{$template "menu"}

<div v-if="countClusters == 0">
    <b-empty>
        {{t('ns_domains_create@暂时还没有集群请先')}}<a href="/ns/clusters/create">{{t('ns_domains_create@创建集群Link')}}</a>。
    </b-empty>
</div>

<div v-show="countClusters > 0">
    <form class="ui form" data-tea-action="$" data-tea-success="success">
        <csrf-token></csrf-token>
        <input type="hidden" name="addingType" :value="addingType"/>
        <table class="ui table definition selectable">
            <tr>
                <td>{{t('ns_domains_create@域名Label')}}</td>
                <td>
                    <!-- 单个添加 -->
                    <div v-show="addingType == 'one'">
                        <input type="text" name="name" maxlength="255" ref="nameInput" :placeholder="t('ns_domains_create@单个域名Placeholder')"/>
                        <p class="comment">
                            <a href="" @click.prevent="setAddingType('batch')">{{t('ns_domains_create@批量添加Link')}}</a>
                        </p>
                    </div>

                    <!-- 批量添加 -->
                    <div v-show="addingType == 'batch'">
                        <textarea rows="10" name="names" :placeholder="t('ns_domains_create@每行一个域名Placeholder')" ref="namesInput"></textarea>
                        <p class="comment">
                            <a href="" @click.prevent="setAddingType('one')">{{t('ns_domains_create@单个添加Link')}}</a>
                        </p>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="title">{{t('ns_domains_create@所属集群Label')}}</td>
                <td>
                    <ns-cluster-selector></ns-cluster-selector>
                    <p class="comment">{{t('ns_domains_create@需要部署域名服务的集群Comment')}}</p>
                </td>
            </tr>
            <tr>
                <td colspan="2"><more-options-indicator></more-options-indicator></td>
            </tr>
            <tbody v-show="moreOptionsVisible">
                <tr>
                    <td>{{t('ns_domains_create@所属用户Label')}}</td>
                    <td>
                        <ns-user-selector @change="changeUserId"></ns-user-selector>
                        <p class="comment">{{t('ns_domains_create@当前域名所属的平台用户Comment')}}</p>
                    </td>
                </tr>
                <tr v-if="hasGroups">
                    <td>{{t('ns_domains_create@所属分组Label')}}</td>
                    <td>
                        <ns-domain-group-selector ref="groupSelector"></ns-domain-group-selector>
                    </td>
                </tr>
            </tbody>
        </table>
        <submit-btn></submit-btn>
    </form>
</div>