<!--
 * Copyright 2015 Google Inc. All Rights Reserved.
 *
 * 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.
 -->
<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <!-- Use a templated HTML printing scriptlet to import common stylesheet. -->
  <?!= include('Stylesheet') ?>
</head>
<body>
  <div id="authorization" class="hidden">
    <p>Please authorize access to your <?= dataSource ?> account to continue.</p>
    <button id="authorize">Authorize</button>
  </div>

  <div id="main" class="hidden">
    <select class="width-100 block" id="report-select">
      <option value="new-report">Create a new report</option>
    </select>

    <div class="width-100 block">
      <label for="report-name">Report name:</label>
      <input class="width-100" id="report-name" value="">
    </div>

    <div class="col-contain block width-100">
      <div class="col-one">
        <label>Column options:</label>
        <select class="col-select" size="14" id="column-options">
        </select>
      </div>
      <div>
        <label>Selected Columns:</label>
        <select class="col-select" size="14" id="columns-selected">
        </select>
      </div>
    </div>

    <div class="width-100 block">
      <input type="checkbox" id="scheduling-checkbox">
      <label for="scheduling-checkbox">Auto-update this report daily</label>
    </div>

    <div class="width-100 block">
      <label for="sheet-name">Imported to sheet:</label>
      <label id="sheet-name" class="">?</label>
    </div>

    <div class="width-100 block">
      <label for="owner-name">Report created by:</label>
      <label id="owner-name" class="small-label">?</label>
    </div>

    <div class="width-100 block">
      <label for="last-run">Last Run on:</label>
      <label id="last-run" class="small-label">?</label>
    </div>

    <div id="button-bar" class="block">
      <button class="create" id="save-report" disabled>Save</button>
      <button class="action" id="run-report" disabled>Run</button>
      <button id="delete-report" disabled>Delete</button>
    </div>

    <div class="sidebar bottom" id="bottom-bar">
      <button id="signout">Sign out</button>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <?!= include('intercom.js') ?>
  <script>
    var isAuthorized = '<?= isAuthorized ?>' == 'true';
    var user = '<?= user ?>';
  </script>
  <?!= include('JavaScript') ?>

</body>
</html>
