{# templates/admin/blocks/dashboard_banners.html.twig #}

<style>
    /* Gradient KPI Summary Banners */
    .kpi-gradient-card {
        border: none !important;
        border-radius: 14px !important;
        color: #ffffff !important;
        transition: transform 0.22s ease, box-shadow 0.22s ease;
        margin-bottom: 15px;
    }
    .kpi-gradient-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    }
    
    .bg-gradient-papers { 
        background: linear-gradient(135deg, #2F80ED 0%, #0056B3 100%); 
    }
    .bg-gradient-views { 
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); 
    }
    .bg-gradient-downloads { 
        background: linear-gradient(135deg, #ea00d9 0%, #711c91 100%); 
    }
    
    .text-num-bold {
        font-weight: 800;
        font-family: 'Poppins', 'Helvetica Neue', sans-serif;
    }
</style>

<div class="row w-100 m-0 pt-3 px-2">
    
    <div class="col-xl-4 col-md-4 col-sm-12 col-12 mb-4 text-center">
        <div class="card kpi-gradient-card bg-gradient-papers p-6 shadow-sm">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <h3 class="text-white opacity-75 fw-bold d-block fs-7 mb-1">Cataloged Papers</h3>
                    <h1 class="text-white fw-bolder m-0 display-5 text-num-bold">{{ total_papers }}</h1>
                </div>
                <div class="text-center p-3 bg-white bg-opacity-20 rounded-circle d-flex align-items-center justify-content-center" style="padding: 10px">
                    <i class="text-center fa fa-book-open text-white fs-3 fa-2x"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4 col-md-4 col-sm-12 col-12 mb-4 text-center">
        <div class="card kpi-gradient-card bg-gradient-views p-6 shadow-sm">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <h3 class="text-white opacity-75 fw-bold d-block fs-7 mb-1">Search Viewings</h3>
                    <h1 class="text-white fw-bolder m-0 display-5 text-num-bold">{{ total_views }}</h1>
                </div>
                <div class="p-3 bg-white bg-opacity-20 rounded-circle d-flex align-items-center justify-content-center" style="padding: 10px">
                    <i class="fa fa-eye text-white fs-3 fa-2x"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4 col-md-4 col-sm-12 col-12 mb-4 text-center">
        <div class="card kpi-gradient-card bg-gradient-downloads p-6 shadow-sm">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <h3 class="text-white opacity-75 fw-bold d-block fs-7 mb-1">File Downloads</h3>
                    <h1 class="text-white fw-bolder m-0 display-5 text-num-bold">{{ total_downloads }}</h1>
                </div>
                <div class="p-3 bg-white bg-opacity-20 rounded-circle d-flex align-items-center justify-content-center" style="padding: 10px">
                    <i class="fa fa-download text-white fs-3 fa-2x"></i>
                </div>
            </div>
        </div>
    </div>

</div>