<div id="{{id}}">

    <div role="tabpanel">
        <ul class="text-center {{navigationClass}} row" role="tablist">
            <li class="col-sm-3 active">
                <a class="btn btn-default btn-circle btn-sm" data-toggle="tab" href="#pf-dialog-settings-account">1</a>
                <h6>Account Setup</h6>
            </li>
            <li class="col-sm-3">
                <a class="btn btn-default btn-circle btn-sm disabled" data-toggle="tab" href="#pf-dialog-settings-api">2</a>
                <h6>API Keys</h6>
            </li>
            <li class="col-sm-3">
                <a class="btn btn-default btn-circle btn-sm disabled" data-toggle="tab" href="#pf-dialog-settings-character">3</a>
                <h6>Characters</h6>
            </li>
            <li class="col-sm-3">
                <a class="btn btn-default btn-circle btn-sm disabled" data-toggle="tab" href="#pf-dialog-settings-done">4</a>
                <h6>Done</h6>
            </li>
        </ul>

        <hr>

        <div class="tab-content">

            {{! account tab ================================================================================================ }}
            <div role="tabpanel" class="tab-pane fade in active" id="pf-dialog-settings-account">
                <form role="form" class="form-horizontal">
                    {{^register}}
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Username</label>
                                    <div class="col-sm-9">
                                        <p class="form-control-static">{{userData.name}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {{/register}}

                    {{#register}}

                        {{#invite}}
                        <div class="alert alert-info" style="margin-bottom: 20px">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><i class="fa fa-close"></i></button>
                            <span class="txt-color txt-color-information">Invite active</span>
                            <small>You need a "Registration Key" to complete registration</small>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="registrationKey" class="col-sm-3 control-label">Registration Key</label>
                                    <div class="col-sm-6">
                                        <div class="input-group" title="Enter your personal registration kay" data-placement="right">
                                            <input name="registrationKey" type="text" class="form-control" id="registrationKey" value="" placeholder="XXXXXX" data-error="Registration key required" data-minlength="40" data-minlength-error="Min. of 40 characters" autocomplete="off" required>
                                            <span class="input-group-addon"><i class="fa fa-fw fa-certificate"></i></span>
                                        </div>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{/invite}}

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="name" class="col-sm-3 control-label">Username</label>
                                    <div class="col-sm-6">
                                        <div class="input-group" title="Choose your unique username" data-placement="right">
                                            <input name="name" type="text" class="form-control" id="name" value="" placeholder="Your username" data-error="Username required" data-minlength="5" data-minlength-error="Min. of 5 characters" autocomplete="nickname" required>
                                            <span class="input-group-addon"><i class="fa fa-fw fa-user"></i></span>
                                        </div>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {{/register}}

                    {{^register}}
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Email</label>
                                    <div class="col-sm-9">
                                        <p class="form-control-static">
                                            <i class="fa fa-fw fa-lg fa-pencil pull-right pf-dialog-icon-button collapsed" data-toggle="collapse" data-target="#collapseEmail" aria-expanded="false" aria-controls="collapseEmail"></i>
                                            {{userData.email}}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {{/register}}

                    <div id="collapseEmail" class="{{^register}}collapse{{/register}}">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="email" class="col-sm-3 control-label">New Email</label>
                                    <div class="col-sm-6">
                                        <div class="input-group" title="Enter your email. It will be kept private!" data-placement="right">
                                            <input name="email" type="email" class="form-control" id="email" value="" placeholder="your@email.com" data-error="Email required" autocomplete="email" {{#register}}required{{/register}} >
                                            <span class="input-group-addon"><i class="fa fa-fw fa-envelope"></i></span>
                                        </div>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="email_confirm" class="col-sm-3 control-label">Confirm Email</label>
                                    <div class="col-sm-6">
                                        <div class="input-group" title="Confirm your email" data-placement="right">
                                            <input name="email_confirm" type="email" class="form-control" id="email_confirm" value="" placeholder="your@email.com" data-error="Email required" data-match="#email" data-match-error="Email fields do not match" autocomplete="email" {{#register}}required{{/register}}>
                                            <span class="input-group-addon"><i class="fa fa-fw fa-envelope"></i></span>
                                        </div>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{^register}}
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Password</label>
                                    <div class="col-sm-9">
                                        <p class="form-control-static">
                                            <i class="fa fa-fw fa-lg fa-pencil pull-right pf-dialog-icon-button collapsed"data-toggle="collapse" data-target="#collapsePassword" aria-expanded="false" aria-controls="collapsePassword"></i>
                                            <i class="fa fa-fw fa-ellipsis-h"></i>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {{/register}}

                    <div id="collapsePassword" class="{{^register}}collapse{{/register}}">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="password" class="col-sm-3 control-label">New Password</label>
                                    <div class="col-sm-6">
                                        <div class="input-group" title="Enter your password. Do not use your EVE password" data-placement="right">
                                            <input name="password" type="password" class="form-control" id="password" placeholder="" data-minlength="6" data-minlength-error="Min. of 6 characters" autocomplete="new-password" {{#register}}required{{/register}}>
                                            <span class="input-group-addon"><i class="fa fa-fw fa-lock"></i></span>
                                        </div>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="password_confirm" class="col-sm-3 control-label">Confirm Password</label>
                                    <div class="col-sm-6">
                                        <div class="input-group" title="Confirm your password" data-placement="right">
                                            <input name="password_confirm" type="password" class="form-control" id="password_confirm" placeholder="" data-minlength="6" data-minlength-error="Min. of 6 characters" data-match="#password" data-match-error="Password fields do not match" autocomplete="new-password" {{#register}}required{{/register}}>
                                            <span class="input-group-addon"><i class="fa fa-fw fa-lock"></i></span>
                                        </div>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label class="col-sm-3 control-label"></label>
                                <div class="col-sm-6">
                                    <p id="{{captchaImageWrapperId}}">
                                        <img id="{{captchaImageId}}" src="">
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label for="captcha" class="col-sm-3 control-label">Captcha</label>
                                    <div class="col-sm-6">
                                        <div class="input-group" title="Enter the characters seen above" data-placement="right">
                                            <input name="captcha" type="text" class="form-control" id="captcha" placeholder="" data-minlength="6" data-minlength-error="Min. of 6 characters" autocomplete="off" required>
                                            <span class="input-group-addon"><i class="fa fa-fw fa-refresh"></i></span>
                                        </div>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="{{formErrorContainerClass}} alert alert-danger" style="display: none;">
                        <span class="txt-color txt-color-danger">Error</span>
                        <small> (important non-critical information)</small>
                    </div>

                </form>
            </div>

            {{! api tab ================================================================================================ }}
            <div role="tabpanel" class="tab-pane fade" id="pf-dialog-settings-api">
                <form role="form" class="form-horizontal">

                    <div class="row">
                        <div class="col-sm-11">
                            <blockquote>
                                <p>
                                    API Key(s) are required to use <em class="pf-brand">pathfinder</em>.
                                    Don't have one? - Create a new key with an empty 'Access Mask' (8).
                                </p>
                                <small>Get your new/custom API Key from
                                    <a href="https://community.eveonline.com/support/api-key/CreatePredefined?accessMask=8" target="_blank">here</a>
                                    and come back to this page.
                                </small>
                            </blockquote>
                        </div>
                    </div>

                    {{#userData.api}}
                        <div class="row {{cloneApiRowClass}}">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label for="keyId" class="col-sm-4 control-label">Key ID</label>
                                    <div class="col-sm-8">
                                        <input name="keyId[]" type="text" value="{{keyId}}" class="form-control" id="keyId" placeholder="123456" data-error="Field is required" data-minlength="4" data-minlength-error="Min. of 4 characters" required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-5">
                                <div class="form-group">
                                    <label for="vCode" class="col-sm-2 control-label">vCode</label>
                                    <div class="col-sm-10">
                                        <input name="vCode[]" type="text" value="{{vCode}}" class="form-control" id="vCode" placeholder="XXXXXXXXXX" data-error="Field is required" data-minlength="64" data-minlength-error="Min. of 64 characters" required>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-3">

                                <button class="btn btn-danger collapsed pull-left {{deleteRowButtonClass}}">
                                    <i class="fa fa-close"></i>
                                </button>

                                <button class="btn btn-default collapsed pull-right {{cloneRowButtonClass}}">
                                    <i class="fa fa-fw fa-plus"></i>&nbsp;add
                                </button>
                            </div>

                        </div>
                    {{/userData.api}}

                    <div class="{{formErrorContainerClass}} alert alert-danger" style="display: none;">
                        <span class="txt-color txt-color-danger">Error</span>
                        <small> (important non-critical information)</small>
                    </div>

                    <div class="{{formWarningContainerClass}} alert alert-warning" style="display: none;">
                        <span class="txt-color txt-color-warning">Warning</span>
                        <small> (important non-critical information)</small>
                    </div>
                </form>
            </div>

            {{! character tab ================================================================================================ }}
            <div role="tabpanel" class="tab-pane fade" id="pf-dialog-settings-character">
                <form role="form" class="form-horizontal">

                </form>
            </div>
            {{! finish tab ================================================================================================ }}
            <div role="tabpanel" class="tab-pane fade" id="pf-dialog-settings-done">
                <form role="form" class="form-horizontal">
                    <h1 style="opacity: 0;" class="text-center txt-color txt-color-green"><strong><i class="fa fa-check fa-lg"></i> Complete</strong></h1>
                    <h5 class="text-center">Click next to finish</h5>
                </form>
            </div>

        </div>

    </div>

</div>