<navbar model="ctrl.navModel"></navbar>

<div class="page-container" ng-init="ctrl.init()">
  <div class="page-header">
    <div class="plugin-header">
      <span class="plugin-header-logo">
        <img ng-src="{{ctrl.model.info.logos.large}}">
      </span>

      <div class="plugin-header-info-block">
        <h1 class="plugin-header-name">{{ctrl.model.name}}</h1>
        <div class="plugin-header-author">By {{ctrl.model.info.author.name}}</div>
        <div class="plugin-header-stamps">
          <span class="plugin-header-stamps-type">
            <i class="{{ctrl.pluginIcon}}"></i> {{ctrl.model.type}}
          </span>
        </div>
      </div>
    </div>

    <ul class="gf-tabs">
      <li class="gf-tabs-item" ng-repeat="tab in ctrl.tabs">
        <a class="gf-tabs-link" ng-click="ctrl.tabIndex = $index" ng-class="{active: ctrl.tabIndex === $index}">
          {{::tab}}
        </a>
      </li>
    </ul>

  </div>

  <div class="page-body">
    <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
      <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
      </div>
    </div>

    <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Config'">
      <div ng-if="ctrl.model.id">
        <plugin-component type="app-config-ctrl"></plugin-component>

	      <div class="gf-form-button-row">
					<button type="submit" class="btn btn-success" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button>
					<button type="submit" class="btn btn-success" ng-click="ctrl.update()" ng-show="ctrl.model.enabled">Update</button>
					<button type="submit" class="btn btn-danger" ng-click="ctrl.disable()" ng-show="ctrl.model.enabled">Disable</button>
				</div>
      </div>
    </div>

    <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Dashboards'">
			<dashboard-import-list plugin="ctrl.model"></dashboard-import-list>
    </div>

    <aside class="page-sidebar">
      <section class="page-sidebar-section">
        <h4>Version</h4>
        <span>{{ctrl.model.info.version}}</span>
				<div ng-show="ctrl.model.hasUpdate">
          <a ng-click="ctrl.updateAvailable()" bs-tooltip="ctrl.model.latestVersion">Update Available!</a>
				</div>
      </section>
      <section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'">
        <h5>Includes</h4>
        <ul class="ui-list plugin-info-list">
          <li ng-repeat="plug in ctrl.includes" class="plugin-info-list-item">
            <i class="{{plug.icon}}"></i>
            {{plug.name}}
          </li>
        </ul>
      </section>
      <section class="page-sidebar-section">
        <h5>Dependencies</h4>
        <ul class="ui-list plugin-info-list">
          <li class="plugin-info-list-item">
            <img src="public/img/grafana_icon.svg"></img>
            Grafana {{ctrl.model.dependencies.grafanaVersion}}
          </li>
          <li ng-repeat="plugDep in ctrl.model.dependencies.plugins" class="plugin-info-list-item">
            <i class="{{plugDep.icon}}"></i>
            {{plugDep.name}} {{plugDep.version}}
          </li>
        </ul>
      </section>
      <section class="page-sidebar-section">
        <h5>Links</h4>
        <ul class="ui-list">
          <li ng-repeat="link in ctrl.model.info.links">
            <a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
          </li>
        </ul>
      </section>
    </aside>
  </div>
</div>
