<div id="modelsBuilder" ng-controller="Umbraco.Dashboard.ModelsBuilderManagementController as vm">

    <umb-box>
        <umb-box-content>

            <div ng-show="!vm.loading" class="pull-right">
                <button type="button" class="btn" ng-click="vm.reload()"><span>Reload</span></button>
            </div>

            <h3 class="bold">Models Builder</h3>

            <umb-load-indicator ng-show="vm.loading"></umb-load-indicator>

            <div ng-show="!vm.loading && vm.dashboard">
                <div ng-bind-html="vm.dashboard.text"></div>

                <div ng-if="vm.dashboard.outOfDateModels">
                    <p>Models are <strong>out-of-date</strong>.</p>
                </div>

                <div ng-if="vm.dashboard.canGenerate">
                    <div ng-if="vm.dashboard.generateCausesRestart">
                        <p style="color: red; font-weight: bold;">Generating models will restart the application.</p>
                    </div>
                    <div ng-show="!vm.generating">
                        <button type="button" ng-click="vm.generate()" class="btn btn-danger">
                            <span>Generate models</span>
                        </button>
                    </div>
                    <div class="umb-loader-wrapper" ng-show="vm.generating">
                        <div class="umb-loader"></div>
                    </div>
                </div>

                <div ng-if="vm.dashboard.lastError" style="margin-top: 32px;" ng-show="!vm.generating">
                    <span style="color: red; font-weight: bold;">Last generation failed with the following error:</span>
                    <pre style="width: 80%; white-space: pre-line; background: #f8f8f8; padding: 4px; font-size: small;">{{vm.dashboard.lastError}}</pre>
                </div>
            </div>

        </umb-box-content>
    </umb-box>

</div>
