{% extends "layout.html" %}

{% block app_name %}browse{% endblock %}
{% block bodyid %}browse{% endblock %}

{% block include_style %}
<link href="{{ url_for('urn:browse.static', filename='css/bootstrap-browse.css') }}" rel="stylesheet"/>
{% for media, css_files in browse_media_css.items() %}
  {% for css_file in css_files %}
    <link href="{{ url_for('static', filename=css_file) }}" media="{{ media }}" type="text/css" rel="stylesheet"/>
  {% endfor %}
{% endfor %}
{% endblock %}

{% block include_script %}
<script type="text/javascript" src="{{ url_for('urn:browse.static', filename='js/apps/browse/app.js') }}"></script>
<script type="text/javascript" src="{{ url_for('urn:browse.static', filename='js/apps/browse/directives.js') }}"></script>
<script type="text/javascript" src="{{ url_for('urn:browse.static', filename='js/apps/browse/filters.js') }}"></script>
<script type="text/javascript" src="{{ url_for('urn:browse.static', filename='js/apps/browse/services.js') }}"></script>
<script type="text/javascript" src="{{ url_for('urn:browse.static', filename='js/apps/browse/controllers.js') }}"></script>
{% for js_file in browse_media_js %}
  <script type="text/javascript" src="{{ url_for('static', filename=js_file) }}"></script>
{% endfor %}
{% endblock %}

{% block templates_js %}
{% raw %}
<script id="menu-module-tooltip" type="text/x-handlebars-template">
    {{name}}({{#each params}}{{this.name}}: {{this.type}}{{#unless @last}}, {{/unless}}{{/each}}) -> {{returns.type}}
</script>
{% endraw %}
{% endblock %}

{% block content %}
<div class="container" ng-controller="MenuCtrl">
  <div class="row">
    <div class="col-sm-3 col-md-3">
      <div class="row">
        <div id="logo-section">
          <div id="logo-loading-box"><div id="logo-loading" ng-show="showSpinner()"></div></div>
          <a id="logo-link" class="title" href="#/" ng-click="goToDashboard()">{{ browse_subtitle }}</a>
        </div>
      </div>
      {% if browse_fork_me_button_enabled %}
      <div id="box-subscribe" class="row box-subscribe">
        <a href="https://github.com/cenobites/flask-jsonrpc" class="btn btn-red btn-subscribe"><i class="icon icon-github icon-large"></i> Fork A Repo</a>
      </div>
      {% endif %}
      <div id="scrollable-sections">
        <ul class="nav nav-tabs nav-stacked">
          <li><a href="#/" ng-click="goToDashboard()" ng-class="{active:routeIs('/')}"><i class="icon icon-home"></i> {{ browse_dashboard_menu_name }}</a></li>
          {% raw %}
          <menu-tree node="packages" on-click="goToModule(item)"></menu-tree>
          {% endraw %}
        </ul><!--/nav-stacked menu-->
      <div id="scrollable-sections-top-shadow"></div>
      <div id="scrollable-sections-bottom-shadow"></div>
      </div>
    </div>

    <div ng-controller="ViewerContainerCtrl" id="viewer-container" data-ng-hide="showContentLoaded" class="col-sm-9 col-md-9" style="min-height: 381px;">
      <div class="row">
        <div id="viewer-header-container">
          <div id="viewer-header">
            <div id="viewer-top-controls-container">
              <div id="viewer-top-controls">
                <span style="color: #777777;">{{ browse_description }}</span>

                <ul class="list-inline pull-right sparkline-box" ng-show="showToolbar">
                  <li ng-show="showToolbarPlayButton">
                    <h4 class="blue"><button ng-click="play()" class="btn btn-blue">Play</button></h4>
                  </li>
                  <li ng-show="showToolbarRerunButton">
                    <h4 class="blue"><button ng-click="rerun()" class="btn btn-blue">Rerun</button></h4>
                  </li>
                  <li>
                    <h4 class="blue"><button ng-click="changeParameters()" class="btn btn-green">Change parameters</button></h4>
                  </li>
                  <li ng-show="showToolbarNotifyButton">
                    <h4 class="green"><button ng-click="notify()" class="btn btn-gold">Notify</button></h4>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="viewer-entries-container" class="row">
        <div class="partials-view" ng-view></div>
      </div>
    </div> <!-- content -->

    <div data-ng-show="showContentLoaded" class="col-sm-9 col-md-9" style="padding-left: 0px; padding-right: 0px;">
      <div id="viewer-header-container">
        <div id="viewer-header">
          <div id="viewer-top-controls-container">
            <div id="viewer-top-controls">
              <span style="color: #777777;"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="loading-content">
        <img alt="loading" src="{{ url_for('urn:browse.static', filename='img/iframe-loader.gif') }}">
        <h1>Just one moment...</h1>
        Please wait while we get your web browsable API information.
        <div> </div>
      </div>
    </div> <!-- loading content -->

</div>
</div> <!-- conteiner -->
{% endblock %}