<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title id="pageTitle">4DTrace</title>
    
    <link href="/webjars/bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="/webjars/bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
    <link href="/webjars/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
    <link href="/css/stylesheet.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="https://unpkg.com/three@0.124.0/build/three.js"></script>
    <script src="js/leaflet.markercluster.js"></script>
    <link rel="stylesheet" href="css/MarkerCluster.css"/>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
    <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>    
    <link rel="stylesheet" media="(max-width: 800px)" href="css/stylesheet-movil.css">
    <script src="/js/table-grouping.js"></script>
    <link rel="icon" href="https://cuatrodigital.com/wp-content/uploads/2022/02/favicon.png" sizes="32x32" />
</head>
<body>
        <header class="p-3 text-bg-dark py-1">
  <div class="">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-start justify-content-lg-start p-md-0 p-lg-0 p-2 pt-4 col-md-auto">
      
        <a href="/" class="d-flex me-2 text-white text-decoration-none align-items-start">
            <img loading="lazy" src="https://cuatrodigital.com/wp-content/uploads/2022/02/logo.svg" alt="Cuatro digital" height="48" 
                class="d-inline-block my-0 me-2">
            <h3 class="ms-1 fs-5 align-self-start col-lg-8 col-md-8"> |
              <small>Pasaporte de materiales</small>
            </h3>
          </a>

      
      <span  class="col-12 d-none d-md-block col-md-5 mb-3 ms-lg-auto me-lg-auto"></span>
      
      <ul class="nav col-12 col-md-auto col-lg-auto justify-content-center">
          <li><a href="?lang=es" 
              class="nav-link px-2 text-white"><span class="d-none d-md-block">Español</span><span class="d-md-none">ES</span></a></li>
          <li><a href="?lang=en" 
              class="nav-link px-2 text-secondary"><span class="d-none d-md-block">English</span><span class="d-md-none">EN</span></a></li>
      </ul>
      </div>
  </div>
</header>

        <!-- No tenemos Product-ID -->
        <main class="container mt-4">
  <div class="row justify-content-center align-items-center">
    <div class="col-12">
        <h3 class="heading my-4 text-center">Introduzca el código de trazabilidad</h3>
    </div>

    <form role="search" class="col-lg-5 col-md-7 col-10 d-flex flex-column justify-content-center align-items-center" action="/" method="post">
        <div class="input-group">
            <input type="text" placeholder="Buscar" name="productId" class="form-control border border-secondary form-control-lg" aria-label="#{home.search}" id="form1" value="sitemap.xml">
            <button type="submit" class="btn btn-lg btn-outline-dark input-group-append" title="Buscar">
                <i class="fa-solid fa-magnifying-glass"></i>
            </button>
        </div>
                    
    </form>
  </div>
</main>

        <!-- Tenemos Product-ID y producto -->
        

        <!-- Script rueda de carga al buscar productos -->
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var form = document.querySelector('form[role="search"]');
                if(form) {
                form.addEventListener('submit', function() {
                    document.getElementById('loader').style.display = 'block';
                });
                }
            });
        </script>
        <div id="loader" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:rgba(255,255,255,0.9);text-align:center;">
            <div style="position:relative;top:40vh;">
                <button class="btn btn-primary" type="button" disabled>
                    <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                    <span role="status">Buscando producto...</span>
                </button>
            </div>
        </div> 
    </body>
</html>