<div class="project-management">
  <section class="section-panel">
    <div class="container-fluid">
      <div class="row padded">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <ui-select class="project-description" ng-model="vis.dataService.currentProject"
              ng-change="vis.dataService.setSelectedProject()"
              ng-disabled="vis.dataService.loading">
            <ui-select-match>
              <span ng-bind="$select.selected.short_description"></span>
            </ui-select-match>
            <ui-select-choices repeat="item in (vis.dataService.allProjects | toArray | filter: $select.search) track by item.id">
              <span ng-bind="item.short_description"></span>
            </ui-select-choices>
          </ui-select>
          <div class="project-actions" ng-show="vis.dataService.currentProject.id">
            <button type="button" ng-disabled="vis.dataService.loading" ng-click="vis.createSubsequentTasks()" class="btn btn-default">
              Create subsequent tasks
            </button>
            <button type="button" ng-disabled="vis.dataService.loading" ng-click="vis.showSlackActions()" class="btn btn-default">
              Edit Slack users
            </button>
            <button type="button" ng-disabled="vis.dataService.loading" ng-click="vis.showProjectData()" class="btn btn-default">
              View project data
            </button>
            <a ng-href="{{vis.dataService.data.project.admin_url}}" ng-disabled="vis.dataService.loading" target="_blank">
              <button type="button" class="btn btn-default">View in admin</button>
            </a>
            <button ng-click="vis.endProject()" class="btn btn-danger">Abort project</button>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <div class="vis-wrapper" ng-show="vis.dataService.currentProject.id">
            <div class="overlay" ng-if="vis.dataService.loading">
              <div class="spinner"></div>
            </div>
            <div class="freeze-pane-left">
              <div class="scale-buttons">
                <button ng-click="vis.axis.relativeTime = !vis.axis.relativeTime; vis.draw()"
                        class="btn btn-default btn-sm">
                  Switch to {{vis.axis.relativeTime ? 'local' : 'relative'}} time
                </button>
                <button ng-click="vis.params.scaleWidth = vis.params.scaleWidth / 1.1; vis.draw()"
                        class="btn btn-default btn-sm">
                  -
                </button>
                <button ng-click="vis.params.scaleWidth = vis.params.scaleWidth * 1.1; vis.draw()"
                        class="btn btn-default btn-sm">
                  +
                </button>
              </div>
              <div class="task-names"></div>
            </div>
            <div class="svg-wrapper"></div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
