<section class="content-header">
    <h1>
        Settings
        <small>manage your organization</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">Organization Name</label>
                            <input type="text" id="name" name="Name" ng-model="model.name" class="form-control"
                                   required api-field ng-readonly="selfHosted" />
                        </div>
                        <div class="form-group" show-errors>
                            <label for="name">Billing Email</label>
                            <input type="email" id="billingEmail" name="BillingEmail" ng-model="model.billingEmail"
                                   class="form-control" required api-field ng-readonly="selfHosted" />
                        </div>
                        <div class="form-group" show-errors>
                            <label for="name">Business Name</label>
                            <input type="text" id="businessName" name="BusinessName" ng-model="model.businessName"
                                   class="form-control" api-field ng-readonly="selfHosted" />
                        </div>
                        <div ng-if="!selfHosted">
                            <hr />
                            <strong>Tax Information</strong>
                            <div>{{model.businessAddress1}}</div>
                            <div>{{model.businessAddress2}}</div>
                            <div>{{model.businessAddress3}}</div>
                            <div>{{model.businessCountry}}</div>
                            <div>{{model.businessTaxNumber}}</div>
                            <p class="help-block">
                                Please <a href="https://bitwarden.com/contact/" target="_blank">contact support</a>
                                to provide (or update) tax information for your invoices.
                            </p>
                        </div>
                    </div>
                    <div class="col-sm-3 settings-photo">
                        <letter-avatar data="{{model.name}}" round="false"
                                       avclass="img-responsive img-rounded" avwidth="200" avheight="200"
                                       fontsize="90"></letter-avatar>
                    </div>
                </div>
            </div>
            <div class="box-footer" ng-if="!selfHosted">
                <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>
            </div>
        </form>
    </div>
    <div class="box box-default">
        <div class="box-header with-border">
            <h3 class="box-title">Import/Export</h3>
        </div>
        <div class="box-body">
            <p>
                Quickly import logins, collections, and other data. You can also export all of your organization's
                vault data in <code>.csv</code> format.
            </p>
        </div>
        <div class="box-footer">
            <button class="btn btn-default btn-flat" type="button" ng-click="import()">Import Data</button>
            <button class="btn btn-default btn-flat" type="button" ng-click="export()">Export Data</button>
        </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="submit" class="btn btn-default btn-flat" ng-click="delete()">
                Delete Organization
            </button>
        </div>
    </div>
</section>