{$layout}
{$template "menu"}

<div>
    <div class="ui menu text blue">
        <div class="item"><strong>{{app.name}}</strong> (<code>{{app.appId}}</code>)</div>
    </div>
    <div class="ui divider"></div>

    <a href="" @click.prevent="bindDomain" class="ui button primary small"><i class="icon plus"></i>添加域名</a>

    <table class="ui table selectable celled" v-if="domains.length > 0" style="margin-top: 1em;">
        <thead>
            <tr>
                <th>域名列表</th>
                <th class="two wide">规则策略</th>
                <th class="two op">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="domain in domains">
                <td><strong>{{domain.name}}</strong></td>
                <td>
                    <a :href="'/httpdns/apps/customRecords?appId=' + app.id + '&domainId=' + domain.id">{{domain.customRecordCount}}</a>
                </td>
                <td>
                    <a :href="'/httpdns/apps/customRecords?appId=' + app.id + '&domainId=' + domain.id">自定义解析</a> &nbsp;|&nbsp;
                    <a href="" @click.prevent="deleteDomain(domain.id)">解绑</a>
                </td>
            </tr>
        </tbody>
    </table>

    <p class="ui message" v-if="domains.length == 0">该应用尚未绑定域名。</p>
</div>