<div class="padded">
  <span ng-if="controller.state === 'INITIAL'">
    <h3>
      Select a report to view.
    </h3>
  </span>

  <span ng-if="controller.reportDesc">
    <h3>
      {{ controller.titleCasedType }}
      |
      {{ controller.reportDesc.title }}
    </h3>

    <h4>
      {{ controller.reportDesc.summary }}
    </h4>

    <span ng-if="controller.reportDesc.type === 'CLIENT'">
      <grr-form-client-label client-label="controller.clientLabel">
      </grr-form-client-label>
    </span>

    <span ng-if="controller.reportDesc.requires_time_range">
      <grr-form-timerange start-time-secs="controller.startTime"
                          duration-secs="controller.duration">
      </grr-form-timerange>
    </span>

    <div ng-if="controller.reportDesc.type === 'CLIENT' ||
                controller.reportDesc.requires_time_range"
         class="controls">
        <button class="btn btn-default" ng-click="controller.refreshReport()">
          Show report
        </button>
    </div>
  </span>

  <span ng-if="controller.state === 'LOADING'">
    <h4>
      Loading...
    </h4>
  </span>

  <span ng-if="controller.state === 'LOADED'">
    <grr-chart typed-data="controller.typedReportData"></grr-chart>
  </span>
</div>
