<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{imprimelibros/layout}">

<head>
    <th:block layout:fragment="pagetitle" />
    <th:block th:replace="~{imprimelibros/partials/head-css :: head-css}" />
    <th:block layout:fragment="pagecss">
        <link th:href="@{/assets/css/presupuestador.css}" rel="stylesheet"
            th:unless="${#authorization.expression('isAuthenticated()')}" />
        <link th:href="@{/assets/libs/datatables/dataTables.bootstrap5.min.css}" rel="stylesheet" />
    </th:block>

</head>

<body>

    <div th:replace="~{imprimelibros/partials/topbar   :: topbar}" />
    <div th:replace="~{imprimelibros/partials/sidebar :: sidebar}" />

    <th:block layout:fragment="content">
        <div th:if="${#authorization.expression('isAuthenticated()')}">

            <!-- Modales-->
            <div
                th:replace="imprimelibros/partials/modal-form :: modal('margenesPresupuestoFormModal', 'margenes-presupuesto.add', 'modal-md', 'margenesPresupuestoModalBody')">
            </div>

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/"><i class="ri-home-5-fill"></i></a></li>
                    <li class="breadcrumb-item active" aria-current="page" th:text="#{margenes-presupuesto.breadcrumb}">Márgenes de presupuesto</li>
                </ol>
            </nav>

            <div class="container-fluid">

                <button type="button" class="btn btn-secondary mb-3" id="addButton">
                    <i class="ri-add-line align-bottom me-1"></i> <span th:text="#{margenes-presupuesto.add}">Añadir</span>
                </button>

                <table id="margenes-datatable" class="table table-striped table-nowrap responsive w-100">
                    <thead>
                        <tr>
                            <th scope="col" th:text="#{margenes-presupuesto.tabla.id}">ID</th>
                            <th scope="col" th:text="#{margenes-presupuesto.tabla.tipo_encuadernacion}">Tipo encuadernación</th>
                            <th scope="col" th:text="#{margenes-presupuesto.tabla.tipo_cubierta}">Tipo cubierta</th>
                            <th scope="col" th:text="#{margenes-presupuesto.tabla.tirada_minima}">Tirada Mín.</th>
                            <th scope="col" th:text="#{margenes-presupuesto.tabla.tirada_maxima}">Tirada Máx.</th>
                            <th scope="col" th:text="#{margenes-presupuesto.tabla.margen_maximo}">Margen Máx.</th>
                            <th scope="col" th:text="#{margenes-presupuesto.tabla.margen_minimo}">Margen Mín.</th>
                            <th scope="col" th:text="#{margenes-presupuesto.tabla.acciones}">Acciones</th>
                        </tr>
                        <tr>
                            <th><input type="text" class="form-control form-control-sm margenes-presupuesto-filter" data-col="id" /></th>
                            <th>
                                <select class="form-select form-select-sm margenes-presupuesto-select-filter" id="search-encuadernacion">
                                    <option value="" th:text="#{margenes-presupuesto.todos}">Todos</option>
                                    <option value="fresado" th:text="#{presupuesto.fresado}">Fresado</option>
                                    <option value="cosido" th:text="#{presupuesto.cosido}">Cosido</option>
                                    <option value="espiral" th:text="#{presupuesto.espiral}">Espiral</option>
                                    <option value="wireo" th:text="#{presupuesto.wireo}">Wireo</option>
                                    <option value="grapado" th:text="#{presupuesto.grapado}">Grapado</option>
                                </select>
                            </th>
                            <th>
                                <select class="form-select form-select-sm margenes-presupuesto-select-filter" id="search-cubierta">
                                    <option value="" th:text="#{margenes-presupuesto.todos}">Todos</option>
                                    <option value="tapaBlanda" th:text="#{presupuesto.tapa-blanda}"></option>
                                    <option value="tapaDura" th:text="#{presupuesto.tapa-dura}"></option>
                                    <option value="tapaDuraLomoRedondo" th:text="#{presupuesto.tapa-dura-lomo-redondo}"></option>
                                </select>
                            </th>
                            <th>
                                <input type="text" class="form-control form-control-sm margenes-presupuesto-filter" data-col="tiradaMin" />
                            </th>
                            <th>
                                <input type="text" class="form-control form-control-sm margenes-presupuesto-filter" data-col="tiradaMax" />
                            </th>
                            <th>
                                <input type="text" class="form-control form-control-sm margenes-presupuesto-filter" data-col="margenMax" />
                            </th>
                            <th>
                                <input type="text" class="form-control form-control-sm margenes-presupuesto-filter" data-col="margenMin" />
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </th:block>

    <th:block layout:fragment="modal" />
    <th:block th:replace="~{theme/partials/vendor-scripts :: scripts}" />
    <th:block layout:fragment="pagejs">
        <script th:inline="javascript">
            window.languageBundle = /*[[${languageBundle}]]*/ {};
        </script>
        <script th:src="@{/assets/libs/datatables/datatables.min.js}"></script>
        <script th:src="@{/assets/libs/datatables/dataTables.bootstrap5.min.js}"></script>
        <script th:src="@{/assets/js/pages/imprimelibros/configuracion/margenes-presupuesto/list.js}"></script>
    </th:block>
</body>

</html>