{{#if this.showDeleteLabelModal}}
    <header class="modal-header">
        <h1>{{t "members.Are you sure you want to delete this label?"}}</h1>
    </header>
    <a class="close" href="" title={{t "common.Close"}} {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">{{t "common.Close"}}</span></a>

    <div class="modal-body">
        <p>
            {{{t "members.You're about to delete label \"<strong>{name}</strong>\". This is permanent! We warned you, k?" name=this.label.name}}}
        </p>
    </div>

    <div class="modal-footer">
        <button {{action "closeModal"}} class="gh-btn"><span>{{t "common.Cancel"}}</span></button>
        <GhTaskButton @buttonText={{t "taskButton.Delete"}} @successText={{t "taskButton.Deleted"}} @task={{this.deleteLabel}} @class="gh-btn gh-btn-red gh-btn-icon" />
    </div>
{{else}}

    <header class="modal-header" data-test-modal="label-form">
        <h1>{{if this.label.isNew (t "members.New label") (t "members.Edit label")}}</h1>
    </header>
    {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
    <button class="close" href title={{t "common.Close"}} {{action "closeModal"}} {{action (optional this.noop) on="mouseDown"}}>
        {{svg-jar "close"}}
    </button>

    <div class="modal-body">
        <fieldset>
            <GhFormGroup @errors={{this.label.errors}} @hasValidated={{this.label.hasValidated}} @property="name">
                <label for="label-name" class="fw6 dib">{{t "members.Label name"}}</label>
                <GhTextInput
                    @id="label-name"
                    @value={{this.label.name}}
                    @focus-out={{action "validate" "name" target=this.label}}
                    data-test-input="label-name"
                />
                {{#if this.label.errors}}
                    <GhErrorMessage @errors={{this.label.errors}} @property="name" data-test-error="label-name" />
                {{/if}}
            </GhFormGroup>
        </fieldset>
    </div>

    <div class="modal-footer">
        {{#if this.label.isNew}}
            <button
                class="gh-btn"
                {{action "closeModal"}}
                {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
                {{action (optional this.noop) on="mouseDown"}}
                data-test-button="cancel-label-form"
            >
                <span>{{t "common.Cancel"}}</span>
            </button>
        {{else}}
            <button
                class="gh-btn gh-btn-red gh-btn-icon"
                {{on "click" (action "toggleDeleteLabelModal")}}
                {{on "mousedown" (optional this.noop)}}
                data-test-button="delete-label"
            >
                <span>{{svg-jar "trash"}} {{t "common.Delete"}}</span>
            </button
            >
        {{/if}}

        <GhTaskButton
            @buttonText={{t "taskButton.Save"}}
            @runningText={{t "taskButton.Saving..."}}
            @successText={{t "taskButton.Saved"}}
            @autoReset={{true}}
            @task={{this.saveTask}}
            @taskArgs={{this.label}}
            @class="gh-btn gh-btn-green gh-btn-icon"
            data-test-button="save-label" />
    </div>
{{/if}}