<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
  <div class="rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
    <a href={~p"/media_profiles"} class="mt-4 flex flex-col items-center justify-center">
      <span class="text-md font-medium">Media Profile(s)</span>
      <h4 class="text-title-md font-bold text-white">
        <%= @media_profile_count %>
      </h4>
    </a>
  </div>
  <div class="rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
    <a href={~p"/sources"} class="mt-4 flex flex-col items-center justify-center">
      <span class="text-md font-medium">Source(s)</span>
      <h4 class="text-title-md font-bold text-white">
        <%= @source_count %>
      </h4>
    </a>
  </div>
  <div class="rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
    <span class="mt-4 flex flex-col items-center justify-center">
      <span class="text-md font-medium">Downloaded Media</span>
      <h4 class="text-title-md font-bold text-white">
        <%= @media_item_count %>
      </h4>
    </span>
  </div>
</div>

<div class="rounded-sm border shadow-default border-strokedark bg-boxdark mt-4 p-5">
  <span class="text-2xl font-medium mb-4">History</span>
  <section class="mt-6">
    <%= live_render(@conn, Pinchflat.Pages.HistoryTableLive) %>
  </section>
</div>
