<div class="mb-6 flex gap-3 flex-row items-center justify-between">
  <h2 class="text-title-md2 font-bold text-black dark:text-white">Sources</h2>
  <nav>
    <.link href={~p"/sources/new"}>
      <.button color="bg-primary" rounding="rounded-lg">
        <span class="font-bold mx-2">+</span> New <span class="hidden sm:inline pl-1">Source</span>
      </.button>
    </.link>
  </nav>
</div>

<div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
  <div class="max-w-full overflow-x-auto">
    <div class="flex flex-col gap-10 min-w-max">
      <.table rows={@sources} table_class="text-black dark:text-white">
        <:col :let={source} label="Name">
          <.subtle_link href={~p"/sources/#{source.id}"}>
            <%= source.custom_name || source.collection_name %>
          </.subtle_link>
        </:col>
        <:col :let={source} label="Type"><%= source.collection_type %></:col>
        <:col :let={source} label="Should Download?">
          <.icon name={if source.download_media, do: "hero-check", else: "hero-x-mark"} />
        </:col>
        <:col :let={source} label="Retention">
          <%= if source.retention_period_days && source.retention_period_days > 0 do %>
            <%= source.retention_period_days %> day(s)
          <% else %>
            <span class="text-lg">∞</span>
          <% end %>
        </:col>
        <:col :let={source} label="Media Profile">
          <.subtle_link href={~p"/media_profiles/#{source.media_profile_id}"}>
            <%= source.media_profile.name %>
          </.subtle_link>
        </:col>
        <:col :let={source} label="" class="flex place-content-evenly">
          <.icon_link href={~p"/sources/#{source.id}"} icon="hero-eye" class="mx-1" />
          <.icon_link href={~p"/sources/#{source.id}/edit"} icon="hero-pencil-square" class="mx-1" />
        </:col>
      </.table>
    </div>
  </div>
</div>
