{{#if this.wizard}}
  <div class="wizard-header large">
    <Input
      @value={{this.wizard.name}}
      name="name"
      placeholder={{i18n "admin.wizard.name_placeholder"}}
    />

    <div class="wizard-url">
      {{#if this.wizard.name}}
        {{#if this.copiedUrl}}
          {{d-button
            class="btn-hover pull-right"
            icon="copy"
            label="ip_lookup.copied"
          }}
        {{else}}
          {{d-button
            action=(action "copyUrl")
            class="pull-right no-text"
            icon="copy"
          }}
        {{/if}}
        <a
          href={{this.wizardUrl}}
          target="_blank"
          rel="noopener noreferrer"
        >{{this.wizardUrl}}</a>
      {{/if}}
    </div>
  </div>

  <div class="wizard-basic-details">
    <div class="setting">
      <div class="setting-label">
        <label>{{i18n "admin.wizard.background"}}</label>
      </div>
      <div class="setting-value">
        <Input
          @value={{this.wizard.background}}
          name="background"
          placeholder={{i18n "admin.wizard.background_placeholder"}}
          class="small"
        />
      </div>
    </div>

    <div class="setting">
      <div class="setting-label">
        <label>{{i18n "admin.wizard.theme_id"}}</label>
      </div>
      <div class="setting-value">
        {{combo-box
          content=this.themes
          valueProperty="id"
          value=this.wizard.theme_id
          onChange=(action (mut this.wizard.theme_id))
          options=(hash none="admin.wizard.no_theme")
        }}
      </div>
    </div>
  </div>

  <div class="wizard-header medium">
    {{i18n "admin.wizard.label"}}
  </div>

  <div class="wizard-settings">
    <div class="setting">
      <div class="setting-label">
        <label>{{i18n "admin.wizard.save_submissions"}}</label>
      </div>
      <div class="setting-value">
        <Input @type="checkbox" @checked={{this.wizard.save_submissions}} />
        <span>{{i18n "admin.wizard.save_submissions_label"}}</span>
      </div>
    </div>

    <div class="setting">
      <div class="setting-label">
        <label>{{i18n "admin.wizard.multiple_submissions"}}</label>
      </div>
      <div class="setting-value">
        <Input @type="checkbox" @checked={{this.wizard.multiple_submissions}} />
        <span>{{i18n "admin.wizard.multiple_submissions_label"}}</span>
      </div>
    </div>

    <div class="setting">
      <div class="setting-label">
        <label>{{i18n "admin.wizard.after_signup"}}</label>
      </div>
      <div class="setting-value">
        <Input @type="checkbox" @checked={{this.wizard.after_signup}} />
        <span>{{i18n "admin.wizard.after_signup_label"}}</span>
      </div>
    </div>

    <div class="setting">
      <div class="setting-label">
        <label>{{i18n "admin.wizard.prompt_completion"}}</label>
      </div>
      <div class="setting-value">
        <Input @type="checkbox" @checked={{this.wizard.prompt_completion}} />
        <span>{{i18n "admin.wizard.prompt_completion_label"}}</span>
      </div>
    </div>

    <div class="setting full-inline">
      <div class="setting-label">
        <label>{{i18n "admin.wizard.after_time"}}</label>
      </div>
      <div class="setting-value">
        <Input @type="checkbox" @checked={{this.wizard.after_time}} />
        <span>{{i18n "admin.wizard.after_time_label"}}</span>
        {{d-button
          action=(action "setNextSessionScheduled")
          translatedLabel=this.nextSessionScheduledLabel
          class="btn-after-time"
          icon="far-calendar"
        }}
      </div>
    </div>

    {{#wizard-subscription-container}}
      <div class="setting">
        <div class="setting-label">
          <label>{{i18n "admin.wizard.required"}}</label>
        </div>
        <div class="setting-value">
          <Input @type="checkbox" @checked={{this.wizard.required}} />
          <span>{{i18n "admin.wizard.required_label"}}</span>
        </div>
      </div>

      <div class="setting">
        <div class="setting-label">
          <label>{{i18n "admin.wizard.restart_on_revisit"}}</label>
        </div>
        <div class="setting-value">
          <Input @type="checkbox" @checked={{this.wizard.restart_on_revisit}} />
          <span>{{i18n "admin.wizard.restart_on_revisit_label"}}</span>
        </div>
      </div>

      <div class="setting full field-mapper-setting">
        <div class="setting-label">
          <label>{{i18n "admin.wizard.permitted"}}</label>
        </div>
        <div class="setting-value">
          {{wizard-mapper
            inputs=this.wizard.permitted
            options=(hash
              context="wizard"
              inputTypes="assignment,validation"
              groupSelection="output"
              guestGroup=true
              userFieldSelection="key"
              textSelection="value"
              inputConnector="and"
            )
          }}
        </div>
      </div>

      <div class="setting full">
        <div class="setting-label">
          <label>{{i18n "admin.wizard.after_time_groups.label"}}</label>
        </div>
        <div class="setting-value">
          <GroupChooser
            @content={{this.site.groups}}
            @value={{this.afterTimeGroupIds}}
            @onChange={{this.setAfterTimeGroups}}
          />
          <div class="setting-gutter">
            {{i18n "admin.wizard.after_time_groups.description"}}
          </div>
        </div>
      </div>
    {{/wizard-subscription-container}}
  </div>

  {{wizard-links
    itemType="step"
    current=this.currentStep
    items=this.wizard.steps
  }}

  {{#if this.currentStep}}
    {{wizard-custom-step
      step=this.currentStep
      wizard=this.wizard
      currentField=this.currentField
      wizardFields=this.wizardFields
      fieldTypes=this.filteredFieldTypes
      subscribed=this.subscribed
    }}
  {{/if}}

  {{wizard-links
    itemType="action"
    current=this.currentAction
    items=this.wizard.actions
    generateLabels=true
  }}

  {{#each this.wizard.actions as |wizardAction|}}
    {{wizard-custom-action
      action=wizardAction
      currentActionId=this.currentAction.id
      wizard=this.wizard
      apis=this.apis
      removeAction="removeAction"
      wizardFields=this.wizardFields
      fieldTypes=this.filteredFieldTypes
    }}
  {{/each}}

  <div class="admin-wizard-buttons">
    <button
      {{action "save"}}
      disabled={{this.disableSave}}
      class="btn btn-primary"
      type="button"
    >
      {{i18n "admin.wizard.save"}}
    </button>

    {{#unless this.creating}}
      <button {{action "remove"}} class="btn btn-danger remove" type="button">
        {{d-icon "far-trash-alt"}}{{i18n "admin.wizard.remove"}}
      </button>
    {{/unless}}

    {{conditional-loading-spinner condition=this.saving size="small"}}

    {{#if this.error}}
      <span class="error">{{d-icon "times"}}{{this.error}}</span>
    {{/if}}
  </div>
{{/if}}