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

    <div class="wizard-url">
      {{#if wizard.name}}
        {{#if 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={{wizardUrl}} target="_blank" rel="noopener noreferrer">{{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=themes
          valueProperty="id"
          value=wizard.theme_id
          onChange=(action (mut 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=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=wizard.permitted
            options=(hash
              context="wizard"
              inputTypes="assignment,validation"
              groupSelection="output"
              guestGroup=true
              userFieldSelection="key"
              textSelection="value"
              inputConnector="and"
            )}}
        </div>
      </div>
    {{/wizard-subscription-container}}
  </div>

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

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

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

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

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

    {{#unless 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=saving size="small"}}

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