<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="/_flamingo/static/style.css">
    <link rel="shortcut icon" href="" />
  </head>
  <body>
    <div id="ractive"></div>
    <script id="main" type="text/html">
      <div id="main-grid">
        <div id="top">
          <span id="logo" on-click="toggle_overlay">Flamingo</span>
          {{#if log.stats.critical > 0}}
            <span id="critical-errors" on-click="@.fire('log_show', 'critical')">{{log.stats.critical}} Critical Error{{#if log.stats.critical > 1}}s{{/if}}</span>
          {{/if}}
          {{#if log.stats.error > 0}}
            <span id="errors" on-click="@.fire('log_show', 'error')">{{log.stats.error}} Error{{#if log.stats.error > 1}}s{{/if}}</span>
          {{/if}}
          {{#if log.stats.warning > 0}}
            <span id="warnings" on-click="@.fire('log_show', 'warning')">{{log.stats.warning}} Warning{{#if log.stats.warning > 1}}s{{/if}}</span>
          {{/if}}
        </div>
        <div id="overlay"{{#if connected && !settings.overlay.open}} style="display: none;"{{/if}}>
          <div id="status">{{#if connected }}Connected{{else}}Reconnecting{{#dots}}{{.}}{{/}}{{/if}}</div>
          <div id="controls"{{#if !connected}} style="display: none;"{{/if}}>
            <button on-click="@.fire('start_shell')">Start Shell</button>
          </div>
          <div class="tabs"{{#if !connected}} style="display: none;"{{/if}}>
            <div class="left">
              <div class="spacer"></div>
              <div class="tab{{#if settings.overlay.tab == 'meta-data'}} active{{/if}}" on-click="@.set('settings.overlay.tab', 'meta-data')">Meta Data</div>
              <div class="spacer"></div>
              <div class="tab{{#if settings.overlay.tab == 'template-context'}} active{{/if}}" on-click="@.set('settings.overlay.tab', 'template-context')">Template Context</div>
              <div class="spacer"></div>
              <div class="tab{{#if settings.overlay.tab == 'project-settings'}} active{{/if}}" on-click="@.set('settings.overlay.tab', 'project-settings')">Settings</div>
              <div class="spacer"></div>
              <div class="tab{{#if settings.overlay.tab == 'log'}} active{{/if}}" on-click="@.set('settings.overlay.tab', 'log')">Log</div>
              <div class="clearfix"></div>
            </div>
            <div class="middle">
              <div class="spacer"></div>
            </div>
            <div class="right">
              <div class="tab{{#if settings.overlay.tab == 'settings'}} active{{/if}}" on-click="@.set('settings.overlay.tab', 'settings')">Settings</div>
              <div class="spacer"></div>
            </div>
          </div>
          <div id="tab-content">
            {{#if connected}}
              {{#if settings.overlay.tab == 'meta-data'}}
                <div id="meta-data">
                  <table class="attributes">
                    {{#content.meta_data}}
                    <tr>
                      <td class="key">{{.key}}</td>
                      <td class="value"><pre>{{.value}}</pre></td>
                      <td class="type">{{.type}}</td>
                    </tr>
                    {{/}}
                  </table>
                </div>
              {{elseif settings.overlay.tab == 'template-context'}}
                <div id="meta-data">
                  <table class="attributes">
                    {{#content.template_context}}
                    <tr>
                      <td class="key">{{.key}}</td>
                      <td class="value"><pre>{{.value}}</pre></td>
                      <td class="type">{{.type}}</td>
                    </tr>
                    {{/}}
                  </table>
                </div>
              {{elseif settings.overlay.tab == 'project-settings'}}
                <div id="meta-data">
                  <table class="attributes">
                    {{#content.settings}}
                    <tr>
                      <td class="key">{{.key}}</td>
                      <td class="value"><pre>{{.value}}</pre></td>
                      <td class="type">{{.type}}</td>
                    </tr>
                    {{/}}
                  </table>
                </div>
              {{elseif settings.overlay.tab == 'log'}}
                <div id="log">
                  <div class="log">
                    <div class="level">
                      {{#if server_settings.log_level == 10}}
                        DEBUG <input type="checkbox" checked="{{settings.log.level.debug}}" />
                      {{/if}}
                      {{#if server_settings.log_level <= 20}}
                        INFO <input type="checkbox" checked="{{settings.log.level.info}}" />
                      {{/if}}
                      {{#if server_settings.log_level <= 30}}
                        WARNING <input type="checkbox" checked="{{settings.log.level.warning}}" />
                      {{/if}}
                      {{#if server_settings.log_level <= 40}}
                        ERROR <input type="checkbox" checked="{{settings.log.level.error}}" />
                      {{/if}}
                      {{#if server_settings.log_level <= 50}}
                        CRITICAL <input type="checkbox" checked="{{settings.log.level.critical}}" />
                      {{/if}}
                      <div id="log-controls">
                        <button on-click="@.fire('clear_log')">Clear Log</button>
                        <button on-click="@.fire('log_scroll_to_top')">Scroll To Top</button>
                        <button on-click="@.fire('log_scroll_to_bottom')">Scroll To Bottom</button>
                      </div>
                    </div>
                    <div class="sub-grid">
                      {{#if log.logger }}
                        <div class="logger">
                          {{#log.logger:name}}<div><input type="checkbox" checked="{{settings.log.logger[name]}}"/> {{name}}</div>{{/}}
                        </div>
                        <div class="records">
                          <pre>{{#log.records}}{{#if settings.log.logger[.name] && settings.log.level[.level]}}{{#if .level != 'debug'}}<span class="{{.level}}">{{.time}} {{.name}} {{.level}}: {{.message}}</span>{{else}}{{.time}} {{.name}} {{.level}}: {{.message}}{{/if}}
{{/if}}{{/}}</pre><div class="scroll-anchor"></div></div>
                      {{/if}}
                    </div>
                  </div>
                </div>
              {{elseif settings.overlay.tab == 'settings'}}
                <div id="meta-data">
                  <input type="checkbox" checked="{{settings.keyboard_shortcuts}}" /> Keyboard Shortcuts<br/>
                  <br/>
                  <button on-click="@.fire('reset_settings')">Reset Settings</button>
                </div>
              {{/if}}
            {{/if}}
          </div>
        </div>
        <iframe id="content" onLoad="iframe_onload(this);"></iframe>
        <div id="messages">
          {{#messages}}
            <span class="message" on-click="@.fire('hide_message', id)">{{{.message}}}</span><br/>
          {{/}}
        </div>
      </div>
    </script>
    <script src="/_flamingo/settings.js"></script>
    <script src="/_flamingo/static/lib/js.cookie-2.2.1.min.js"></script>
    <script src="/_flamingo/static/lib/ractive.min.js"></script>
    <script src="/_flamingo/static/lib/rpc.js"></script>
    <script src="/_flamingo/static/main.js"></script>
  </body>
</html>
