<div class="mb-6 flex gap-3 flex-row items-center justify-between">
  <div class="flex gap-3 items-center">
    <.link href={~p"/sources/#{@media_item.source_id}"}>
      <.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">
      <%= StringUtils.truncate(@media_item.title, 35) %>
    </h2>
  </div>

  <nav>
    <.link href={~p"/sources/#{@media_item.source_id}/media/#{@media_item}/edit"}>
      <.button color="bg-primary" rounding="rounded-lg">
        <.icon name="hero-pencil-square" class="mr-2" /> Edit
      </.button>
    </.link>
  </nav>
</div>
<div class="rounded-sm border border-stroke bg-white py-5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark px-7.5">
  <div class="max-w-full overflow-x-auto">
    <.tabbed_layout>
      <:tab_append>
        <.button_dropdown text="Actions" class="justify-center w-full sm:w-50">
          <:option>
            <.link
              href={~p"/sources/#{@media_item.source_id}/media/#{@media_item}"}
              method="delete"
              data-confirm="Are you sure you want to delete all files for this media item? This cannot be undone."
            >
              Delete Files
            </.link>
          </:option>
          <:option>
            <.link
              href={~p"/sources/#{@media_item.source_id}/media/#{@media_item}?prevent_download=true"}
              method="delete"
              data-confirm="Are you sure you want to delete all files for this media item and prevent it from re-downloading in the future? This cannot be undone."
            >
              Delete and Ignore
            </.link>
          </:option>
        </.button_dropdown>
      </:tab_append>

      <:tab title="Attributes">
        <div class="flex flex-col gap-10 dark:text-white">
          <%= if media_file_exists?(@media_item) do %>
            <h3 class="font-bold text-xl">Preview</h3>
            <.media_preview media_item={@media_item} />
          <% end %>

          <h2 class="font-bold text-2xl"><%= @media_item.title %></h2>
          <h3 class="font-bold text-xl">Attributes</h3>
          <section>
            <strong>Source:</strong>
            <.inline_link href={~p"/sources/#{@media_item.source_id}"}>
              <%= @media_item.source.custom_name %>
            </.inline_link>
          </section>

          <.list_items_from_map map={Map.from_struct(@media_item)} />
        </div>
      </:tab>
      <:tab title="Tasks">
        <%= if match?([_|_], @media_item.tasks) do %>
          <.table rows={@media_item.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>
