<div class="flex flex-row pt-4 pl-1  text-slate-700">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
   </svg>
    <h2 class=" text-[18px] font-medium pl-2 ">Listado</h2> 
</div>
<p class="pl-2 text-m text-slate-600">Lista los emails por enviarse.</p>

<button phx-click="update_tabulator" class="flex flex-row pt-4 pl-1 mb-2 text-slate-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
  <h2 class=" text-[18px] font-medium pl-2 ">Actualizar</h2> 
</button>

<div class="sm:w-auto lg:w-auto" style="height: calc(100vh - 210px);">                                                                                                               
    <div style="height: 100%; flex-grow: 1;" 
    id="tabulatorEmails" 
    phx-update="ignore" 
    phx-hook="Tabulator" 
    data-columns={Jason.encode!(@columns)}>                                  
    </div>                                                                                                                                                                            
</div>


