<section class="content-header">
    <h1>
        Settings
        <small>manage your account</small>
    </h1>
</section>
<section class="content">
    <div class="box box-default">
        <div class="box-header with-border">
            <h3 class="box-title">General</h3>
        </div>
        <form role="form" name="generalForm" ng-submit="generalForm.$valid && generalSave()" api-form="generalPromise"
              autocomplete="off">
            <div class="box-body">
                <div class="row">
                    <div class="col-sm-9">
                        <div class="callout callout-danger validation-errors" ng-show="generalForm.$errors">
                            <h4>Errors have occurred</h4>
                            <ul>
                                <li ng-repeat="e in generalForm.$errors">{{e}}</li>
                            </ul>
                        </div>
                        <div class="form-group" show-errors>
                            <label for="name">Name</label>
                            <input type="text" id="name" name="Name" ng-model="model.profile.name" class="form-control"
                                   required api-field />
                        </div>
                        <div class="form-group">
                            <label for="email">Email - <a href="#" stop-click ng-click="changeEmail()">change</a></label>
                            <input type="text" id="email" ng-model="model.email" class="form-control" readonly />
                        </div>
                        <div class="form-group" show-errors>
                            <label for="culture">Language/Culture</label>
                            <select id="culture" name="Culture" ng-model="model.profile.culture" class="form-control" api-field>
                                <option value="en-US">English (US)</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-3 settings-photo">
                        <letter-avatar data="{{model.profile.name || model.email}}" round="false"
                                       avclass="img-responsive img-rounded" avwidth="200" avheight="200"
                                       fontsize="90"></letter-avatar>
                    </div>
                </div>
            </div>
            <div class="box-footer">
                <button type="submit" class="btn btn-primary btn-flat" ng-disabled="generalForm.$loading">
                    <i class="fa fa-refresh fa-spin loading-icon" ng-show="generalForm.$loading"></i>Save
                </button>
                <button type="button" class="btn btn-default btn-flat" ng-click="changeEmail()">
                    Change Email
                </button>
            </div>
        </form>
    </div>
    <div class="box box-default">
        <div class="box-header with-border">
            <h3 class="box-title">Master Password</h3>
        </div>
        <form role="form" name="masterPasswordForm" ng-submit="masterPasswordForm.$valid && passwordHintSave()"
              api-form="passwordHintPromise" autocomplete="off">
            <div class="box-body">
                <div class="row">
                    <div class="col-sm-9">
                        <div class="callout callout-danger validation-errors" ng-show="masterPasswordForm.$errors">
                            <h4>Errors have occurred</h4>
                            <ul>
                                <li ng-repeat="e in masterPasswordForm.$errors">{{e}}</li>
                            </ul>
                        </div>
                        <div class="form-group" show-errors>
                            <label for="hint">Master Password Hint</label>
                            <input type="text" id="hint" name="MasterPasswordHint" ng-model="model.profile.masterPasswordHint"
                                   class="form-control" api-field />
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-footer">
                <button type="submit" class="btn btn-primary btn-flat" ng-disabled="masterPasswordForm.$loading">
                    <i class="fa fa-refresh fa-spin loading-icon" ng-show="masterPasswordForm.$loading"></i>Save
                </button>
                <button type="button" class="btn btn-default btn-flat" ng-click="changePassword()">
                    Change Master Password
                </button>
            </div>
        </form>
    </div>
    <div class="box box-default">
        <div class="box-header with-border">
            <h3 class="box-title">Web Vault Options</h3>
        </div>
        <form role="form" name="optionsForm" ng-submit="optionsForm.$valid && optionsSave()" autocomplete="off">
            <div class="box-body">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="model.disableWebsiteIcons">
                        Disable Website Icons
                    </label>
                    <p class="help-block">Website Icons provide a recognizable image next to each login item in your vault.</p>
                </div>
            </div>
            <div class="box-footer">
                <button type="submit" class="btn btn-primary btn-flat" ng-disabled="optionsForm.$loading">
                    <i class="fa fa-refresh fa-spin loading-icon" ng-show="optionsForm.$loading"></i>Save
                </button>
            </div>
        </form>
    </div>
    <div class="box box-default">
        <div class="box-header with-border">
            <h3 class="box-title">Organizations</h3>
        </div>
        <div class="box-body" ng-if="!model.organizations || !model.organizations.length">
            No organizations yet for your account.
        </div>
        <div class="list-group" ng-if="model.organizations && model.organizations.length">
            <div class="list-group-item" ng-repeat="org in model.organizations | orderBy: ['name']">
                <div class="btn-group" data-append-to="body">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-cog"></i> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#" stop-click ng-click="leaveOrganization(org)" class="text-red">
                                <i class="fa fa-fw fa-sign-out"></i> Leave
                            </a>
                        </li>
                    </ul>
                </div>
                <a href="#" stop-click ng-click="viewOrganization(org)">
                    <letter-avatar data="{{org.name}}" round="false" avwidth="25" avheight="25"
                                   avclass="img-rounded" fontsize="10"></letter-avatar>
                    {{org.name}}
                    <span class="label bg-gray" ng-if="!org.enabled">DISABLED</span>
                </a>
            </div>
        </div>
        <div class="box-footer">
            <a ui-sref="backend.user.settingsCreateOrg" class="btn btn-default btn-flat">
                Create an Organization
            </a>
        </div>
    </div>
    <div class="box box-danger">
        <div class="box-header with-border">
            <h3 class="box-title">Danger Zone</h3>
        </div>
        <div class="box-body">
            Careful, these actions are not reversible!
        </div>
        <div class="box-footer">
            <button type="button" class="btn btn-default btn-flat" ng-click="sessions()">
                Deauthorize Sessions
            </button>
            <button type="button" class="btn btn-default btn-flat" ng-click="purge()">
                Purge Vault
            </button>
            <button type="button" class="btn btn-default btn-flat" ng-click="delete()">
                Delete Account
            </button>
        </div>
    </div>
</section>