<div class="mb-6 flex gap-3 flex-row items-center justify-between">
  <div class="flex gap-3 items-center">
    <.link navigate={~p"/sources"}>
      <.icon name="hero-arrow-left" class="w-10 h-10 hover:dark:text-white" />
    </.link>
    <h2 class="text-title-md2 font-bold text-black dark:text-white ml-4">
      Source #<%= @source.id %>
    </h2>
  </div>

  <nav>
    <.link navigate={~p"/sources/#{@source}/edit"}>
      <.button color="bg-primary" rounding="rounded-full">
        <.icon name="hero-pencil-square" class="mr-2" /> Edit Source
      </.button>
    </.link>
  </nav>
</div>
<div class="rounded-sm border border-stroke bg-white px-5 py-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5">
  <div class="max-w-full overflow-x-auto">
    <div class="flex flex-col gap-10 dark:text-white">
      <h3 class="mt-14 font-bold text-xl">Relationships</h3>
      <.list>
        <:item title="media_profile">
          <.link
            navigate={~p"/media_profiles/#{@source.media_profile_id}"}
            class="hover:text-secondary duration-200 ease-in-out"
          >
            <%= @source.media_profile.name %>
          </.link>
        </:item>
      </.list>

      <h3 class="font-bold text-xl">Attributes</h3>
      <.list_items_from_map map={Map.from_struct(@source)} />

      <h3 class="font-bold text-xl">Downloaded Media</h3>
      <%= if match?([_|_], @downloaded_media) do %>
        <.table rows={@downloaded_media} table_class="text-black dark:text-white">
          <:col :let={media_item} label="Title">
            <%= StringUtils.truncate(media_item.title, 50) %>
          </:col>
          <:col :let={media_item} label="" class="flex place-content-evenly">
            <.link
              navigate={~p"/sources/#{@source.id}/media/#{media_item.id}"}
              class="hover:text-secondary duration-200 ease-in-out mx-0.5"
            >
              <.icon name="hero-eye" />
            </.link>
          </:col>
        </.table>
      <% else %>
        <p class="text-black dark:text-white">Nothing Here!</p>
      <% end %>

      <h3 class="font-bold text-xl">Pending Media</h3>
      <%= if match?([_|_], @pending_media) do %>
        <.table rows={@pending_media} table_class="text-black dark:text-white">
          <:col :let={media_item} label="Title">
            <%= StringUtils.truncate(media_item.title, 50) %>
          </:col>
          <:col :let={media_item} label="" class="flex place-content-evenly">
            <.link
              navigate={~p"/sources/#{@source.id}/media/#{media_item.id}"}
              class="hover:text-secondary duration-200 ease-in-out mx-0.5"
            >
              <.icon name="hero-eye" />
            </.link>
          </:col>
        </.table>
      <% else %>
        <p class="text-black dark:text-white">Nothing Here!</p>
      <% end %>
    </div>

    <section class="flex flex-col md:flex-row items-center md:justify-around mt-10">
      <.link
        href={~p"/sources/#{@source.id}"}
        method="delete"
        data-confirm="Are you sure you want to delete this source (leaving files in place)? This cannot be undone."
      >
        <.button color="bg-meta-1" rounding="rounded-full">
          Delete Source
        </.button>
      </.link>
      <.link
        href={~p"/sources/#{@source.id}?delete_files=true"}
        method="delete"
        data-confirm="Are you sure you want to delete this source AND it's associated files? This cannot be undone."
        class="mt-5 md:mt-0"
      >
        <.button color="bg-meta-1" rounding="rounded-full">
          Delete Source and Files
        </.button>
      </.link>
    </section>
  </div>
</div>
