<div class="animate-fadeInUpBounce">

    <!-- Ribbon Shape -->
    <div class="card ribbon-box border shadow-none mb-lg-0 material-shadow">
        <div class="card-body">
            <div class="ribbon ribbon-primary ribbon-shape" th:text="#{presupuesto.resumen}">Resumen
            </div>
        </div>

        <div class="ribbon-content mt-4">
            <div id="div-extras" class="hstack gap-2 justify-content-center flex-wrap">
            </div>
        </div>
    </div>
    <!-- End Ribbon Shape -->

    <div class="col-9 mx-auto mt-4">
        <h5 id="resumen-titulo" class="text-center"></h5>
        <table id="resumen-tabla-final" class="table table-borderless table-striped mt-3"
            th:data-currency="#{app.currency}">
            <thead>
                <tr>
                    <th></th>
                    <th th:text="#{presupuesto.resumen.tabla.descripcion}">Descripción</th>
                    <th th:text="#{presupuesto.resumen.tabla.cantidad}">Cantidad</th>
                    <th th:text="#{presupuesto.resumen.tabla.precio-unidad}">Precio unitario</th>
                    <th th:text="#{presupuesto.resumen.tabla.precio-total}">Precio total</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
                <tr class="table-active">
                    <th colspan="4" class="text-end" th:text="#{presupuesto.resumen.tabla.base}">Total</th>
                    <th class="text-end" id="resumen-base">0,00 €</th>
                </tr>
                <tr class="table-active">
                    <th colspan="4" class="text-end" th:text="#{presupuesto.resumen.tabla.iva}">IVA (4%)</th>
                    <th class="text-end" id="resumen-iva">0,00 €</th>
                </tr>
                <tr class="table-active">
                    <th colspan="4" class="text-end" th:text="#{presupuesto.resumen.tabla.total}">Total con IVA</th>
                    <th class="text-end" id="resumen-total">0,00 €</th>
            </tfoot>
        </table>
    </div>

    <div class="d-flex justify-content-between align-items-center mt-4 w-100">
        <button id="btn-prev-resumen" type="button"
            class="btn btn-light d-flex align-items-center btn-change-tab-resumen">
            <i class=" ri-arrow-left-circle-line label-icon align-middle fs-16 me-2"></i>
            <span th:text="#{presupuesto.volver-extras}">Volver a extras</span>
        </button>

        <div th:unless="${#authorization.expression('isAuthenticated()')}">
            <button id="btn-add-cart" type="button"
                class="btn btn-secondary d-flex align-items-center btn-change-tab-resumen">
                <i class="mdi mdi-login label-icon align-middle fs-16 me-2"></i>
                <span th:text="#{presupuesto.resumen.inicie-sesion}">Inicie sesión para continuar</span>
            </button>
        </div>
        <div th:if="${#authorization.expression('isAuthenticated()')}">
            <button id="btn-add-cart" type="button" 
                class="btn btn-secondary d-flex align-items-center">
                <span th:text="#{presupuesto.resumen.agregar-cesta}">Agregar a la cesta</span>
                <i class="ri-shopping-cart-2-line fs-16 ms-2"></i>
            </button>
        </div>
    </div>
</div>