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

- key = variable[0]
- value = variable[1]
- variable_type = variable[2] || "env_var"

- 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
  .ci-variable-row-body.border-bottom
    %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.qa-ci-variable-input-key.form-control.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
      %textarea.js-ci-variable-input-value.js-secret-value.qa-ci-variable-input-value.form-control{ rows: 1,
        name: value_input_name,
        placeholder: s_('CiVariables|Input variable value') }
        = value
    %button.gl-button.btn.btn-default.btn-icon.btn-item-remove.js-row-remove-button.ci-variable-row-remove-button.table-section{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
      = sprite_icon('close')