- save_endpoint = local_assigns.fetch(:save_endpoint, nil)

- if ci_variable_protected_by_default?
  %p.settings-message.text-center
    - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/README', anchor: 'protected-variables') }
    = s_('Environment variables are configured by your administrator to be %{link_start}protected%{link_end} by default').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }

- if Feature.enabled?(:new_variables_ui, @project || @group, default_enabled: true)
  - is_group = !@group.nil?

  #js-ci-project-variables{ data: { endpoint: save_endpoint,
    project_id: @project&.id || '',
    group: is_group.to_s,
    maskable_regex: ci_variable_maskable_regex,
    protected_by_default: ci_variable_protected_by_default?.to_s,
    aws_logo_svg_path: image_path('aws_logo.svg'),
    aws_tip_deploy_link: help_page_path('ci/cloud_deployment/index.md', anchor: 'deploy-your-application-to-the-aws-elastic-container-service-ecs'),
    aws_tip_commands_link: help_page_path('ci/cloud_deployment/index.md', anchor: 'run-aws-commands-from-gitlab-cicd'),
    aws_tip_learn_link: help_page_path('ci/cloud_deployment/index.md', anchor: 'aws'),
    protected_environment_variables_link: help_page_path('ci/variables/README', anchor: 'protect-a-custom-variable'),
    masked_environment_variables_link: help_page_path('ci/variables/README', anchor: 'mask-a-custom-variable'),
  } }

- else
  .row
    .col-lg-12.js-ci-variable-list-section{ data: { save_endpoint: save_endpoint, maskable_regex: ci_variable_maskable_regex } }
      .hide.alert.alert-danger.js-ci-variable-error-box

      %ul.ci-variable-list
        = render 'ci/variables/variable_header'
        - @variables.each.each do |variable|
          = render 'ci/variables/variable_row', form_field: 'variables', variable: variable
        = render 'ci/variables/variable_row', form_field: 'variables'
      .prepend-top-20
        %button.btn.btn-success.js-ci-variables-save-button{ type: 'button' }
          %span.hide.js-ci-variables-save-loading-icon
            .spinner.spinner-light.mr-1
          = _('Save variables')
        %button.btn.btn-info.btn-inverted.prepend-left-10.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: "#{@variables.size == 0}" } }
          - if @variables.size == 0
            = n_('Hide value', 'Hide values', @variables.size)
          - else
            = n_('Reveal value', 'Reveal values', @variables.size)

- if !@group && @project.group
  .settings-header.border-top.prepend-top-20
    = render 'ci/group_variables/header'
  .settings-content.pr-0
    = render 'ci/group_variables/index'