<!--
Archivo: GSYCGetBomGenset.html
Ruta: src\templates\SupYCtrol\GerenteSyc\UtilityMaterials\GSYCGetBomGenset.html
Lenguaje: HTML
-->

{% extends "layout.html" %}
{% block title %}Trazabilidad de BOM{% endblock %}

{% block content %}

<style>
    /* Estilo base para la tabla BOM */
    .bom-wide-table-container {
        width: 100%;
        overflow-x: auto; /* Scroll horizontal */
        margin-top: 1rem;
    }

    .bom-wide-table-container table {
        width: max-content;
        min-width: 100%;
        font-size: 0.85rem;
        white-space: nowrap;
        table-layout: fixed; /* Fijamos ancho por columnas */
    }

    .bom-wide-table-container th,
    .bom-wide-table-container td {
        padding: 4px 8px;
        vertical-align: middle;
    }

    /* Hacemos que solo la columna Descripción sea ancha */
    .bom-wide-table-container th.descripcion-col,
    .bom-wide-table-container td.descripcion-col {
        width: 50vw; /* 50% del ancho visible del viewport */
        min-width: 500px; /* evita que sea demasiado angosta */
        max-width: 700px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>


<div class="container-fluid">
    <h2 class="mt-3">Trazabilidad de BOM</h2>

    <!-- Formulario de búsqueda -->
    <form id="searchForm" onsubmit="event.preventDefault(); GSYCGetBomGenset();">
        <div class="form-group">
            <label for="jobNum">Job Number:</label>
            <input type="text" id="jobNum" class="form-control" placeholder="Ingresa el Job Number" required>
        </div>
        <button type="submit" class="btn btn-primary">Obtener BOM</button>
    </form>

    <hr>

    <!-- Contenedor para mostrar la tabla -->
    <div id="resultsContainer"></div>
</div>

<script src="{{ url_for('static', filename='js/SupYCtrol/GerenteSyC/UtilityMaterials/GSYCGetBomGenset.js') }}"></script>

{% endblock %}
