- form_field = local_assigns.fetch(:form_field, nil)
- variable = local_assigns.fetch(:variable, nil)

- id = variable&.id
- variable_type = variable&.variable_type
- key = variable&.key
- value = variable&.value

- id_input_name = "#{form_field}[variables_attributes][][id]"
- destroy_input_name = "#{form_field}[variables_attributes][][_destroy]"
- variable_type_input_name = "#{form_field}[variables_attributes][][variable_type]"
- key_input_name = "#{form_field}[variables_attributes][][key]"
- value_input_name = "#{form_field}[variables_attributes][][secret_value]"

%li.js-row.ci-variable-row{ data: { is_persisted: "#{!id.nil?}" } }
  .ci-variable-row-body.border-bottom
    %input.js-ci-variable-input-id{ type: "hidden", name: id_input_name, value: id }
    %input.js-ci-variable-input-destroy{ type: "hidden", name: destroy_input_name }
    %select.js-ci-variable-input-variable-type.ci-variable-body-item.form-control.select-control.custom-select.table-section.section-15{ name: variable_type_input_name }
      = options_for_select(ci_variable_type_options, variable_type)
    %input.js-ci-variable-input-key.ci-variable-body-item.form-control.gl-form-input.table-section.section-15{ type: "text",
      name: key_input_name,
      value: key,
      placeholder: s_('CiVariables|Input variable key') }
    .ci-variable-body-item.gl-show-field-errors.table-section.section-15.border-top-0.p-0
      .form-control.js-secret-value-placeholder.overflow-hidden{ class: ('hide' unless id) }
        = '*' * 17
      %textarea.js-ci-variable-input-value.js-secret-value.form-control.gl-form-input{ class: ('hide' if id),
        rows: 1,
        name: value_input_name,
        placeholder: s_('CiVariables|Input variable value') }
        = value
      %p.masking-validation-error.gl-field-error.hide
        = s_("CiVariables|Cannot use Masked Variable with current value")
        = link_to sprite_icon('question-o'), help_page_path('ci/variables/index', anchor: 'mask-a-cicd-variable'), target: '_blank', rel: 'noopener noreferrer'
    = render Pajamas::ButtonComponent.new(icon: 'close', button_options: { class: 'js-row-remove-button ci-variable-row-remove-button table-section', 'aria-label': s_('CiVariables|Remove variable row') })