<header>
    <h1>Invite staff users</h1>
    <p>Ghost works best when shared with others. Collaborate, get feedback on your posts &amp; work together on ideas.</p>
</header>

<div><img class="gh-flow-faces" src="assets/img/users.png" alt="" /></div>

<form class="gh-flow-invite" {{action "invite" on="submit"}}>
    <GhFormGroup @errors={{this.errors}} @hasValidated={{this.hasValidated}} @property="users">
        <label for="users">Enter one email address per line, we’ll handle the rest! {{svg-jar "email"}}</label>
        <GhTextarea
            @name="users"
            @required="required"
            @value={{readonly this.users}}
            @input={{action (mut this.users) value="target.value"}}
            @focus-out={{action "validate"}}
        />
    </GhFormGroup>

    <GhTaskButton
        @task={{this.invite}}
        @type="submit"
        @class="gh-btn gh-btn-default gh-btn-lg gh-btn-block {{this.buttonClass}}"
        @successClass=""
        @failureClass=""
        as |task|
    >
        <span>
            {{#if task.isRunning}}
                {{svg-jar "spinner" class="no-margin"}}
            {{else}}
                {{this.buttonText}}
            {{/if}}
        </span>
    </GhTaskButton>
</form>

<button class="gh-flow-skip" {{action "skipInvite"}}>
    I'll do this later, take me to my site!
</button>
