- 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
  = render Pajamas::CardComponent.new(header_options: { class: 'gl-display-flex gl-align-items-center' }, body_options: { class: 'gl-p-0' }, card_options: { class: 'gl-mb-5 custom-monitored-metrics js-panel-custom-monitored-metrics', data: { active_custom_metrics: project_prometheus_metrics_path(project), environments_data: environments_list_data, service_active: "#{integration.active}" } }) do |c|
    - c.header do
      %strong
        = s_('PrometheusService|Custom metrics')
      = gl_badge_tag 0, nil, class: 'gl-ml-2 js-custom-monitored-count'
      = link_to s_('PrometheusService|New metric'), new_project_prometheus_metric_path(project), class: 'btn gl-button btn-confirm gl-ml-auto js-new-metric-button hidden'
    - c.body do
      .flash-container.hidden
        .flash-warning
          .flash-text
      .loading-metrics.js-loading-custom-metrics
        %p.m-3
          = gl_loading_icon(inline: true, 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