<li data-test-input-variables-list-item>
  {{#if (or this.isEditing this.isCreating)}}
    <form class="pds-form" data-test-input-variables-form {{on "submit" this.saveVariable}}>
      <div part="fields" class="card">
        <div class="card-header">
          <h4>{{t "form.project_variables_settings.title"}}</h4>
        </div>
        <fieldset class="pds-formFieldSet">
          <div class="pds-formField">
            <label for="input-variable-name" class="pds-fieldName">
              {{t "form.project_variables_settings.variable_name"}}
            </label>
            <Pds::Input
              @type="text"
              data-test-input-variables-var-name
              id="input-variable-name"
              placeholder={{t "form.project_variables_settings.variable_name_placeholder"}}
              value={{this.variable.name}}
              {{on "input" (pick "target.value" (set this "variable.name"))}}
            />
          </div>
          <div class="pds-formField">
            <label for="input-variable-value" class="pds-fieldName">
              {{t "form.project_variables_settings.variable_value"}}
            </label>
            <div class="pds-formField__input-inline-toggle">
              {{#if this.isHcl}}
                <Pds::Input
                  @type="text"
                  data-test-input-variables-var-hcl
                  id="input-variable-value"
                  placeholder={{t "form.project_variables_settings.variable_value_placeholder"}}
                  value={{this.variable.hcl}}
                  {{on "input" (pick "target.value" (set this "variable.hcl"))}}
                />
              {{else}}
                <Pds::Input
                  @type="text"
                  id="input-variable-value"
                  data-test-input-variables-var-str
                  placeholder={{t "form.project_variables_settings.variable_value_placeholder"}}
                  value={{this.variable.str}}
                  {{on "input" (pick "target.value" (set this "variable.str"))}}
                />
              {{/if}}
              <span class="pds-input-inline-toggle">
                <input
                  type="checkbox"
                  data-test-input-variables-toggle-hcl
                  id="input-variable-hcl"
                  checked={{this.isHcl}}
                  {{on "change" (fn this.toggleHcl this.variable)}}>
                  <label for="input-variable-hcl">HCL</label>
              </span>
            </div>
          </div>
        </fieldset>
        <div class="card-footer">
          <Pds::ButtonSet>
            <Pds::Button
              data-test-input-variables-edit-save
              @variant="primary"
              @type="submit">
              {{t "form.project_variables_settings.button_submit"}}
            </Pds::Button>
            <Pds::Button
              data-test-input-variables-edit-cancel
              @variant="secondary"
              {{on "click"
                (if this.isCreating this.cancelCreate this.cancelEdit)
              }}>
              {{t "form.project_variables_settings.button_cancel"}}
            </Pds::Button>
          </Pds::ButtonSet>
        </div>
      </div>
    </form>
  {{else}}
    <div class="variables--list-item">
      <span class="variables--list-item-name" data-test-input-variables-var-name>{{this.variable.name}}</span>
      <span class="variables--list-item-value" data-test-input-variables-var-value>
        {{#if this.isHcl}}
          <b class="badge" data-test-input-variables-list-item-is-hcl>
            HCL
          </b>
          {{this.variable.hcl}}
        {{else}}
          {{this.variable.str}}
        {{/if}}
      </span>
      <Pds::Dropdown @align="right" as |D|>
        <D.Trigger
          data-test-input-variables-dropdown
          @variant="ghost">
          Actions
        </D.Trigger>
        <D.Dialog >
          <section>
            <Pds::Button
              data-test-input-variables-dropdown-edit
              @variant="secondary"
              {{on "click" (fn this.editVariable this.variable)}}>
              Edit
            </Pds::Button>
            <Pds::Button
              data-test-input-variables-dropdown-delete
              @variant="warning"
              {{on "click" (fn this.deleteVariable this.variable)}}>
              Delete
            </Pds::Button>
          </section>
        </D.Dialog>
      </Pds::Dropdown>
    </div>
  {{/if}}
</li>
