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

    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header pull-left">
            <ul class="nav navbar-nav" role="tablist">
                <li class="active">
                    <a role="tab" data-toggle="tab" data-name="account" href="#{{settingsAccountContainerId}}">
                        <i class="fas fa-user fa-fw"></i>&nbsp;Account
                    </a>
                </li>
                {{#userData.character}}
                    <li>
                        <a role="tab" data-toggle="tab" data-name="share" href="#{{settingsShareContainerId}}">
                            <i class="fas fa-share-alt fa-fw"></i>&nbsp;Share
                        </a>
                    </li>
                    <li>
                        <a role="tab" data-toggle="tab" data-name="share" href="#{{settingsCharacterContainerId}}">
                            <i class="fas fa-user-cog fa-fw"></i>&nbsp;Character
                        </a>
                    </li>
                {{/userData.character}}
            </ul>
        </div>
    </nav>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="{{settingsAccountContainerId}}">
            {{! account tab ================================================================================================== }}
            <form role="form" class="form-horizontal">

                {{! Username }}
                <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">
                                    <i class="fas fa-fw fa-lg fa-pen pull-right pf-dialog-icon-button collapsed" data-toggle="collapse" data-target="#collapseUsername" aria-expanded="false" aria-controls="collapseUsername"></i>
                                    {{userData.name}}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="collapseUsername" class="collapse">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="name" class="col-sm-3 control-label">New 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" data-username="true" autocomplete="nickname">
                                        <span class="input-group-addon"><i class="fas fa-fw fa-user"></i></span>
                                    </div>
                                    <div class="note help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{! Email }}
                <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="fas fa-fw fa-lg fa-pen pull-right pf-dialog-icon-button collapsed" data-toggle="collapse" data-target="#collapseEmail" aria-expanded="false" aria-controls="collapseEmail"></i>
                                    {{#userData.email}}
                                    {{userData.email}}
                                    {{/userData.email}}
                                    {{^userData.email}}
                                    unknown
                                    {{/userData.email}}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="collapseEmail" class="collapse">
                    <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" required>
                                        <span class="input-group-addon"><i class="fas fa-fw fa-envelope"></i></span>
                                    </div>
                                    <div class="note 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" required>
                                        <span class="input-group-addon"><i class="fas fa-fw fa-envelope"></i></span>
                                    </div>
                                    <div class="note help-block with-errors"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{! Captcha }}
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="col-sm-3 control-label"></label>
                            <div class="col-sm-9">
                                <p id="{{captchaImageWrapperId}}" class="form-control-static">
                                    <i class="fas fa-fw fa-lg fa-sync pull-right pf-dialog-icon-button collapsed"></i>
                                    <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 Captcha" data-placement="right">
                                        <input name="captcha" type="text" class="form-control" id="captcha" placeholder="" data-error="Captcha required" data-minlength="6" maxlength="6" autocomplete="off"  required>
                                        <span class="input-group-addon"><i class="far fa-fw fa-image"></i></span>
                                    </div>
                                    <div class="note 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>
        <div role="tabpanel" class="tab-pane" id="{{settingsShareContainerId}}">
            {{! sharing tab ================================================================================================== }}

            <form role="form" class="form-horizontal">

                <div class="row">
                    <div class="col-sm-11">
                        <blockquote>
                            <p>
                                Before other pilots, corporations or alliances can invite you to their maps, you have to enable the associated option.
                            </p>
                            <small>Check out the "<a href="javascript:void(0);" onclick="$(document).triggerMenuEvent('Manual');">manual</a>" for more information
                            </small>
                        </blockquote>
                    </div>
                </div>

                {{#userData.character}}
                    <h4 class="pf-dynamic-area"><img src="{{ccpImageServer}}/Character/{{id}}_64.jpg">&nbsp;&nbsp;Private maps "<em class="pf-map-type-private">{{name}}</em>"</h4>

                    <div class="form-group">
                        <div class="col-sm-9">
                            <label class="control-label" for="privateSharing">
                                <input id="privateSharing" type="checkbox" name="privateSharing" data-toggle="toggle" value="1" {{#shared}}checked{{/shared}}>
                                &nbsp;map invite for private maps
                            </label>
                        </div>
                        <div class="col-sm-3"></div>
                    </div>

                    {{#corporation}}
                        <h4 class="pf-dynamic-area"><img src="{{ccpImageServer}}/Corporation/{{id}}_64.png">&nbsp;&nbsp;Corporation maps "<em class="pf-map-type-corporation">{{name}}</em>"</h4>

                        {{#hasRightCorporationShare}}
                            <div class="form-group">
                                <div class="col-sm-9">
                                    <label class="control-label" for="corporationSharing">
                                        <input id="corporationSharing" type="checkbox" name="corporationSharing" data-toggle="toggle" value="1" {{#shared}}checked{{/shared}}>
                                        &nbsp;map invite for corporation maps
                                    </label>
                                </div>
                                <div class="col-sm-3"></div>
                            </div>
                        {{/hasRightCorporationShare}}
                        {{^hasRightCorporationShare}}
                            <div class="alert alert-info">
                                <span class="txt-color txt-color-info">Restricted</span>
                                <small>You don´t have the required roles.</small>
                            </div>
                        {{/hasRightCorporationShare}}
                    {{/corporation}}

                    {{#alliance}}
                    <h4 class="pf-dynamic-area"><img src="{{ccpImageServer}}/Alliance/{{id}}_64.png">&nbsp;&nbsp;Alliance maps "<em class="pf-map-type-alliance">{{name}}</em>"</h4>

                    <div class="form-group">
                        <div class="col-sm-9">
                            <label class="control-label" for="allianceSharing">
                                <input id="allianceSharing" type="checkbox" name="allianceSharing" data-toggle="toggle" value="1" {{#shared}}checked{{/shared}}>
                                &nbsp;map invite for alliance maps
                            </label>
                        </div>
                        <div class="col-sm-3"></div>
                    </div>
                    {{/alliance}}

                    <input type="hidden" name="share">

                {{/userData.character}}

            </form>
        </div>
        <div role="tabpanel" class="tab-pane" id="{{settingsCharacterContainerId}}">
            {{! character tab ================================================================================================ }}

            <form role="form" class="form-horizontal">

                {{#userData.character}}
                    <h4 class="pf-dynamic-area"><img src="{{ccpImageServer}}/Character/{{id}}_64.jpg">&nbsp;&nbsp;{{name}}&nbsp;&nbsp;{{{roleLabel}}}</h4>

                    <div class="row">
                        <div class="col-xs-12 col-sm-6">
                            <div class="form-group">
                                <div class="col-sm-offset-1 col-sm-11">
                                    <div class="checkbox checkbox-primary">
                                        <input id="logLocation" name="logLocation" value="1" type="checkbox" {{#logLocation}}checked{{/logLocation}}>
                                        <label for="logLocation">
                                            Auto update current location
                                            <i class="fas fa-fw fa-question-circle pf-help-light" title="show/share current location on map"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xs-12 col-sm-6">
                            <div class="form-group">
                                <div class="col-sm-12">
                                    <div class="checkbox checkbox-warning" {{^characterAutoLocationSelectEnabled}}title="Globally disabled for all characters"{{/characterAutoLocationSelectEnabled}}>
                                        <input id="selectLocation" name="selectLocation" value="1" type="checkbox" {{#selectLocation}}checked{{/selectLocation}} {{^characterAutoLocationSelectEnabled}}disabled{{/characterAutoLocationSelectEnabled}}>
                                        <label for="selectLocation">
                                            Auto select current location
                                            <i class="fas fa-fw fa-question-circle pf-help-light" title="Auto select current system after jump.
                                                Unsaved changes (e.g. system description) will be discarded!"
                                            ></i>
                                            <span class="badge bg-color bg-color-grayDarker txt-color txt-color-warning">beta</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input type="hidden" name="character">

                {{/userData.character}}

            </form>
        </div>
    </div>
</div>