/NAVBAR<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="/">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#"></a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="?lang=en">EN</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="?lang=fi">FI</a>
      </li>
    </ul>
  </div>
</nav>
<div class="container mt-5 pt-5">
  <h1></h1>
  <p></p>



  <form id="searchForm" class="form-inline">
    <div class="form-group mb-2">
      <label for="tradeRegister" class="mr-2">Trade Register:</label>
      <select id="tradeRegister" class="form-control">
        <option value="">All</option>
        <option value="DK">Denmark</option>
        <option value="EE">Estonia</option>
        <option value="FI">Finland</option>
        <option value="LV">Latvia</option>
        <option value="NO">Norway</option>
        <option value="UK">United Kingdom</option>
      </select>
    </div>
    <div class="form-group mx-sm-3 mb-2">
      <label for="companyName" class="mr-2">Company Name:</label>
      <input type="text" id="companyName" class="form-control" placeholder="Type company name">
    </div>
  </form>

  <div id="results" class="mt-4"></div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $(document).ready(function() {
    let timer;
    $('#companyName').on('input', function() {
      clearTimeout(timer);
      const companyName = $(this).val().trim();
      if (companyName.length >= 2) {
        timer = setTimeout(function() {
          performSearch();
        }, 300);
      } else {
        $('#results').empty();
      }
    });

    $('#tradeRegister').change(function() {
      performSearch();
    });

    function performSearch() {
      const tradeRegister = $('#tradeRegister').val();
      const companyName = $('#companyName').val().trim();

      if (companyName.length < 2) {
        $('#results').empty();
        return;
      }

      const apiUrl = 'https://example.com/api/companies';
      const params = { q: companyName };

      if (tradeRegister) {
        params.trade_register = tradeRegister;
      }

      $.ajax({
        url: apiUrl,
        method: 'GET',
        data: params,
        success: function(response) {
          $('#results').html('<pre>' + JSON.stringify(response, null, 2) + '</pre>');
        },
        error: function() {
          $('#results').html('<p>Error retrieving data.</p>');
        }
      });
    }
  });
</script>

<footer class="bg-light pt-4">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-4">
                <img src="path/to/logo.png" alt="Datatriever Oy" class="img-fluid mb-3">
                <p>Olkipolku 7B<br>
                02620 Espoo, Finland<br>
                info@datatriever.com</p>
            </div>
            <div class="col-md-4 mb-4 border-left border-right">
                <!--h5>Links</h5-->
                <ul class="list-unstyled">
                    <li><a href="/privacy">Privacy</a></li>
                    <li><a href="/about">About</a></li>
                    <li><a href="/coverage">Coverage</a></li>
                </ul>
            </div>
            <div class="col-md-4 mb-4">
                <!--h5>Follow Us</h5-->
                <ul class="list-unstyled">
                    <li><a href="https://www.linkedin.com" target="_blank"><i class="fab fa-linkedin"></i> LinkedIn</a></li>
                    <li><a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i> X</a></li>
                </ul>
            </div>
        </div>
    </div>
    <hr>
    <div class="container">
        <p class="text-center">&copy; 2024 Datatriever Oy. All rights reserved.</p>
    </div>
</footer>

<!DOCTYPE html>
<html lang="Array">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <title>CompanyFacts</title>
    <style>
        body {
            padding-top: 56px; /* Adjust based on navbar height */
        }
        .nav-tabs .nav-link {
            font-size: 0.8rem; /* Smaller font size for the tabs */
        }
        .spinner {
            display: none;
            text-align: center;
            margin-top: 100px;
        }
        .country-link {
            margin: 10px;
        }
footer {
    background-color: #f8f9fa;
}

footer .container {
    max-width: 1140px; /* Same as Bootstrap container max-width for large screens */
}

footer .row {
//    border-bottom: 1px solid #dee2e6;
}

footer h5 {
//    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

footer ul {
    padding-left: 0;
    list-style: none;
}

footer ul li {
    margin-bottom: 10px;
}

footer ul li a {
    color: #007bff;
    text-decoration: none;
}

footer ul li a:hover {
    text-decoration: underline;
}

footer p {
    margin-bottom: 0;
}

footer hr {
    margin-top: 20px;
    margin-bottom: 10px;
}
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><!-- can't be defer -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="/">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Welcome to our website</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="?lang=en">EN</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="?lang=fi">FI</a>
      </li>
    </ul>
  </div>
</nav>


    <div class="container mt-5 pt-5">





            </div>

    <!-- Cookie Banner -->
    <div class="cookie-banner fixed-bottom bg-dark text-white p-3">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    We use cookies to ensure you get the best experience. <a href="/privacy" class="text-white">Learn more</a>
                </div>
                <button class="btn btn-primary btn-sm" id="cookie-accept">OK</button>
            </div>
        </div>
    </div>

    <!-- SLIM version will not be sufficient -->
    <!-- script src="https://code.jquery.com/jquery-3.5.1.min.js"></script -->

    <!-- script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script -->
    <!-- script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script -->

    <script>
        // Cookie Banner
        document.getElementById('cookie-accept').addEventListener('click', function() {
            document.cookie = "cookie_accept=true; path=/; max-age=" + (60*60*24*365);
            document.querySelector('.cookie-banner').style.display = 'none';
        });

        if (document.cookie.indexOf('cookie_accept=true') !== -1) {
            document.querySelector('.cookie-banner').style.display = 'none';
        }

        // Ensure the navbar toggle works
        $(document).ready(function () {
            $('.navbar-toggler').on('click', function () {
                $('#navbarNav').toggleClass('show');
            });
        });
    </script>




    <script>
/*
        $(document).ready(function() {
            // Scope the nav-link selector to #company-tabs
            $('#company-tabs .nav-link').click(function(e) {
                e.preventDefault();
                var target = $(this).data('target');
                loadContent(target.substring(1));
            });

            // Load basic content on page load
            loadContent('basic');

            function loadContent(tab) {
                var spinner = $('.spinner-' + tab);
                var content = $('.content-' + tab);

                spinner.show();
                content.hide();

                $.ajax({
                    url: 'fi_' + tab + '.inc.php',
                    method: 'GET',
                    success: function(response) {
                        content.html(response);
                        spinner.hide();
                        content.show();
                    },
                    error: function() {
                        content.html('<p>Error loading content.</p>');
                        spinner.hide();
                        content.show();
                    }
                });
            }
        });
*/
    </script>


</body>
</html>