<div class="mb-6 flex gap-3 flex-row items-center justify-between">
  <div class="flex gap-3 items-center">
    <.link navigate={~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-4">
      Media Profile #<%= @media_profile.id %>
    </h2>
  </div>

  <nav>
    <.link navigate={~p"/media_profiles/#{@media_profile}/edit"}>
      <.button color="bg-primary" rounding="rounded-full">
        <.icon name="hero-pencil-square" class="mr-2" /> Edit Media Profile
      </.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">
    <div class="flex flex-col gap-10 dark:text-white">
      <h3 class="font-bold text-xl">Attributes</h3>
      <.list_items_from_map map={Map.from_struct(@media_profile)} />
    </div>
  </div>
</div>
