.gl-mt-3
  .card
    .card-header
      %strong
        = t('sherlock.general')
    %ul.content-list
      %li
        %span.light
          #{t('sherlock.time')}:
        %strong
          = @query.duration.round(4)
          = t('sherlock.milliseconds')
      %li
        - frame = @query.last_application_frame
        %span.light
          #{t('sherlock.origin')}:
        %strong
          - if defined?(BetterErrors)
            = link_to(frame.path, BetterErrors.editor[frame.path, frame.line])
          - else
            = frame.path
        %small.light
          = t('sherlock.line')
          = frame.line

  .card
    .card-header
      .float-right
        %button.js-clipboard-trigger.gl-button.btn.btn-default.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button }
          = sprite_icon('copy-to-clipboard')
        %pre.hidden
          = @query.formatted_query
      %strong
        = t('sherlock.query')
    %ul.content-list
      %li
        .code.js-syntax-highlight.sherlock-code
          :preserve
            #{highlight("#{@query.id}.sql", @query.formatted_query, language: 'sql')}

  .card
    .card-header
      .float-right
        %button.js-clipboard-trigger.gl-button.btn.btn-default.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button }
          = sprite_icon('copy-to-clipboard')
        %pre.hidden
          = @query.explain
      %strong
        = t('sherlock.query_plan')
    %ul.content-list
      %li
        .code.js-syntax-highlight.sherlock-code
          %pre
            %code= @query.explain