<!--
  #%L
  thinkbig-ui-feed-manager
  %%
  Copyright (C) 2017 ThinkBig Analytics
  %%
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  
      http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  #L%
  -->
<div ng-controller="FeedDetailsController as vm" class="centered">

    <card-layout class="not-centered" style="" flex="initial" ng-class="{'card-width':vm.cardWidth, 'card-full-width':!vm.cardWidth }">
        <header-section>

            <div class="card-title" flex>Feed Details</div>

        </header-section>

        <body-section transclude-to="body" class="md-padding">

            <md-tabs md-dynamic-height md-border-bottom md-selected="vm.selectedTabIndex">
                <md-tab>
                    <md-tab-label>
                        <div>Details</div>
                    </md-tab-label>
                    <md-tab-body>
                        <md-progress-linear md-mode="indeterminate" ng-if="vm.loadingFeedData"></md-progress-linear>
                        <thinkbig-feed-info ng-if="!vm.loadingFeedData && vm.model.loaded" selected-tab-index="vm.selectedTabIndex"></thinkbig-feed-info>
                        <div ng-if="vm.loadingFeedData" class="layout-padding" style="min-height:200px;height:200px;">Loading Feed</div>
                        <div ng-if="!vm.loadingFeedData && vm.model.loaded == false && vm.loadMessage != '' " class="layout-padding">{{vm.loadMessage}}</div>
                    </md-tab-body>
                </md-tab>
                <md-tab ng-disabled="vm.loadingFeedData">
                    <md-tab-label>
                        <div>Profile</div>
                    </md-tab-label>
                    <md-tab-body>
                        <thinkbig-feed-profile-history ng-if="vm.selectedTabIndex == 1"></thinkbig-feed-profile-history>
                    </md-tab-body>
                </md-tab>
                <md-tab ng-disabled="vm.loadingFeedData">
                    <md-tab-label>
                        <div>Lineage</div>
                    </md-tab-label>
                    <md-tab-body>
                       <thinkbig-feed-lineage  ng-if="vm.selectedTabIndex == 2"></thinkbig-feed-lineage>
                    </md-tab-body>
                </md-tab>
                <md-tab ng-disabled="vm.loadingFeedData">
                    <md-tab-label>
                        <div>SLA</div>
                    </md-tab-label>
                    <md-tab-body>
                        <thinkbig-service-level-agreement view="feed" feed="vm.model" ng-if="vm.selectedTabIndex == 3" new-sla="vm.newSla"></thinkbig-service-level-agreement>
                    </md-tab-body>
                </md-tab>
                <md-tab ng-disabled="true">
                    <md-tab-label>
                        <div>Versions</div>
                    </md-tab-label>
                    <md-tab-body>
                        Version History
                    </md-tab-body>
                </md-tab>
            </md-tabs>
        </body-section>

    </card-layout>

    <card-layout style="max-width:350px;width:350px;min-width:350px;" flex="initial" body-css="md-padding">
        <header-section>
          <div layout="row" layout-align="space-between center">
            <div class="card-title" flex>Feed Summary</div>
            <div layout-align="center center" layout="column">
            <md-menu md-position-mode="target-right target">
              <md-button aria-label="Options" class="md-icon-button" style="margin-top:-10px;margin-right:-10px" ng-click="vm.openFeedMenu($mdOpenMenu, $event)" ng-disabled="vm.loadingFeedData">
                <ng-md-icon icon="more_vert"></ng-md-icon>
              </md-button>
              <md-menu-content width="4">

                <md-menu-item ng-if="vm.model.state == 'ENABLED'" ng-click="vm.disableFeed()">
                  <md-button ng-disabled="(vm.disabling || !vm.allowEdit)">
                    <ng-md-icon icon="not_interested" class="orange"></ng-md-icon>
                    Disable
                  </md-button>
                </md-menu-item>
                <md-menu-item ng-if="vm.model.state != 'ENABLED'"  ng-click="vm.enableFeed()" >
                  <md-button ng-disabled="(vm.enabling || !vm.allowEdit)">
                    <ng-md-icon icon="check_circle" class="orange" md-menu-align-target=""></ng-md-icon>
                    Enable
                  </md-button>
                </md-menu-item>
                <md-menu-item ng-if="vm.model.state != 'ENABLED'" ng-click="vm.confirmDeleteFeed()">
                  <md-button ng-disabled="(vm.enabling || !vm.allowAdmin)">
                    <ng-md-icon icon="delete_forever" class="orange" md-menu-align-target=""></ng-md-icon>
                    Delete...
                  </md-button>
                </md-menu-item>
                <md-menu-divider></md-menu-divider>
                <md-menu-item ng-if="vm.uploadAllowed">
                  <md-button ng-click="vm.showFeedUploadDialog()" ng-disabled="vm.model.state != 'ENABLED'">
                    <ng-md-icon icon="file_upload"  class="primary-color-1"  md-menu-align-target=""></ng-md-icon>
                    Upload...
                  </md-button>
                </md-menu-item>
              </md-menu-content>

            </md-menu>
            </div>
          </div>
          <div layout="column" class="layout-padding-top-bottom">
            <span class="item-title" ng-if="!vm.loadingFeedData">{{vm.model.feedName}}</span>
          </div>
        </header-section>

        <body-section>
            <div layout="column" class="layout-padding-top" ng-if="vm.loadingFeedData">
                Loading Feed ...
            </div>

            <div layout="column" class="layout-padding-top" ng-if="!vm.loadingFeedData">

                <md-progress-linear md-mode="indeterminate" ng-if="vm.enabling || vm.disabling"></md-progress-linear>
                <div layout="column" class="layout-padding-top-bottom">
                    <span ng-class="{'enabled':vm.model.state == 'ENABLED','disabled':vm.model.state == 'DISABLED'}"> {{vm.model.state}}
                      <ng-md-icon
                        style="padding-left:10px" icon="{{vm.model.stateIcon}}" size="20"></ng-md-icon>
                    </span>
                    <span class="hint">State</span>
                </div>
                <div layout="column" class="layout-padding-top-bottom" ng-if="vm.model.dataOwner">
                    <span>{{vm.model.dataOwner}}</span>
                    <span class="hint">Data Owner</span>
                </div>
                <div layout="column" class="layout-padding-top-bottom">
                    <div class="primary-color-1" style="cursor:pointer;" ng-click="vm.onTableClick()">{{vm.model.table.tableSchema.name}}</div>
                    <span class="hint">Table</span>
                </div>
                <div layout="column" class="layout-padding-top-bottom"  ng-if="vm.model.tags">
                    <span ng-repeat="tag in vm.model.tags">
                        {{tag.name}}

                    </span>
                    <span class="hint">Tags</span>
                </div>
                <div layout="column" class="layout-padding-top-bottom">
                    <div layout="row" layout-align="start center" ng-click="vm.onCategoryClick()" class="primary-color-1" style="cursor: pointer;">
                        <span>{{vm.model.category.name}}</span>
                        <ng-md-icon icon="{{vm.model.category.icon}}" style="padding-left:10px;fill:{{vm.model.category.iconColor}}" ng-if="vm.model.category.icon != null"></ng-md-icon>
                        <span flex></span>
                    </div>
                    <span class="hint">Category</span>
                </div>

              <md-divider></md-divider>
              <div layout="column" class="layout-padding-top-bottom" layout-align="space-between start">
                <div class="md-subheader layout-padding-bottom">Operations Manager</div>
                <span class="layout-padding-bottom">
                  <a href ng-click="vm.gotoFeedStats($event)">Operational Statistics</a>
                </span>
                <span class="layout-padding-bottom">
                <a href ng-click="vm.gotoFeedDetails($event)" ng-if="!vm.model.isStream">Operational Job Details</a>
                </span>
              </div>

              <md-divider ng-if="!vm.isNiFiRunning"></md-divider>
              <div layout="row" class="warn layout-padding-top-bottom" ng-if="!vm.isNiFiRunning">
                 <ng-md-icon style="margin:inherit;" class="error" icon="error" size="20"></ng-md-icon>
                 <span class="error">NiFi is not running</span>
              </div>
                <!--
                    <md-button ng-click="addAlert()" class="md-primary" ng-disabled="true" ng-if="vm.allowEdit">
                        ADD ALERT
                    </md-button>

                    <md-button ng-click="vm.addSla()" class="md-primary" ng-disabled="vm.model.state != 'ENABLED'  && !vm.loadingFeedData" ng-if="vm.allowEdit">
                        CREATE SLA
                    </md-button>
                -->
                </div>
            </div>
        </body-section>
    </card-layout>
</div>
