- content_for :page_specific_javascripts do
  = webpack_bundle_tag('prometheus_metrics')

.row.prepend-top-default.append-bottom-default.prometheus-metrics-monitoring.js-prometheus-metrics-monitoring
  .col-lg-3
    %h4.prepend-top-0
      Metrics
    %p
      Metrics are automatically configured and monitored
      based on a library of metrics from popular exporters.
      = link_to 'More information', '#'

  .col-lg-9
    .panel.panel-default.js-panel-monitored-metrics{ data: { "active-metrics" => "#{namespace_project_prometheus_active_metrics_path(@project.namespace, @project)}.json" } }
      .panel-heading
        %h3.panel-title
          Monitored
          %span.badge-count.js-monitored-count 0
      .panel-body
        .loading-metrics.js-loading-metrics
          = icon('spinner spin 3x')
          %p Finding and configuring metrics...
        .empty-metrics.hidden.js-empty-metrics
          = custom_icon('icon_empty_metrics')
          %p No metrics are being monitored. To start monitoring, deploy to an environment.
          = link_to project_environments_path(@project), title: 'View environments', class: 'btn btn-success' do
            View environments
        %ul.metrics-list.hidden.js-metrics-list

    .panel.panel-default.hidden.js-panel-missing-env-vars
      .panel-heading
        %h3.panel-title
          = icon('caret-right lg', class: 'panel-toggle js-panel-toggle', 'aria-label' => 'Toggle panel')
          Missing environment variable(s)
          %span.badge-count.js-env-var-count 0
      .panel-body.hidden
        .flash-container
          .flash-notice
            .flash-text
              To set up automatic monitoring, add the environment variable
              %code
                $CI_ENVIRONMENT_SLUG
              to exporter's queries.
              = link_to 'More information', '#'
        %ul.metrics-list.js-missing-var-metrics-list