<div class="card bg-light mb-3">
  <div class="card-body">
    <h5 class="card-title">Search By:</h5>
    <form phx-submit="search" phx-change="search_form_change">
      <div class="form-group">
        <div class="form-check form-check-inline">
          <input name="search[query]" value="uuid" class="form-check-input" type="radio" id="inlineCheckbox1" <%= if @search.query == "uuid", do: "checked" %>>
          <label class="form-check-label" for="inlineCheckbox1">message UUID</label>
        </div>
        <div class="form-check form-check-inline">
          <input name="search[query]" value="correlation_id" class="form-check-input" type="radio" id="inlineCheckbox2" <%= if @search.query == "correlation_id", do: "checked" %>>
          <label class="form-check-label" for="inlineCheckbox2">corrleation ID</label>
        </div>
        <div class="form-check form-check-inline">
          <input name="search[query]" value="message_type" class="form-check-input" type="radio" id="inlineCheckbox3" <%= if @search.query == "message_type", do: "checked" %>>
          <label class="form-check-label" for="inlineCheckbox3">message type</label>
        </div>
      </div>
      <div class="form-group">
        <input name="search[value]" value="<%= @search.value %>" type="text" class="form-control" id="value" placeholder="<%= "search by #{@search.query}"  %>">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
      <span phx-click="clear" class="btn btn-info">Clear</span>
    </form>
  </div>
</div>
