flo_ui

<%= graph font_size: 20 %>

<%= primitive Scenic.Primitive.Rectangle,
    {10000, 10000},
    id: :clickout,
    input: [:cursor_button],
    hidden: true
%>

<%= primitive Scenic.Primitive.RoundedRectangle,
    {@background_width, @height, 5},
    id: :bg,
    fill: @theme.background,
    input: [:cursor_button]
%>

<%= primitive Scenic.Primitive.RoundedRectangle,
    {@background_width, @background_height, 4},
    id: :dropdown_bg,
    translate: {0, 43},
    hidden: true,
    fill: @theme.background
%>

<%= component FloUI.Scrollable.Container,
    %{
        frame: {@width, @frame_height},
        content: {@width, @content_height}
    },
    id: :scroll_container,
    translate: {0, 50},
    hidden: true,
    scroll_bars: %{
        vertical: %{
            show: @show_vertical_scroll,
            show_buttons: true,
            thickness: 15,
            theme: @opts[:scroll_bar_theme]
        },
        horizontal: %{
            show: false,
            show_buttons: true,
            thickness: 15,
            theme: @opts[:scroll_bar_theme]
        }
    }
do %>
    <%= component FloUI.Dropdown.Items,
        {@items, @selected},
        theme: @theme
    %>
<% end %>

<%= primitive Scenic.Primitive.Text,
    @selected_label,
    id: :selected_label,
    fill: @theme.text,
    translate: {5, 30}
%>

<%= component FloUI.Icon,
    {:flo_ui, "icons/arrow_drop_down_white.png"},
    translate: {@width - 48 / 2, @height / 2 - 48 / 2},
    pin: {48 / 2, 48 / 2},
    id: :icon
%>