<html>
  <head>
    <title>{{name}}</title>
    <link rel="stylesheet" href="{{{static}}}/console.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <link type="image/x-icon" rel="shortcut icon" href="{{{static}}}/favicon.ico">
    <script src="http://code.jquery.com/jquery-1.11.2.js"></script>
    <script src="{{{static}}}/jquery-ui.js"></script>
    <script src="{{{static}}}/URI.js"></script>
  </head>
  <body>
    <div class="toolbar-wrapper">
      <div class="toolbar">
        <div class="preview-uri pane">
          <label for="nav">Preview URI</label>
          <input id="nav" type="text" size="60" value="/"/>
          <button id="newtab" title="Open in a new tab - no console">&#8599;</button>
        </div>
        <div class="pane">
          <label for="samples">Sample Data</label>
          <select name="samples" id="samples" value="default"></select>
        </div>
        <div class="pane">
          <label for="tests">No Tests</label>
            <input type="checkbox" name="tests" id="tests"/>
        </div>
        <div id="testCell" class="pane">
          <label><a href="javascript:showTests()">Test Results</a></label>
          <span id="testResults">...</span>
        </div>
        <div class="pane">
          {{#hasEnvironments}}
            <button id="push">Push Creative</button>
            <select class="environment">
              {{#environments}}
                <option value="{{name}}" data-isprod="{{isProd}}">{{displayName}}</option>
              {{/environments}}
            </select>
          {{/hasEnvironments}}
          {{^hasEnvironments}}
            <div style="font-size:12px;">No form builder environments configured for push</div>
          {{/hasEnvironments}}
        </div>
      </div>
    </div>

    <script src="{{{static}}}/console.js"></script>

    <iframe id="contentFrame">
      Your browser does not support iframes. Bummer.
    </iframe>
    <div id="testDialog">No tests have run</div>
    <div id="messageDialog">
      <ul id="messages"></ul>
    </div>

   </body>

    <script>
    $('#push').click(function() {
      var envOption = $('.environment')[0].selectedOptions[0];
      var envName = envOption.value;
      if (envOption.dataset['isprod'] == 'true') {
        var pushToProd  = confirm('Do you want to publish this creative to production?');
        if (pushToProd !== true) {
            return;
        }
      }
      pushCreative(envName);
    });
    </script>
</html>

