{% 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: left;
        align-items: baseline;
        width: 100%;
        height: inherit;
        padding-top: 25px;
    }

    .resumen-summary {
        width: 400px;
        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: 800px;
        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(8, 1fr);
    }

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

</style>

<!--ko ifnot: $data.loading -->
<div class="resumen-container">
    <div class="resumen-summary">
        <h1>Resúmen estadístico del patrimonio nacional</h1>
        <div class="summary-item">
            <h2>Patrimonio Material - Bienes Muebles:</h2>
            <div data-bind="text: $data.bMueblesCount"></div>
        </div>
        <div class="summary-item">
            <h2>Patrimonio Material - 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 estadístico actual</button>
        <div class="resumen-history">
            <h1>Historial de resúmenes estadísticos</h1>
            <div class="resumen-history-grid">
                <h2 class="history-item">Bienes Muebles</h2>
                <h2 class="history-item">Bienes Inmuebles</h2>
                <h2 class="history-item">Inmaterial</h2>
                <h2 class="history-item">Sitios arqueológicos</h2>
                <h2 class="history-item">Organizaciones y personas</h2>
                <h2 class="history-item">Adjuntos digitales</h2>
                <h2 class="history-item">Actividades</h2>
                <h2 class="history-item" style="width:150px">Fecha de 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: 150px" data-bind="text:$data.statetime"></div>
                <!--/ko -->
            </div>
        </div>  
    </div>
</div>
<!--/ko-->