{#include main}
{#style}
.clearCacheIcon:hover {
    color: #3366ac !important;
    cursor: pointer;
}
.refreshCacheIcon:hover {
    color: #3366ac !important;
    cursor: pointer;
}
{/style}

{#script}

function refreshCache(cacheName){
    $.post("",
        {
          name: cacheName,
          action: "refresh"
        },
        function(data, status){
            if(status === "success"){
                updateSize(data,cacheName);
            }
        });
}

function clearCache(cacheName){
    $.post("",
        {
          name: cacheName,
          action: "clearCache"
        },
        function(data, status){
            if(status === "success"){
                updateSize(data,cacheName);
                changeBackgroundColor("#76be6b", cacheName);
            }else{
                changeBackgroundColor("#ff6366", cacheName);
            }
        });
}

function updateSize(data, cacheName){
    var r = JSON.parse(data);
    var spanId = 'size-' + cacheName;
    $('#' + spanId).html(r.size);
}

function changeBackgroundColor(color, cacheName){
    var className = 'tr-' + cacheName;
    var element = $('#' + className);
    
    var x = 3000;
    var originalColor = element.css("background-color");

    element.css("background", color);
        setTimeout(function(){
        element.css("background", originalColor);
    }, x);
}
{/script}
{#title}Caches{/title}
{#body}
<table class="table table-striped">
    <thead class="thead-dark">
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Size</th>
    </tr>
    </thead>
    <tbody>
    {#for cacheInfo in info:cacheInfos}
    <tr id="tr-{cacheInfo.name}">
        <td>
            <i class="fas fa-sync-alt text-success refreshCacheIcon align-middle" onclick="refreshCache('{cacheInfo.name}');" title="Refresh"></i> {cacheInfo.name}
        </td>
        <td>
            <span id="size-{cacheInfo.name}">{cacheInfo.size}</span>
            <i class="fas fa-trash-alt float-right text-danger clearCacheIcon align-middle" onclick="clearCache('{cacheInfo.name}');" title="Clear"></i>    
        </td>
    {/for}
    </tbody>
</table>
{/body}
{/include}