error_tracker

<div class="my-6">
  <.button type="link" href={dashboard_path(@socket)}>Back to the dashboard</.button>
</div>

<div id="header">
  <p class="text-sm uppercase font-semibold text-gray-300">
    Error #<%= @error.id %> @ <%= format_datetime(@occurrence.inserted_at) %>
  </p>
  <h1 class="my-1 text-2xl font-bold whitespace-nowrap text-ellipsis overflow-hidden">
    (<%= sanitize_module(@error.kind) %>) <%= @error.reason
    |> String.replace("\n", " ")
    |> String.trim() %>
  </h1>
</div>

<div class="grid grid-cols-1 md:grid-cols-4 md:space-x-3 mt-6 gap-2">
  <div class="px-3 md:col-span-3 md:border-r-2 md:border-gray-500 space-y-8">
    <.section title="Full message">
      <pre class="overflow-auto p-4 bg-gray-600"><%= @occurrence.reason %></pre>
    </.section>

    <.section title="Source">
      <pre class="overflow-auto text-sm p-4 bg-gray-600">
        <%= sanitize_module(@error.source_function) %>
        <%= @error.source_line %></pre>
    </.section>

    <.section title="Stacktrace">
      <div class="p-4 bg-gray-600">
        <div class="w-full mb-4">
          <label class="flex justify-end">
            <input
              type="checkbox"
              id="show-app-frames"
              class="ml-2 mr-2 mb-1 mt-1 inline-block"
              phx-click={JS.toggle(to: "#stacktrace tr:not([data-app=#{@app}])")}
            />
            <span class="text-md inline-block">
              Show only app frames
            </span>
          </label>
        </div>

        <div class="overflow-auto">
          <table class="w-100 text-sm" id="stacktrace">
            <tbody>
              <tr :for={line <- @occurrence.stacktrace.lines} data-app={line.application || @app}>
                <td class="px-2 align-top"><pre>(<%= line.application || @app %>)</pre></td>
                <td>
                  <pre><%= "#{sanitize_module(line.module)}.#{line.function}/#{line.arity}" %>
                <%= "#{line.file}.#{line.line}" %></pre>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </.section>

    <.section title="Context">
      <pre class="overflow-auto text-sm p-4 bg-gray-600"><%= Jason.encode!(@occurrence.context, pretty: true) %></pre>
    </.section>
  </div>

  <div class="px-3 md:pl-0 space-y-8">
    <.section title={"Occurrence (#{@total_occurrences} total)"}>
      <form phx-change="occurrence_navigation">
        <select name="occurrence_id" class="text-black w-full">
          <option
            :for={occurrence <- @occurrences}
            value={occurrence.id}
            selected={occurrence.id == @occurrence.id}
          >
            <%= format_datetime(occurrence.inserted_at) %>
          </option>
        </select>
      </form>
    </.section>

    <.section title="Error kind">
      <pre><%= sanitize_module(@error.kind) %></pre>
    </.section>

    <.section title="Last seen">
      <pre><%= format_datetime(@error.last_occurrence_at) %></pre>
    </.section>

    <.section title="First seen">
      <pre><%= format_datetime(@error.inserted_at) %></pre>
    </.section>

    <.section title="Status" title_class="mb-3">
      <.badge :if={@error.status == :resolved} color={:green}>Resolved</.badge>
      <.badge :if={@error.status == :unresolved} color={:red}>Unresolved</.badge>
    </.section>

    <.section>
      <.button :if={@error.status == :unresolved} phx-click="resolve">
        Mark as resolved
      </.button>

      <.button :if={@error.status == :resolved} phx-click="unresolve">
        Mark as unresolved
      </.button>
    </.section>
  </div>
</div>