{% load i18n %}
<style>
    .status-panel {
        width: 40%;
        box-shadow: 1px 1px 5px #777;
        border-radius: 7px;
        padding: 1.6rem;
    }
    .status-panel-title{
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    .status-panel-content {
        padding: 0.3rem;
    }
    .status-panel-text {
        font-size: 1.5rem;
        margin-top: 0.5rem;
        position: relative;
    }
    .status-panel-text-detail-btn {
        width: 5rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        font-size: 0.9rem;
        border-radius: 7px;
        background-image: linear-gradien-t(to top, #1156a0, #7b9abb);
        color: #ffffff;
        font-weight: bold;
        cursor: pointer;
    }
    .status-panel-text-detail-btn:hover {
        background: #1156a0;
    }
    .status-panel-text-detail-btn:hover+.status-panel-text-detail{
        display:block;
    }
    .status-panel-text-detail {
        width: 260px;
        background: #ffffff;
        display: none;
        position:absolute;
        left: 0;
        top: 0;
        z-index: 9;
        animation: fadeIn 200ms;
        box-shadow: 0px 0px 4px #bbbbbb;
        border-radius: 10px;
        padding: 2rem;
    }
    @keyframes fadeIn {
        from {opacity: 0.2;}
        to {opacity: 1;}
    }
</style>
<ol class="breadcrumb">
    <li>{% trans "营销管理" %}</li>
    <li>{% trans "状态检测" %}</li>
</ol>

<div>
    <div class="status-panel">
        <div class="status-panel-title">
            酒鬼酒庚子鼠年生肖纪念酒活动
        </div>
        <div style="font-weight: bold;background: #f1e77c;padding:0.6rem;">
            基本信息
        </div>
        <div class="status-panel-content">
            <div class="status-panel-text" style="display:flex;">
                <div>已使用的标签数量: <b>{{activatedNumber}} / 60000  -   {{activatedRatio}}% </b> </div>
                <div class="status-panel-text-detail-btn" style="margin-left: 2rem;">详细</div>
                <div class="status-panel-text-detail">
                    {% for i in categoryList %}
                        <div>
                            <span style="font-size: 0.9rem;font-style: italic;">{{i.item}} - </span>
                            <b> {{i.itemName}}</b>, 已用张数:<b> {{i.count}}</b>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div class="status-panel-text">
                已兑奖单数: <b>{{winnerNumber}}</b>
            </div>
            <div class="status-panel-text">
                已领奖单数: <b>{{redeemedNumber}}</b>
            </div>
            <div class="status-panel-text">
                已被扫描的错误卡片数量: <b>{{problemCards}}</b>
            </div>
        </div>
        <div style="font-weight: bold;background: #f1e77c;padding:0.6rem;">
            最近十次标签动态
        </div>
        <div style="padding: 0.4rem;">
            <div style="display: flex;font-weight:bold;">
                <div style="width: 15%;">ID</div>
                <div style="width: 20%;">操作</div>
                <div style="width: 20%;">时间</div>
                <div style="width: 25%;">code ID</div>
                <div style="width: 20%;">消费者ID</div>
            </div>
            <div>
            {% for i in recentOperation %}
                <div style="display: flex;margin-bottom: 0.3rem;">
                    <div style="width: 15%;">{{i.0}}</div>
                    <div style="width: 20%;">{{i.1}}</div>
                    <div style="width: 20%;">{{i.2}}</div>
                    <div style="width: 25%;">{{i.3}}</div>
                    <div style="width: 20%;">{{i.4}}</div>
                </div> 
            {% endfor %}
            </div>
        </div>
    </div>
</div>