<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.seleccion-tirada}">Seleccion de
                tirada
            </div>
            <h5 class="fs-14 text-end" th:text="#{presupuesto.seleccion-tirada-descripcion}">Seleccione la tirada
                deseada</h5>
        </div>

        <div class="ribbon-content mt-4">
            <div id="div-tiradas-error"
                class="d-flex justify-content-center mt-4 w-100 d-none">

            </div>
            <div id="div-tiradas"
                class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-4 justify-content-center align-items-stretch mx-auto mb-4"
                style="max-width:1120px" th:data-per-unit="#{presupuesto.precio-unidad}"
                th:data-total="#{presupuesto.total}" th:data-select="#{presupuesto.seleccionar-tirada}"
                th:data-selected="#{presupuesto.tirada-seleccionada}" th:data-units="#{presupuesto.unidades}">

            </div>
        </div>
    </div>
    <!-- End Ribbon Shape -->

    <div class="d-flex justify-content-between align-items-center mt-4 w-100">
        <button id="btn-prev-seleccion-tirada" type="button"
            class="btn btn-light d-flex align-items-center btn-change-tab-seleccion-tirada">
            <i class=" ri-arrow-left-circle-line label-icon align-middle fs-16 me-2"></i>
            <span th:text="#{presupuesto.volver-cubierta}">Volver a diseño de cubierta</span>
        </button>
        <button id="btn-next-seleccion-tirada" type="button"
            class="btn btn-secondary d-flex align-items-center btn-change-tab-seleccion-tirada">
            <span><b th:text="#{presupuesto.continuar-extras-libro}">Continuar a extras del libro</b></span>
            <i class="ri-arrow-right-circle-line fs-16 ms-2"></i>
        </button>
    </div>
</div>