defmodule Liliform.Page do
  use Liliform.Component
  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"""
    <.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"}><%= 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"}>
            <.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>
    """
  end
end