<div class="editor-rollback" ng-controller="Umbraco.Editors.RollbackController as vm">

    <umb-editor-view>

        <umb-editor-header
            name="model.title"
            name-locked="true"
            hide-alias="true"
            hide-icon="true"
            hide-description="true">
        </umb-editor-header>

        <umb-editor-container>

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

            <div class="main-content">

                <umb-box class="side-panel">
                    <umb-box-header title-key="rollback_versions">
                        <small>
                            <localize 
                                key="rollback_pagination"
                                tokens="[vm.paginationCount.from, vm.paginationCount.to, vm.paginationCount.total]"
                                watch-tokens="true">
                            </localize>
                        </small>
                    </umb-box-header>

                    <umb-box-content>

                        <div ng-if="model.node.variants.length > 1">
                            <h5 class="mt0"><localize key="general_language">Language</localize></h5>
                            <select
                                class="culture-select input-block-level"
                                ng-model="vm.selectedLanguage"
                                ng-options="variant as variant.displayName for variant in model.node.variants track by variant.language.culture"
                                ng-change="vm.changeLanguage(vm.selectedLanguage)">
                            </select>
                        </div>

                        <div>
                            <div class="current-version">
                                <span class="bold"><localize key="rollback_currentVersion">Current version</localize>: </span>
                                <span>{{vm.currentVersion.name}} (<localize key="rollback_created">Created</localize>: {{vm.currentVersion.createDate}})</span>
                            </div>

                            <div class="umb-table umb-table--condensed">

                                <div class="umb-table-body">
                                    <div class="umb-table-row umb-outline"
                                        ng-repeat="version in vm.previousVersions track by version.versionId"
                                        ng-class="{'-selectable cursor-pointer': !version.currentDraftVersion && !version.currentPublishedVersion,'-selected': version.versionId === vm.previousVersion.versionId }"
                                        ng-click="vm.changeVersion(version)">
                                        <div class="umb-table-cell dn"></div>
                                        <div class="umb-table-cell black">
                                            <div class="flex flex-column">
                                                <div>{{ version.displayValue }}</div>
                                                <div class="version-details">{{version.username}}</div>
                                                <div class="version-details">
                                                    <localize ng-if="version.currentPublishedVersion" key="rollback_currentPublishedVersion">Current version</localize>
                                                    <localize ng-if="version.currentDraftVersion" key="rollback_currentDraftVersion">Current version</localize>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="umb-table-cell umb-table-cell--auto-width">
                                            <umb-button 
                                                style="margin-left: auto;"
                                                button-style="outline"
                                                type="button"
                                                size="xxs"
                                                state="version.pinningState"
                                                action="vm.pinVersion(version, $event)"
                                                label="{{ version.preventCleanup ? 'Enable cleanup' : 'Prevent cleanup' }}">
                                            </umb-button>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <umb-pagination
                            ng-if="vm.totalPages > 0 && !vm.loading"
                            page-number="vm.pageNumber"
                            total-pages="vm.totalPages"
                            on-change="vm.goToPage(pageNumber)">
                        </umb-pagination>

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

                <umb-box class="compare-panel">

                    <umb-box-header ng-if="vm.previousVersion" title="{{vm.previousVersion.displayValue}}"></umb-box-header>

                    <umb-box-content>

                        <umb-load-indicator ng-if="vm.loadingDiff"></umb-load-indicator>

                        <umb-empty-state
                            ng-if="!vm.diff"
                            position="center">
                            <localize key="rollback_headline"></localize>
                        </umb-empty-state>

                        <div ng-if="vm.diff && !vm.loadingDiff" class="diff">
                            
                            <small class="db" style="margin-bottom: 15px;">
                                <localize key="rollback_diffHelp">
                                    This shows the differences between the current version and the selected version<br /><del>Red text</del> will be
                                    removed in the selected version, <ins>green text</ins> will be added
                                </localize>
                            </small>

                            <table class="table table-condensed table-bordered">
                                <tbody>
                                    <tr>
                                        <td class="bold">
                                            <localize key="general_name">Name</localize>
                                        </td>
                                        <td>
                                            <span ng-repeat="part in vm.diff.name track by $id(part)">
                                                <ins ng-if="part.added">{{part.value}}</ins>
                                                <del ng-if="part.removed">{{part.value}}</del>
                                                <span ng-if="!part.added && !part.removed">{{part.value}}</span>
                                            </span>
                                        </td>
                                    </tr>
                                    <tr ng-repeat="property in vm.diff.properties track by property.alias">
                                        <td class="bold">{{property.label}}</td>
                                        <td ng-class="{'pre-line': property.isObject, 'word-wrap': !property.isObject}">
                                            <span ng-repeat="part in property.diff track by $id(part)">
                                                <ins ng-if="part.added">{{part.value}}</ins>
                                                <del ng-if="part.removed">{{part.value}}</del>
                                                <span ng-if="!part.added && !part.removed">{{part.value}}</span>
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>

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

            </div>
        </umb-editor-container>

        <umb-editor-footer>
            <umb-editor-footer-content-right>
                <umb-button
                    type="button"
                    button-style="link"
                    label-key="general_close"
                    shortcut="esc"
                    action="vm.close()">
                </umb-button>
                <umb-button
                    type="button"
                    button-style="success"
                    state="vm.rollbackButtonState"
                    label-key="actions_rollback"
                    disabled="vm.rollbackButtonDisabled"
                    action="vm.rollback()">
                </umb-button>
            </umb-editor-footer-content-right>
        </umb-editor-footer>

    </umb-editor-view>

</div>
