- 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 }

.row
  .col-lg-12.js-ci-variable-list-section{ data: { save_endpoint: save_endpoint } }
    .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
          = icon('spinner spin')
        = _('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)