{% extends "base.html" %}

{% block title %}
Stackalytics {% if page_title %}| {{ page_title }} {% endif %}
{% endblock %}

{% block head %}

<script type="text/javascript">
    $(document).ready(function () {
        initSelectors("");
    });

    $(function () {
        $(document).tooltip();
    });
</script>

{% block scripts %}{% endblock %}

{% endblock %}

{% block body %}

    <div class="page">
        {% if not runtime_storage_update_time %}
            <div class="banner">The data is being loaded now and is not complete</div>
            {% set update_time_title = '' %}
        {% else %}
            {% if runtime_storage_update_time is too_old %}
                <div class="banner">The data was last updated on {{ runtime_storage_update_time_str }}</div>
            {% endif %}
            {% set update_time_title = 'Last updated on ' + runtime_storage_update_time_str %}
        {% endif %}
    <div class="aheader">
        <div style="float: right; margin-top: 10px; margin-right: 20px;">
            <a href="https://wiki.openstack.org/wiki/Stackalytics" target="_blank" title="{{ update_time_title }}">About</a>
        </div>
        <div id="analytics_header">
            <div style="float: left;">
                <span id="logo"><a href="{{ url_for('overview') }}"><img src="{{ url_for('static', filename='images/stackalytics_logo.png') }}" alt="Stackalytics" style="width: 100%; max-width: 190px;"></a></span>
            </div>
            <div class="stackamenu" style="margin-left: 240px">
                <ul id="menu-stackamenu">
                    <li class="menu-item current-menu-item"><a href="/"><span class="icon-pie"></span>Code Contribution</a></li>
                    <li class="menu-item"><a href="/report/driverlog"><span class="icon-cogs"></span>Vendor Drivers <sup><small>&beta;</small></sup></a></li>
                    <li class="menu-item"><a href="/report/members"><span class="icon-users"></span>Member Directory</a></li>
                </ul>
            </div>
        </div>

        <div class="drops">

            <div class="drop">
                <label for="release_selector" title="Official releases of OpenStack">Release</label>
                <input type="hidden" id="release_selector" style="width: 140px" data-placeholder="Select release"/>
            </div>

            <div class="drop">
                <label for="project_type_selector" title="Project type groups modules of same kind: official (integrated-release, other) or belonging to same organization (openstack, stackforge)">Project Type</label>
                <input type="hidden" id="project_type_selector" style="width: 140px" data-placeholder="Select project type"/>
            </div>

            <div class="drop">
                <label for="module_selector" title="Module represents a repo (black), official project (violet) or pre-configured group of modules (cyan)">Module</label>
                <input type="hidden" id="module_selector" style="width: 140px" data-placeholder="Any module"/>
            </div>

            <div class="drop">
                <label for="company_selector" title="Company name">Company</label>
                <input type="hidden" id="company_selector" style="width: 140px" data-placeholder="Any company"/>
            </div>

            <div class="drop">
                <label for="user_id_selector" title="Name of contributor as configured in Launchpad or default_data.json">Contributor</label>
                <input type="hidden" id="user_id_selector" style="width: 140px" data-placeholder="Any contributor"/>
            </div>

            <div class="drop">
                <label for="metric_selector" title="One of available metrics">Metric</label>
                <input type="hidden" id="metric_selector" style="width: 140px" data-placeholder="Select metric"/>
            </div>

        </div>
    </div>

    <div class="navigation">
        <div id="timeline" style="width: 100%; height: 120px; margin-top: 15px;"></div>
    </div>

    <div>
        {% block report_options %}{% endblock %}
    </div>

    <table style="width: 100%" cellspacing="0">
        <tr>
            <td style="width: 50%; vertical-align: top;">
                <div class="body" style="margin-right: 1em;">
                    {% block left_frame %}{% endblock %}
                </div>
            </td>
            <td style="width: 50%; vertical-align: top;">
                <div class="body" style="margin-left: 1em;">
                    {% block right_frame %}{% endblock %}
                </div>
            </td>
        </tr>
    </table>

</div>
{% endblock %}
