{% extends "base.html" %}

{% 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 the same kind. 'OpenStack' are projects defined in the official governance projects.yaml.
                    'OpenStack Others' are projects not included into any program. 'Complementary' are projects related to OpenStack ecosystem">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>

    <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 %}