{$layout}
{$template "menu"}

<warning-message v-if="key == null">激活之后，可以使用商业版功能，当前你还没有激活，<a href="http://edge.teaos.cn/docs/Plus/Authority/Index.md" target="_blank">[在这里看激活方法]</a>。</warning-message>

<div v-if="key != null">
    <div class="margin"></div>

    <div class="ui message green icon" v-if="!key.isExpired">
        <i class="icon gem outline small yellow"></i>
        <div class="content">
            恭喜您已经成为尊贵的商业版用户。
        </div>
    </div>

    <div class="margin"></div>
    <table class="ui table definition selectable">
        <tr>
            <td class="title">状态</td>
            <td>
                <span class="red" v-if="key.isExpiring">即将过期</span>
                <span class="red" v-else-if="key.isExpired">已过期</span>
                <span class="green" v-else>已认证</span>
            </td>
        </tr>
        <tr v-if="key.nodes > 0">
            <td>节点数限制</td>
            <td>{{key.nodes}}个节点</td>
        </tr>
        <tr>
            <td>公司/组织名</td>
            <td>{{key.company}}</td>
        </tr>
        <tr>
            <td class="title">开始日期</td>
            <td>{{key.dayFrom}}</td>
        </tr>
        <tr>
            <td class="title">结束日期</td>
            <td>{{key.dayTo}}
                <div v-if="key.isExpiring" style="margin-top: 0.5em">
                    <span class="red">即将过期</span>
                </div>
                <div v-else-if="key.isExpired" style="margin-top: 0.5em">
                    <span class="red">已过期，请尽快更新认证信息。</span>
                </div>
            </td>
        </tr>
        <tr>
            <td>主机名</td>
            <td>{{key.hostname}}
                <p class="comment">认证服务所在服务器主机名。</p>
            </td>
        </tr>
        <tr>
            <td>主机MAC地址</td>
            <td>
                <span v-for="address in key.macAddresses" class="ui label basic small">{{address}}</span>
                <p class="comment">认证服务所在服务器的MAC地址。</p>
            </td>
        </tr>
    </table>
    <p class="comment">数据更新于{{key.updatedTime}}。</p>
</div>