<div ng-if="ctrl.navModel">
  <page-header model="ctrl.navModel"></page-header>

  <div class="page-container page-body">
    <div class="sidebar-container">
      <div class="tab-content sidebar-content" ng-if="ctrl.tab === 'readme'">
        <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
        </div>
      </div>

      <div class="tab-content sidebar-content" ng-if="ctrl.tab === '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-primary" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button>
            <button type="submit" class="btn btn-primary" 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 sidebar-content" ng-if="ctrl.tab === 'dashboards'">
        <dashboard-import-list plugin="ctrl.model"></dashboard-import-list>
      </div>

      <aside class="page-sidebar">
        <section class="page-sidebar-section" ng-if="ctrl.model.info.version">
          <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" ng-if="ctrl.model.info.links">
          <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>
</div>
