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

{{page-title "Edit template"}}
<section class="section">
    <header class="run-job-header">
        <div>
            <h1 class="title is-3">Edit template</h1>
        </div>
        <TwoStepButton
            data-test-delete
            @alignRight={{true}}
            @idleText="Delete"
            @cancelText="Cancel"
            @confirmText="Yes, Delete Template"
            @inlineText={{true}}
            @confirmationMessage="Are you sure?"
            @awaitingConfirmation={{this.deleteTemplate.isRunning}}
            @disabled={{cannot "destroy variable" namespace="*"}}
            @onConfirm={{perform this.deleteTemplate}}
        />
    </header>
    <form class="new-job-template" autocomplete="off">
        <div class={{if this.system.shouldShowNamespaces "input-dropdown-row"}}>
            <label>
                <span>
                    Template name
                </span>
                <Input
                    @type="text"
                    @value={{this.model.path}}
                    class="input path-input"
                    disabled
                    data-test-template-name
                />
            </label>
            {{#if this.system.shouldShowNamespaces}}
                <label>
                    <span>
                        Namespace
                    </span>
                    <SingleSelectDropdown
                        data-test-namespace-facet
                        @label="Namespace"
                        @selection={{this.model.namespace}}
                        {{!-- This is a read-only. But, we must follow the Component API for options --}}
                        @options={{array (hash key=this.model.namespace label=this.model.namespace)}}
                        @disabled={{true}}
                    />
                </label>
            {{/if}}
        </div>
        <VariableForm::JobTemplateEditor
            @keyValues={{this.model.keyValues}}
            @updateKeyValue={{this.updateKeyValue}}
        />
        <footer class="button-group">
            <Hds::Button @text="Edit" {{on "click" this.save}} data-test-edit-template />
            <Hds::Button @text="Cancel" @route="jobs.run.templates" @color="critical" data-test-cancel-template />
        </footer>
    </form>
</section>
{{#if this.formModalActive}}
    <Hds::Modal
        id="form-modal"
        @onClose={{this.toggleModal}}
        @color="critical"
        data-test-confirmation-modal
        as |M|
    >
        <M.Header>
            Confirm
        </M.Header>
        <M.Body>
            Are you sure you want to delete this template?
        </M.Body>
        <M.Footer as |F|>
        <Hds::ButtonSet>
            <Hds::Button type="submit" @text="Confirm"
            {{on "click" this.deleteTemplateAndClose}}
            data-test-delete-template
            />
            <Hds::Button type="button" @text="Cancel" @color="secondary" {{on "click" F.close}} />
        </Hds::ButtonSet>
        </M.Footer>
    </Hds::Modal>
{{/if}}