<div class="mb-6 flex gap-3 flex-row items-center justify-between">
  <div class="flex gap-3 items-center">
    <.link href={~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.custom_name %>
    </h2>
  </div>

  <nav>
    <.link href={~p"/sources/#{@source}/edit"}>
      <.button color="bg-primary" rounding="rounded-lg">
        <.icon name="hero-pencil-square" class="mr-2" /> Edit <span class="hidden sm:inline pl-1">Source</span>
      </.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">
    <.tabbed_layout>
      <:tab title="Attributes">
        <div class="flex flex-col gap-10 text-white">
          <h3 class="font-bold text-lg">Attributes</h3>
          <section>
            <strong>Media Profile:</strong>
            <.inline_link href={~p"/media_profiles/#{@source.media_profile_id}"}>
              <%= @source.media_profile.name %>
            </.inline_link>
          </section>

          <.list_items_from_map map={Map.from_struct(@source)} />
        </div>

        <section class="flex flex-col md:flex-row items-center md:justify-around mt-10">
          <.link
            href={~p"/sources/#{@source}"}
            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-lg">
              Delete Source
            </.button>
          </.link>
          <.link
            href={~p"/sources/#{@source}?delete_files=true"}
            method="delete"
            data-confirm="Are you sure you want to delete this source and it's files on disk? This cannot be undone."
            class="mt-5 md:mt-0"
          >
            <.button color="bg-meta-1" rounding="rounded-lg">
              Delete Source and Files
            </.button>
          </.link>
        </section>
      </:tab>
      <:tab title="Pending Media">
        <%= if match?([_|_], @pending_media) do %>
          <h4 class="text-white text-lg mb-6">Shows a maximum of 100 media items</h4>
          <.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">
              <.icon_link href={~p"/sources/#{@source.id}/media/#{media_item.id}"} icon="hero-eye" />
            </:col>
          </.table>
        <% else %>
          <p class="text-black dark:text-white">Nothing Here!</p>
        <% end %>
      </:tab>
      <:tab title="Downloaded Media">
        <%= if match?([_|_], @downloaded_media) do %>
          <h4 class="text-white text-lg mb-6">Shows a maximum of 100 media items</h4>
          <.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">
              <.icon_link href={~p"/sources/#{@source.id}/media/#{media_item.id}"} icon="hero-eye" />
            </:col>
          </.table>
        <% else %>
          <p class="text-black dark:text-white">Nothing Here!</p>
        <% end %>
      </:tab>
      <:tab title="Pending Tasks">
        <%= if match?([_|_], @pending_tasks) do %>
          <.table rows={@pending_tasks} table_class="text-black dark:text-white">
            <:col :let={task} label="Worker">
              <%= task.job.worker %>
            </:col>
            <:col :let={task} label="State">
              <%= task.job.state %>
            </:col>
            <:col :let={task} label="Scheduled At">
              <%= Calendar.strftime(task.job.scheduled_at, "%y-%m-%d %I:%M:%S %p %Z") %>
            </:col>
          </.table>
        <% else %>
          <p class="text-black dark:text-white">Nothing Here!</p>
        <% end %>
      </:tab>
    </.tabbed_layout>
  </div>
</div>
