{{#if this.variablesList}}
  <ul class="variables-list">
    <li>
      <div class="variables--list-item variables--list-item__header">
        <span class="variables--list-item-name">{{t "form.project_variables_settings.variable_name"}}</span>
        <span class="variables--list-item-value">{{t "form.project_variables_settings.variable_value"}}</span>
      </div>
    </li>
    {{#each this.variablesList as |variable|}}
      <ProjectInputVariables::ListItem @variable={{variable}} @isEditing={{eq variable.name this.activeVariable.name}}
        @isCreating={{this.isCreating}} @saveVariableSettings={{this.saveVariableSettings}}
        @deleteVariable={{this.deleteVariable}} />
    {{/each}}
  </ul>
  <Pds::ButtonSet>
    <Pds::Button data-test-input-variables-add-variable disabled={{this.isCreating}} @variant="primary" class="button--add-variable" {{on "click" this.addVariable}}>
      <FlightIcon @name="plus" />{{t "form.project_variables_settings.button_apply"}}
    </Pds::Button>
  </Pds::ButtonSet>
{{else}}
  <Pds::EmptyState as |P|>
    <P.Header>{{t "form.project_variables_settings.empty_state_heading"}}</P.Header>
    <P.Body>
      {{t "form.project_variables_settings.empty_state_content"}}
    </P.Body>
    <P.Footer>
      <Pds::Button data-test-input-variables-add-variable @variant="primary" class="button--add-variable" {{on "click" this.addVariable}}>
        <FlightIcon @name="plus" />{{t "form.project_variables_settings.button_apply"}}
      </Pds::Button>
    </P.Footer>
  </Pds::EmptyState>
{{/if}}
