- project = local_assigns.fetch(:project)

.col-lg-3
  %p
    = s_('PrometheusService|Custom metrics require Prometheus installed on a cluster with environment scope "*" OR a manually configured Prometheus to be available.')
    = link_to s_('PrometheusService|More information'), help_page_path('operations/metrics/index.md', anchor: 'adding-custom-metrics'), target: '_blank', rel: "noopener noreferrer"

.col-lg-9
  .card.custom-monitored-metrics.js-panel-custom-monitored-metrics{ data: { qa_selector: 'custom_metrics_container', active_custom_metrics: project_prometheus_metrics_path(project), environments_data: environments_list_data, service_active: "#{@service.active}" } }
    .card-header
      %strong
        = s_('PrometheusService|Custom metrics')
      -# haml-lint:disable NoPlainNodes
      %span.badge.badge-pill.js-custom-monitored-count 0
      -# haml-lint:enable NoPlainNodes
      = link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(project), class: 'btn btn-success js-new-metric-button hidden', data: { qa_selector: 'new_metric_button' }
    .card-body
      .flash-container.hidden
        .flash-warning
          .flash-text
      .loading-metrics.js-loading-custom-metrics
        %p.m-3
          = loading_icon(css_class: 'metrics-load-spinner')
          = s_('PrometheusService|Finding custom metrics...')
      .empty-metrics.hidden.js-empty-custom-metrics
        %p.text-tertiary.m-3.js-no-active-integration-text.hidden
          = s_('PrometheusService|Enable Prometheus to define custom metrics, using either option above')
        %p.text-tertiary.m-3.js-new-metric-text.hidden
          = s_('PrometheusService|No custom metrics have been created. Create one using the button above')
      %ul.list-unstyled.metrics-list.hidden.js-custom-metrics-list