<script>
const options = {
    method: 'GET',
    headers: {
        Authorization: 'Bearer freightmate' // Replace with your actual Bearer token
    }
};

fetch('https://api.withterminal.com/tsp/v1/providers', options)
  .then(response => response.json())
  .then(data => {
      const container = document.getElementById("api-content");
      container.innerHTML = ''; // Clear loading message
      
      // Loop through each provider and create HTML for name and logo
      data.providers.forEach(provider => {
          const providerDiv = document.createElement('div');
          providerDiv.classList.add('provider'); // Add a class for styling

          const providerName = document.createElement('h3');
          providerName.textContent = provider.name; // Adjust property name if needed
          
          const providerLogo = document.createElement('img');
          providerLogo.src = provider.logo; // Adjust property name if needed
          providerLogo.alt = `${provider.name} logo`;
          providerLogo.style.width = "100px"; // Adjust logo size
          providerLogo.style.height = "auto";

          providerDiv.appendChild(providerName);
          providerDiv.appendChild(providerLogo);

          container.appendChild(providerDiv);
      });
  })
  .catch(err => {
      document.getElementById("api-content").innerHTML = "Error fetching provider data."; // Error handling
      console.error('Error:', err);
  });
</script>

<div id="api-content">Loading provider data...</div>

<style>
    #api-content {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .provider {
        border: 1px solid #ddd;
        padding: 10px;
        text-align: center;
        width: 150px;
    }
    .provider img {
        max-width: 100%; /* Ensure logos are responsive */
        height: auto;
    }
</style>