{$layout}
{$template "list_menu"}

{$var "header"}
<link rel="stylesheet" href="./list.css">
{$end}

<div class="config-section ip-list-detail-section">
    <div class="section-title">
        <i class="pi pi-list"></i>
        <span style="margin: 0 0.5rem;">{{list.name}}</span>
        <div class="badges">
            <span class="ui label tiny" >{{list.typeName}}</span>
            <span class="ui label tiny" style="background-color: var(--color-text-active) !important; color: #fff !important;" v-if="list.isGlobal">
                <i class="pi pi-globe" style="color: #fff !important;"></i> {{t('iplists@全局有效')}}
            </span>
        </div>
    </div>
    
    <div class="config-items">
        <div class="ui form">
            <div class="config-item">
                <div class="item-label">ID</div>
                <div class="item-content">{{list.id}}</div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('iplists@代号')}}</div>
                <div class="item-content">
                    <span v-if="list.code.length > 0">{{list.code}}</span>
                    <span v-else class="disabled">{{t('iplists@没有设置')}}</span>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('iplists@备注')}}</div>
                <div class="item-content">
                    <span v-if="list.description.length > 0">{{list.description}}</span>
                    <span v-else class="disabled">-</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="action-buttons">
        <a :href="'/servers/iplists/update?listId=' + list.id" class="ui button primary">
            <i class="pi pi-pencil"></i> {{t('iplists@修改名单')}}
        </a>
        <a :href="'/servers/iplists/items?listId=' + list.id" class="ui button">
            <i class="pi pi-list"></i> {{t('iplists@管理IP')}}
        </a>
    </div>
</div>