{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0
~}}

<div class="boxed-section">
  <div class="boxed-section-head">
    Job Definition
    {{#if @data.cancelable}}
    <div class="pull-right" style="display: flex">
      <span class="header-toggle">
        <Hds::Form::Toggle::Field
          {{keyboard-shortcut label="Toggle word wrap" action=(action @fns.onToggleWrap) pattern=(array "w" "w") menuLevel=true }}
          checked={{@data.shouldWrap}}
          {{on "change" @fns.onToggleWrap}}
        as |F|>
          <F.Label>Word Wrap</F.Label>
        </Hds::Form::Toggle::Field>
      </span>
      <Tooltip
        @condition={{unless @data.hasSpecification true false}}
        @isFullText={{true}}
        @text="A jobspec file was not submitted when this job was run. You can still view and edit the expanded JSON format."
      >
        <div
          class="job-definition-select
            {{unless @data.hasSpecification ' disabled'}}"
          data-test-select={{@data.view}}
        >
          <button
            class="button is-small is-borderless
              {{if (eq @data.view 'job-spec') 'is-active'}}"
            type="button"
            {{on "click" (fn @fns.onSelect "job-spec")}}
          >
            Job Spec
          </button>
          <button
            class="button is-small is-borderless
              {{if (eq @data.view 'full-definition') 'is-active'}}"
            type="button"
            {{on "click" (fn @fns.onSelect "full-definition")}}
            data-test-select-full
          >
            Full Definition
          </button>
        </div>
      </Tooltip>
        <button
          class="button is-light is-compact pull-right"
          onclick={{@fns.onCancel}}
          type="button"
          data-test-cancel-editing
        >
          Cancel
        </button>
    </div>
    {{/if}}
  </div>
  <div class="boxed-section-body is-full-bleed">
    <div
      data-test-editor
      {{code-mirror
        screenReaderLabel="Job definition"
        content=@data.job._newDefinition
        theme="hashi"
        onUpdate=@fns.onUpdate
        mode=(if (eq @data.format "json") "javascript" "ruby")
        lineWrapping=@data.shouldWrap
      }}
    ></div>
  </div>
  {{#if (eq @data.view "job-spec")}}
    <div class="boxed-section" style="margin-top: 10px">
      <div class="boxed-section-head">
        Edit HCL Variable Values
      </div>
      <div class="boxed-section-body is-full-bleed">
        <div
          class="json-viewer is-variable-editor"
          data-test-variable-editor
          {{code-mirror
            autofocus=false
            screenReaderLabel="HLC Variables for Job Spec"
            content=@data.job._newDefinitionVariables
            theme="hashi"
            onUpdate=@fns.onUpdate
            type="hclVariables"
            mode="ruby"
            lineWrapping=@data.shouldWrap
          }}
        ></div>
      </div>
    </div>
  {{/if}}
</div>
<Hds::ButtonSet class="is-associative buttonset sticky pull-left">
  <Hds::Button
    {{on "click" (perform @fns.onPlan)}}
    disabled={{or @fns.onPlan.isRunning (not @data.job._newDefinition)}}
    data-test-plan
    @text="Plan"
  />
  {{#if @data.job.isNew}}
    <Hds::Button
      @text="Save as template"
      @color="secondary"
      @route="jobs.run.templates.new"
      {{on "click" @fns.onSaveAs}}
      data-test-save-as-template
    />
  {{/if}}
  <Hds::Button
    @text="Save as .nomad.hcl"
    @color="secondary"
    {{on "click" @fns.onSaveFile}}

  />
</Hds::ButtonSet>
