<div class="col-md-12" ng-controller="ViewOfficeController">
    <ul class="breadcrumb">
        <li><a href="#/organization">{{'label.anchor.organization' | translate}}</a></li>
        <li><a href="#/offices">{{'label.anchor.manageoffices' | translate}}</a></li>
        <li class="active">{{office.name}}</li>
    </ul>
    <tabset class="overflowhidden marginbottom0" tabset-name="officeTabset">
        <tab heading="{{'label.heading.general' | translate}}">
            <div class="col-md-12 col-sm-12">
                <div class="row primarydiv">
                    <div class="pull-right">
                        <div class="btn-group">
                            <a href="#/editoffice/{{office.id}}" class="btn btn-primary" has-permission='UPDATE_OFFICE'><i class="icon-edit icon-white"></i>{{
                                'label.button.edit' | translate }}</a>
                        </div>
                    </div>
                </div>
                <h3><strong>{{office.name}}</strong></h3>
                <table class="table-bordered table view-table" style="width: 350px">
                    <tr>
                        <td>{{ 'label.heading.parentoffice' | translate }}</td>
                        <td>{{office.parentName}}</td>
                    </tr>
                    <tr>
                        <td>{{ 'label.heading.openedon' | translate }}</td>
                        <td>{{office.openingDate | DateFormat}}</td>
                    </tr>
                    <tr>
                        <td>{{ 'label.heading.namedecorated' | translate }}</td>
                        <td>{{office.nameDecorated | DotRemove}}</td>
                    </tr>
                    <tr>
                        <td>{{ 'label.heading.officeexternalid' | translate }}</td>
                        <td>{{office.externalId}}</td>
                    </tr>
                </table>
            </div>
        </tab>
        <tab heading="{{officedatatable.registeredTableName}}" ng-repeat="officedatatable in officedatatables"
             select="dataTableChange(officedatatable)" has-permission='READ_{{officedatatable.registeredTableName}}'>
            <div>
                <div class="btn-group pull-right">
                    <a ng-show="datatabledetails.isData" class="btn btn-danger pull-right"
                       ng-click="deleteAll(officedatatable.registeredTableName, office.id)" has-permission='DELETE_{{officedatatable.registeredTableName}}'><i
                            class="icon-trash icon-white"></i>{{'label.button.deleteall' | translate}}</a>
                    <a data-ng-show="showDataTableAddButton"
                       ng-href="#/makedatatableentry/{{officedatatable.registeredTableName}}/{{office.id}}?fromEntity=office"
                       class="btn btn-primary" has-permission='CREATE_{{officedatatable.registeredTableName}}'><i
                            class="icon-plus icon-white"></i>{{'label.button.add' | translate}}</a>
                    <a data-ng-show="showDataTableEditButton"
                       ng-href="#/viewsingledatatableentry/{{officedatatable.registeredTableName}}/{{office.id}}?mode=edit&&fromEntity=office"
                       class="btn btn-primary" has-permission='UPDATE_{{officedatatable.registeredTableName}}'><i
                            class="icon-edit icon-white"></i>{{'label.button.edit' | translate}}</a>
                </div>
                <br>
                <br>

                <div ng-show="datatabledetails.isData">
                    <table class="table" data-ng-show="datatabledetails.isMultirow">
                        <thead>
                        <th ng-repeat="column in datatabledetails.columnHeaders">{{column.columnName | prettifyDataTableColumn}}</th>
                        </thead>
                        <tbody>
                        <tr class="pointer-main" ng-repeat="data in datatabledetails.data">
                            <td class="pointer" ng-repeat="row in data.row track by $index"
                                ng-click="viewDataTable(officedatatable.registeredTableName,data)">{{row}}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="table table-bordered width450px" data-ng-hide="datatabledetails.isMultirow">
                        <tr ng-repeat="value in singleRow">
                            <td class="graybg table-font-nav">{{value.key | prettifyDataTableColumn}}</td>
                            <td><span class="padded-td">{{value.value}}</span></td>
                        </tr>
                    </table>
                </div>
            </div>
        </tab>
    </tabset>
</div>