{% load i18n %} 

<style>
    h1 {
        font-size: medium;
        font-weight: 600;
    }
    h2 {
        font-size: small;
        font-weight: 600;
        margin: 6px 0 3px;
    }

    .resumen-container {
        background-color: #fff;
        color: #386ea4;
        border-style: solid 1px #eee;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: baseline;
        width: 100%;
        height: inherit;
        padding-top: 25px;
    }

    .resumen-summary {
        width: 320px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left;
        height: inherit;
        padding: 0 20px;
    }

    .summary-item {
        display: inline-flex;
        justify-content: space-between;
        align-items: baseline;
    }

    .resumen-history {
        width: 320px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left;
        height: inherit;
        padding: 20px 0;
    }

    .resumen-history-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .resumen-history-grid .history-item {
        padding: 5px 0;
        text-align: left;
    }

</style>

<!--ko ifnot: $data.loading -->
<div class="resumen-container">
    <div class="resumen-summary">
        <h1>Resúmen estadístico</h1>
        <div class="summary-item">
            <h2>Bienes Muebles:</h2>
            <div data-bind="text: $data.bMueblesCount"></div>
        </div>
        <div class="summary-item">
            <h2>Bienes Inmuebles:</h2>
            <div data-bind="text: $data.bInmueblesCount"></div>
        </div>
        <div class="summary-item">
            <h2>Patrimonio Inmaterial:</h2>
            <div data-bind="text: $data.inmaterialCount"></div>
        </div>
        <div class="summary-item">
            <h2>Sitios arqueológicos:</h2>
            <div data-bind="text: $data.sitiosArqCount"></div>
        </div>
        <div class="summary-item">
            <h2>Organizaciones y Personas:</h2>
            <div data-bind="text: $data.actoresCount"></div>
        </div>
        <div class="summary-item">
            <h2>Adjuntos digitales:</h2>
            <div data-bind="text: $data.digitalesCount"></div>
        </div>
        <div class="summary-item">
            <h2>Actividades:</h2>
            <div data-bind="text: $data.actividadesCount"></div>
        </div>
        <button class="btn btn-primary" style="width: fit-content; margin-top: 5px" data-bind="click: $data.saveStatus">Guardar resúmen actual</button>
        <div class="resumen-history">
            <h1>Historial de resúmenes</h1>
            <div class="resumen-history-grid">
                <h2 class="history-item">B. Muebles:</h2>
                <h2 class="history-item">B. Inmuebles:</h2>
                <h2 class="history-item">Inmaterial:</h2>
                <h2 class="history-item">S. arqueológicos:</h2>
                <h2 class="history-item">Org. y personas:</h2>
                <h2 class="history-item">Adj. digitales:</h2>
                <h2 class="history-item">Actividades:</h2>
                <h2 class="history-item" style="width:135px">Guardado:</h2>
                <!--ko foreach: $data.records  -->
                <div class="history-item" style="padding: 2px;" data-bind="text:$data.b_muebles"></div>
                <div class="history-item" style="padding: 2px;" data-bind="text:$data.b_inmuebles"></div>
                <div class="history-item" style="padding: 2px;" data-bind="text:$data.inmaterial"></div>
                <div class="history-item" style="padding: 2px;" data-bind="text:$data.sitios_arq"></div>
                <div class="history-item" style="padding: 2px;" data-bind="text:$data.actores"></div>
                <div class="history-item" style="padding: 2px;" data-bind="text:$data.digitales"></div>
                <div class="history-item" style="padding: 2px;" data-bind="text:$data.actividades"></div>
                <div class="history-item" style="padding: 2px; width: 135px" data-bind="text:$data.statetime"></div>
                <!--/ko -->
            </div>
        </div>  
    </div>
</div>
<!--/ko-->