<.popover>
  <.button variant="ghost">
    <.icon name="hero-share icon" /> Share
  </.button>

  <:content>
    <h1 class="text-base text-zinc-700 dark:text-zinc-300 font-semibold mb-1">Share your project</h1>
    <p class="text-sm text-zinc-500 dark:text-zinc-400 mb-4">You've create a new project. Share it with your team.</p>

    <.input name="link" readonly value="https://fluxonui.com" label="Project link">
      <:outer_suffix>
        <.button><.icon name="hero-clipboard-document-list" class="icon" />Copy</.button>
      </:outer_suffix>
    </.input>
  </:content>
</.popover>

<.popover placement="bottom-end" class="w-64">
  <.button variant="ghost">
    <.icon name="hero-adjustments-horizontal" class="icon" /> Table settings
  </.button>
  <:content>
    <h3 class="dark:text-zinc-300 font-medium">Table settings</h3>
    <div class="flex items-center gap-2 text-sm mt-3">
      <.icon name="hero-arrows-up-down" class="text-zinc-700 dark:text-zinc-300 size-4" /> Sort by
      <div class="ml-auto flex items-center gap-2">
        <.select
          native
          value="Name"
          options={["Name", "Date", "Size", "Type", "Modified"]}
          name="sort_by"
          size="sm"
          class="py-1 shadow-none"
        />
      </div>
    </div>
    <div class="flex items-center gap-2 text-sm mt-2">
      <.icon name="hero-view-columns" class="text-zinc-700 dark:text-zinc-300 size-4" /> View
      <div class="ml-auto flex items-center gap-2">
        <.select
          native
          value="List"
          options={["List", "Board", "Calendar", "Timeline"]}
          name="view"
          size="sm"
          class="py-1 shadow-none"
        />
      </div>
    </div>

    <.separator class="my-4" />

    <h3 class="dark:text-zinc-300 font-medium">Columns</h3>

    <div class="flex items-center justify-between mt-3">
      <.label for="name" class="text-zinc-700 dark:text-zinc-300">Name</.label>
      <.switch checked id="name" />
    </div>

    <div class="flex items-center justify-between mt-3">
      <.label for="date" class="text-zinc-700 dark:text-zinc-300">Date</.label>
      <.switch checked id="date" />
    </div>

    <div class="flex items-center justify-between mt-3">
      <.label for="size" class="text-zinc-700 dark:text-zinc-300">Size</.label>
      <.switch checked id="size" />
    </div>

    <.separator class="my-4" />

    <h3 class="dark:text-zinc-300 font-medium">Table Configuration</h3>

    <div class="mt-3 space-y-6">
      <div>
        <.label for="rows_per_page" class="text-sm text-zinc-700 dark:text-zinc-300">
          Rows per page
        </.label>
        <.radio_group name="rows_per_page" class="">
          <:radio value="25" label="25" />
          <:radio value="50" label="50" checked />
          <:radio value="100" label="100" />
        </.radio_group>
      </div>

      <div>
        <.label for="density" class="text-sm text-zinc-700 dark:text-zinc-300">
          Row density
        </.label>
        <.radio_group name="density" class="">
          <:radio value="compact" label="Compact" />
          <:radio value="comfortable" label="Comfortable" checked />
          <:radio value="spacious" label="Spacious" />
        </.radio_group>
      </div>
    </div>
  </:content>
</.popover>

<%!-- Right placement --%>
<.popover placement="right">
  <.button variant="ghost">Top</.button>

  <:content>
    <h3 class="font-semibold text-zinc-700 mb-2 dark:text-zinc-100">Popover title</h3>
    <p class="text-zinc-500 dark:text-zinc-300">Popover content</p>
  </:content>
</.popover>

<%!-- Right placement --%>
<.popover placement="left">
  <.button variant="ghost">Left</.button>

  <:content>
    <h3 class="font-semibold text-zinc-700 mb-2 dark:text-zinc-100">Popover title</h3>
    <p class="text-zinc-500 dark:text-zinc-300">Popover content</p>
  </:content>
</.popover>

<.popover open_on_hover>
  <.button variant="ghost">
    <.icon name="hero-share" class="icon" /> Share
  </.button>

  <:content>
    <h3 class="font-semibold text-zinc-700 mb-2 dark:text-zinc-100">Popover title</h3>
    <p class="text-zinc-500 dark:text-zinc-300">Popover content</p>
  </:content>
</.popover>

<.popover placement="top-end" class="w-80 p-0 shadow-lg bg-zinc-50">
  <button variant="ghost" class="size-10 flex items-center justify-center border rounded-full shadow">
    <span class="text-zinc-500 dark:text-zinc-300 font-semibold">?</span>
  </button>

  <:content>
    <div class="p-4">
      <h3 class="text-zinc-700 dark:text-zinc-300 font-semibold">Help</h3>
      <p class="text-zinc-600 dark:text-zinc-400 text-sm">
        Get help and learn about our platform.
      </p>
    </div>

    <div class="text-zinc-800 border rounded-lg p-4 -m-px bg-white">
      <h4 class="text-zinc-700 font-semibold text-sm mb-2">Quick Help</h4>
      <p class="text-zinc-600 dark:text-zinc-400 text-sm">
        Start by exploring our docs, check the help center, or view recent changelog updates. Support team ready to assist you.
      </p>

      <h3 class="text-zinc-700 dark:text-zinc-300 font-semibold mt-6 text-sm">Explore further</h3>

      <ul class="space-y-2 mt-4 text-sm">
        <li>
          <a href="" class="inline-flex items-center gap-2">
            <.icon name="hero-question-mark-circle" class="font-medium text-zinc-600" /> Help Center
          </a>
        </li>
        <li>
          <a href="" class="inline-flex items-center gap-2">
            <.icon name="hero-book-open" class="font-medium text-zinc-600" /> Documentation
          </a>
        </li>
        <li>
          <a href="" class="inline-flex items-center gap-2">
            <.icon name="hero-sparkles" class="font-medium text-zinc-600" /> Changelog
          </a>
        </li>
      </ul>
    </div>
    <p class="text-zinc-500 dark:text-zinc-400 text-sm px-4 py-2">
      If you still need help, please <a href="" class="underline">contact us</a>.
    </p>
  </:content>
</.popover>