- 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
      = s_('PrometheusService|Metrics')
    %p
      = s_('PrometheusService|Metrics are automatically configured and monitored based on a library of metrics from popular exporters.')
      = link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus')

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

    .panel.panel-default.hidden.js-panel-missing-env-vars
      .panel-heading
        %h3.panel-title
          = icon('caret-right lg fw', class: 'panel-toggle js-panel-toggle', 'aria-label' => 'Toggle panel')
          = s_('PrometheusService|Missing environment variable')
          %span.badge.js-env-var-count 0
      .panel-body.hidden
        .flash-container
          .flash-notice
            .flash-text
              = s_("PrometheusService|To set up automatic monitoring, add the environment variable %{variable} to exporter's queries." % { variable: "<code>$CI_ENVIRONMENT_SLUG</code>" }).html_safe
              = link_to s_('PrometheusService|More information'), help_page_path('user/project/integrations/prometheus', anchor: 'metrics-and-labels')
        %ul.list-unstyled.metrics-list.js-missing-var-metrics-list