<div class="col-xl-3 summary-col">
    <div class="card">
        <div class="card-header">
            <div class="d-flex">
                <div class="flex-grow-1">
                    <h5 th:text="#{presupuesto.resumen-presupuesto}">Resumen presupuesto</h5>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive table-card">
                <table id="summary-datos-generales" class="table table-responsive align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th th:text="#{presupuesto.resumen-libro}" scope="col" colspan="2">Libro</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="align-items-center">
                                <span th:text="#{presupuesto.resumen-encuadernacion}"></span>
                            </td>
                            <td id="summary-encuadernacion" class="text-end data-summary" data-id-summary="encuadernacion">Fresado</td>
                        </tr>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.formato}"></span>
                            </td>
                            <td id="summary-formato" class="text-end data-summary" data-id-summary="formato"></td>
                        </tr>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.paginas}"></span>
                            </td>
                            <td id="summary-paginas" class="text-end data-summary" data-id-summary="paginas"></td>
                        </tr>
                        <tr>
                            <td class="ps-3">
                                <span class="ps-3" th:text="#{presupuesto.paginas-negro}"></span>
                            </td>
                            <td id="summary-paginas-negro" class="text-end"></td>
                        </tr>
                        <tr>
                            <td class="ps-3">
                                <span class="ps-3" th:text="#{presupuesto.paginas-color}"></span>
                            </td>
                            <td id="summary-paginas-color" class="text-end"></td>
                        </tr>

                    </tbody>
                </table>
                <table id="summary-interior" class="table table-responsive align-middle mb-0 d-none">
                    <thead class="table-light">
                        <tr>
                            <th th:text="#{presupuesto.interior}" scope="col" colspan="2">Interior</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.tipo-interior}"></span>
                            </td>
                            <td id="summary-tipo-interior" class="text-end data-summary" data-id-summary="tipo-interior"></td>
                        </tr>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.papel-interior}"></span>
                            </td>
                            <td id="summary-papel-interior" class="text-end data-summary" data-id-summary="papel-interior"></td>
                        </tr>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.gramaje-interior}"></span>
                            </td>
                            <td id="summary-gramaje-interior" class="text-end data-summary" data-id-summary="gramaje-interior"></td>
                        </tr>
                    </tbody>
                </table>
                <table id="summary-cubierta" class="table table-responsive align-middle mb-0 d-none">
                    <thead class="table-light">
                        <tr>
                            <th th:text="#{presupuesto.cubierta}" scope="col" colspan="2">Cubierta</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.tipo-cubierta}"></span>
                            </td>
                            <td id="summary-tapa-cubierta" class="text-end data-summary" data-id-summary="tapa-cubierta"></td>
                        </tr>
                        <tr class="tapa-blanda-row d-none">
                            <td>
                                <span th:text="#{presupuesto.solapas}"></span>
                            </td>
                            <td id="summary-cubierta-solapas" class="text-end data-summary" data-id-summary="cubierta-solapas"></td>
                        </tr>
                        <tr class="tapa-blanda-row d-none">
                            <td class="ps-3">
                                <span class="ps-3" th:text="#{presupuesto.tamanio-solapa}"></span>
                            </td>
                            <td id="summary-tamanio-solapa" class="text-end data-summary" data-id-summary="tamanio-solapa"></td>
                        </tr>
                        <tr class="tapa-blanda-row d-none">
                            <td>
                                <span th:text="#{presupuesto.impresion-cubierta}"></span>
                            </td>
                            <td id="summary-impresion-cubierta" class="text-end data-summary" data-id-summary="impresion-cubierta"></td>
                        </tr>
                        <tr class="tapa-dura-row d-none">
                            <td>
                                <span th:text="#{presupuesto.papel-guardas}"></span>
                            </td>
                            <td id="summary-papel-guardas" class="text-end data-summary" data-id-summary="papel-guardas"></td>
                        </tr>
                        <tr class="tapa-dura-row d-none">
                            <td>
                                <span th:text="#{presupuesto.guardas-impresas}"></span>
                            </td>
                            <td id="summary-guardas-impresas" class="text-end data-summary" data-id-summary="guardas-impresas"></td>
                        </tr>
                        <tr class="tapa-dura-row d-none">
                            <td>
                                <span th:text="#{presupuesto.cabezada}"></span>
                            </td>
                            <td id="summary-cabezada" class="text-end data-summary" data-id-summary="cabezada"></td>
                        </tr>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.papel-cubierta}"></span>
                            </td>
                            <td id="summary-papel-cubierta" class="text-end data-summary" data-id-summary="papel-cubierta"></td>
                        </tr>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.gramaje-cubierta}"></span>
                            </td>
                            <td id="summary-gramaje-cubierta" class="text-end data-summary" data-id-summary="gramaje-cubierta"></td>
                        </tr>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.acabado}"></span>
                            </td>
                            <td id="summary-acabado-cubierta" class="text-end data-summary" data-id-summary="acabado-cubierta"></td>
                        </tr>
                    </tbody>
                </table>
                <table id="summary-sobrecubierta" class="table table-responsive align-middle mb-0 d-none">
                    <thead class="table-light">
                        <tr>
                            <th th:text="#{presupuesto.sobrecubierta}" scope="col" colspan="2">Sobrecubierta</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.papel-gramaje}"></span>
                            </td>
                            <td id="summary-sobrecubierta-papel-gramaje" class="text-end data-summary" data-id-summary="sobrecubierta-papel-gramaje"></td>
                        </tr>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.tamanio-solapa}"></span>
                            </td>
                            <td id="summary-sobrecubierta-tamanio-solapa" class="text-end data-summary" data-id-summary="sobrecubierta-tamanio-solapa"></td>
                        </tr>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.acabado}"></span>
                            </td>
                            <td id="summary-sobrecubierta-acabado" class="text-end data-summary" data-id-summary="sobrecubierta-acabado"></td>
                        </tr>
                    </tbody>
                </table>
                <table id="summary-faja" class="table table-responsive align-middle mb-0 d-none">
                    <thead class="table-light">
                        <tr>
                            <th th:text="#{presupuesto.faja}" scope="col" colspan="2">Faja</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.papel-gramaje}"></span>
                            </td>
                            <td id="summary-faja-papel-gramaje" class="text-end data-summary" data-id-summary="faja-papel-gramaje"></td>
                        </tr>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.faja-alto}"></span>
                            </td>
                            <td id="summary-faja-alto-faja" class="text-end data-summary" data-id-summary="faja-alto-faja"></td>
                        </tr>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.tamanio-solapa}"></span>
                            </td>
                            <td id="summary-faja-tamanio-solapa" class="text-end data-summary" data-id-summary="faja-tamanio-solapa"></td>
                        </tr>
                        <tr>
                            <td>
                                <span th:text="#{presupuesto.acabado}"></span>
                            </td>
                            <td id="summary-faja-acabado" class="text-end data-summary" data-id-summary="faja-acabado"></td>
                        </tr>
                    </tbody>
                </table>
                <table id="summary-servicios-extras" class="table table-responsive align-middle mb-0 d-none">
                    <thead class="table-light">
                        <tr>
                            <th th:text="#{presupuesto.extras}" scope="col" colspan="2">Servicios</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- end card body -->
    </div>
    <!-- end card -->
</div>
<!-- end col -->