<section class="flex min-h-full items-center justify-center flex-col">
  <form class="flex h-full items-center justify-center flex-col w-full md:w-3/4 lg:w-1/2 p-10">
    <marquee class="m-2 text-4xl font-bold">
      <%= @deps.title %>
    </marquee>
    <div>
      <%= for button <- ["previous_track", (if @deps.pause, do: "play", else: "pause"), "next_track"] do %>
        <button
          phx-click={button}
          type="button"
          class="text-sm sm:text-xl sm:m-4 min-h-[5em] min-w-[5em] rounded-lg bg-gray-300 hover:bg-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 shadow-md dark:shadow-gray-600 relative border-2 border-blue-300 text-orange-600"
        >
          <div class={"icon mt-[-35%] #{button}"}>
            <i />
          </div>
        </button>
      <% end %>
    </div>
    <input
      class="w-full rounded-full mt-2 bg-blue-300 text-blue-600 text-lg h-[0.7em] shadow-xl dark:shadow-gray-600"
      name="position"
      type="range"
      min="0"
      max={@deps.duration}
      value={@deps.position}
      phx-change="set_position"
    />
    <div class="w-full mt-7 text-xl flex items-center justify-center">
      <span class="mb-1">&#128264;</span>
      <input
        class="w-3/4 rounded-full bg-orange-300 text-orange-600 mx-2 h-[1em] shadow-lg dark:shadow-gray-800"
        name="volume"
        type="range"
        min="0"
        max="100"
        value={@deps.volume}
        phx-change="set_volume"
      />
      <span class="mb-1">&#128266;</span>
    </div>
  </form>
</section>
