helix

<div
  class="w-full h-screen bg-base-300"
>
  <div class="mx-auto max-w-3xl bg-base-100 h-full shadow-2xl border-gray-800">

  <%= if !@started do %>

    <div class="flex flex-col px-4 md:px-12">

      <form phx-change="select_graph" class="pt-24">
        <div class="mb-6">
          <label class="label block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="graph">
            <span class="label-text">Choose a graph:</span>
          </label>
          <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" name="graph" id="graphs" >
            <%= for graph <- @graphs do %>
              <option value={graph} ><%= Path.split(graph) |> List.last() |> String.replace(".dot.liquid", "") %></option>
            <% end %>
          </select>
        </div>
      </form>

      <div class="mb-6">
        <button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" phx-click="load_graph">Run Graph</button>
      </div>

      <%= if @load_error do %>
        <div class="">
          <label class="label block mb-2 text-sm font-medium text-gray-900 dark:text-white">
            <span class="label-text">Loading Error:</span>
          </label>
        </div>
        <div class="code text-error font-bold text-sm mb-2 bg-base-200 p-2 rounded-md">
          <%= @load_error %>
        </div>
      <% end %>

        <div class="">
          <label class="label block mb-2 text-sm font-medium text-gray-900 dark:text-white">
            <span class="label-text">Preview:</span>
          </label>
        </div>

        <div class="mb-6 overflow-x text-xs bg-base-200 rounded-md">
          <pre class="code w-full p-2 overflow-x-scroll "><%= @graph_preview %>
          </pre>
        </div>

    </div>

  <% else %>

    <div class="flex flex-col">

      <div class="flex flex-col h-full overflow-y-scroll px-4 md:px-12" id="overflow_box">

        <div class="w-full h-screen">
          <div class="mt-12" class="w-full px-12 max-h-screen" id="all_events" phx-update="append" >
            <%= for event <- @all_events do %>
                <HelixWeb.HelixComponents.render_event event={event} />
            <% end %>
            <%= if Enum.empty?(@all_events) do %>
              <div class="w-full pt-24 mx-auto text-center text-lg">
                Thinking..
              </div>
            <% end %>
          </div>
        <div id="padding" class="h-28"> </div>
        </div>
      </div>

    <div class="mx-auto max-w-3xl border-t-2 border-t-blue-700 border-black w-full fixed bottom-0 flex flex-row">
      <div class="bg-base-200 flex-row w-full p-1 py-8">
        <%= f = form_for :input,
          "#input-form",
          id: "input-form",
          class: "w-full",
          phx_submit: :submit_message,
          phx_change: :message_updated
        %>
        <form class="flex flex-row w-full m-0">
          <div class="flex flex-col w-full">
            <div class="ml-2">
              <%= text_input f,
                :message,
                value: @message,
                placeholder: (if @has_input do "Type input here.." else "This graph has no input." end),
                autofocus: true,
                disabled: !@has_input,
                autocomplete: "off",
                class: "bg-gray-50 border-t border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              %>
            </div>
            <div>
              <div class="mx-2">
                <%= select f, :target,
                    @input_targets,
                    disabled: !@has_input,
                    value: @target,
                    class: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                %>
              </div>
              <div class="mr-2">
                <button disabled={!@has_input} class="text-white w-full bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Send</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>

    </div>

  <% end %>

  </div>
</div>

<div id="scrollbox" phx-hook="Juice"></div>