<div th:fragment="maquetacionForm">
    <form id="maquetacionForm" novalidate th:action="@{/presupuesto/public/maquetacion}" th:object="${presupuestoMaquetacion}" method="get">
        <div class="form-group">
            <label th:text="#{presupuesto.maquetacion.num-caracteres}" for="num-caracteres">Número de caracteres</label>
            <input type="number" class="form-control maquetacion-item" id="num-caracteres" th:field="*{numCaracteres}" min="1" required>
            <div class="invalid-feedback"></div>
            <label th:text="#{presupuesto.maquetacion.num-caracteres-descripcion}" class="form-text text-muted"></label>
        </div>
        <div class="form-group">
            <label th:text="#{presupuesto.maquetacion.formato}" for="formato-maquetacion">Formato</label>
            <select class="form-control maquetacion-item" id="formato-maquetacion" th:field="*{formato}" required>
                <option value="A5" selected>A5</option>
                <option value="_17x24_">170x240 mm</option>
                <option value="A4">A4</option>
            </select>
            <label th:text="#{presupuesto.maquetacion.formato-descripcion}" class="form-text text-muted"></label>
        </div>
        <div class="form-group">
            <label th:text="#{presupuesto.maquetacion.cuerpo-texto}" for="cuerpo-texto">Cuerpo de texto</label>
            <select class="form-control maquetacion-item" id="cuerpo-texto" th:field="*{cuerpoTexto}" required>
                <option th:text="#{presupuesto.maquetacion.cuerpo-texto-pequeño}" value="small"></option>
                <option th:text="#{presupuesto.maquetacion.cuerpo-texto-medio}" value="medium" selected>Medio (12pt)
                </option>
                <option th:text="#{presupuesto.maquetacion.cuerpo-texto-grande}" value="big">Grande</option>
            </select>
            <label th:text="#{presupuesto.maquetacion.cuerpo-texto-descripcion}" class="form-text text-muted"></label>
        </div>
        <div class="form-group">
            <label th:text="#{presupuesto.maquetacion.num-columnas}" for="num-columnas">Número de columnas</label>
            <input type="number" class="form-control maquetacion-item" id="num-columnas" th:field="*{numColumnas}" min="1" required>
            <div class="invalid-feedback"></div>
            <label th:text="#{presupuesto.maquetacion.num-columnas-descripcion}" class="form-text text-muted"></label>
        </div>
        <div class="form-group">
            <label th:text="#{presupuesto.maquetacion.num-tablas}" for="num-tablas">Número de tablas</label>
            <input type="number" class="form-control maquetacion-item" id="num-tablas" th:field="*{numTablas}" min="0" required>
            <div class="invalid-feedback"></div>
        </div>
        <div class="form-group">
            <label th:text="#{presupuesto.maquetacion.num-fotos}" for="num-fotos">Número de fotos</label>
            <input type="number" class="form-control maquetacion-item" id="num-fotos" th:field="*{numFotos}" min="0" required>
            <div class="invalid-feedback"></div>
        </div>
        <div class="form-check form-switch form-switch-custom mb-3 mt-3">
            <input type="checkbox" class="form-check-input form-switch-custom-primary maquetacion-item"
                id="correccion-ortotipografica" name="correccion-ortotipografica"
                th:field="*{correccionOrtotipografica}">
            <label class="form-check-label" for="correccion-ortotipografica">Corrección ortotipográfica</label>
        </div>
        <div class="form-check form-switch form-switch-custom mb-3">
            <input type="checkbox" class="form-check-input form-switch-custom-primary maquetacion-item"
                id="texto-mecanografiado" name="texto-mecanografiado" th:field="*{textoMecanografiado}">
            <label for="texto-mecanografiado" class="form-check-label" th:text="#{presupuesto.maquetacion.texto-mecanografiado}">
                Texto mecanografiado
            </label>
        </div>
        <div class="form-check form-switch form-switch-custom mb-3">
            <input type="checkbox" class="form-check-input form-switch-custom-primary maquetacion-item" id="disenio-portada"
                name="disenio-portada" th:field="*{disenioPortada}">
            <label for="disenio-portada" class="form-check-label" th:text="#{presupuesto.maquetacion.diseno-portada}">
                Diseño de portada
            </label>
        </div>
        <div class="form-check form-switch form-switch-custom">
            <input type="checkbox" class="form-check-input form-switch-custom-primary maquetacion-item" id="epub" name="epub"
                th:field="*{epub}">
            <label for="epub" class="form-check-label" th:text="#{presupuesto.maquetacion.epub}">ePub</label>
        </div>

        <button type="submit" class="btn btn-secondary mt-3">Calcular Presupuesto</button>
        
    </form>
</div>