text: // Product btn
  const btnProducts = document.querySelector('#btn-products');
  
  fetchProducts = () => {
      const url = document.location.href + '/product'
  
      fetch(url).then(response => {
          response.json().then(data => {
              const container = document.querySelector('#entities-container')
              const infoContainer = document.querySelector('#information-container');
  
  
              container.innerHTML = ''
              infoContainer.innerHTML = ''
              container.innerHTML = `
  <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
      <div class="align-middle inline-block min-w-full shadow overflow-hidden sm:rounded-lg border-b border-gray-200">
          <table id="table" class="min-w-full">
              <thead>
              <tr>
                  <th
                      class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                      Nom
                  </th>
                  <th
                      class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                      Stock
                  </th>
                  <th
                      class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                      Prix
                  </th>
                  <th
                      class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
                      Promotion
                  </th>
                  <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
              </tr>
              </thead>
          </table>
      </div>
  </div>`
              // For each article display article and add tw style from it
              for (const key in data) {
                  const table = document.querySelector('#table')
                  const date = new Date(data[key].created_at)
                  const options = {weekday: "long", year: "numeric", month: "long", day: "2-digit",hour: "2-digit",minute: "2-digit"};
                  table.innerHTML +=`<tbody class="bg-white">
              <tr>
                  <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                      <div class="flex items-center">
                          <div class="flex-shrink-0 h-10 w-10">
                              <img class="h-10 w-10 rounded-full"
                                   src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80"
                                   alt="">
                          </div>
  
                          <div class="ml-4">
                                  <div class="text-sm leading-5 font-medium text-gray-900">TEST
                              </div>
                              <div class="text-sm leading-5 text-gray-500">TEST</div>
                          </div>
                  </td>
  
                  <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                      <div class="text-sm leading-5 text-gray-500">TEST</div>
                  </td>
  
                  <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
                                                  <span
                                                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">${data[key].active}</span>
                  </td>
  
                  <td
                      class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500">
                      TEST
                  </td>
  
                  <td
                      class="flex px-6 py-4 whitespace-no-wrap text-right border-b border-gray-200 text-sm leading-5 font-medium">
                     <button id="edit-product" type="button" class=" bg-yellow-300 leading-5 text-white px-6 py-2 rounded font-medium mx-3 hover:bg-yellow-400 transition duration-200 each-in-out">Modifier</button>
                      <button id="delete-product" type="button" class="bg-red-500 leading-5 text-white px-6 py-2 rounded font-medium mx-3 hover:bg-red-600 transition duration-200 each-in-out">Supprimer</button>
                  </td>
              </tr>
              </tbody>`
  
              }
          })
      })
  }
  
  
  // Event listenenr on btn products
  btnProducts.addEventListener('click',fetchProducts)
  