defmodule Liliform.Page do
  use Liliform.Component
  import Liliform.Block
  import Liliform.Icon
  import Liliform.Panel
  import Liliform.Control

  @doc """
  Renders a panel as page.
  """
  attr :name, :string, required: true, doc: "page name"
  attr :class, :string, default: "", doc: "additional classes"
  attr :filters, :list, default: [], doc: "filters"
  attr :query, :string, default: "", doc: "search query"
  attr :rest, :global

  slot :inner_block, required: true

  def page(assigns) do
    assigns =
      assigns
      |> set_bulma_classes()

    ~H"""
    <.block class="px-2 py-4">

    <.panel class={@class} {@rest} is-info>
      <.panel_heading>
        <%= @name %>
      </.panel_heading>

      <.panel_tabs is-hidden-mobile>
        <%= for filter <- @filters do %>
          <a
            class={if filter.active, do: "is-active"}
            phx-click="filter"
            phx-value-key={filter.key}
          >
            <%= filter.title %>
          </a>
        <% end %>
      </.panel_tabs>

      <.panel_tabs is-hidden-tablet>
        <%= for filter <- @filters do %>
          <a
            title={filter.title}
            class={if filter.active, do: "is-active"}
            phx-click="filter"
            phx-value-key={filter.key}
          >
            <.icon for={filter.icon} color="auto" />
          </a>
        <% end %>
      </.panel_tabs>

      <.panel_block>
        <.control has-icons-left>
          <input
            class="input is-info"
            type="text"
            placeholder="Search"
            name="search"
            value={@query}
            phx-keyup="search"
          />
          <.icon for="search" size="1.5rem" aria-hidden="true" is-left />
        </.control>
      </.panel_block>
      <%= render_slot(@inner_block) %>
    </.panel>
    </.block>
    """
  end
end