<div class="mb-6 flex gap-3 flex-row items-center justify-between">
  <div class="flex items-center">
    <.link href={~p"/media_profiles"}>
      <.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-2">
      <%= @media_profile.name %>
    </h2>
  </div>

  <nav>
    <.link href={~p"/media_profiles/#{@media_profile}/edit"}>
      <.button color="bg-primary" rounding="rounded-lg">
        <.icon name="hero-pencil-square" class="mr-2" />Edit <span class="hidden sm:inline pl-1">Media Profile</span>
      </.button>
    </.link>
  </nav>
</div>
<div class="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
  <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"/media_profiles/#{@media_profile}"}
              method="delete"
              data-confirm="Are you sure you want to delete this profile and all its sources (leaving files in place)? This cannot be undone."
            >
              Delete Profile
            </.link>
          </:option>
          <:option>
            <.link
              href={~p"/media_profiles/#{@media_profile}?delete_files=true"}
              method="delete"
              data-confirm="Are you sure you want to delete this profile, all its sources, and its files on disk? This cannot be undone."
              class="mt-5 md:mt-0"
            >
              Delete Profile + Files
            </.link>
          </:option>
        </.button_dropdown>
      </:tab_append>

      <:tab title="Attributes">
        <div class="flex flex-col gap-10 text-white">
          <h3 class="font-bold text-xl">Attributes for "<%= @media_profile.name %>"</h3>
          <.list_items_from_map map={Map.from_struct(@media_profile)} />
        </div>
      </:tab>
      <:tab title="Sources">
        <.table rows={@media_profile.sources} table_class="text-black dark:text-white">
          <:col :let={source} label="Name">
            <%= source.custom_name || source.collection_name %>
          </: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="" 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>
      </:tab>
    </.tabbed_layout>
  </div>
</div>
