{% extends "base_nav.html" %}

{% block title %}{{ block.super }} : Workspace{% endblock %}

{% block styles %}
    {{ block.super }}
    <link rel="stylesheet" href="{{ CILANTRO_STATIC_URL }}css/workspace.css">
{% endblock %}

{% block scripts %}
    {{ block.super }}
    <script>
        var App = {
            urls: {
                session: {
                    scope: '{% url api:scope:session %}',
                    perspective: '{% url api:perspectives:session %}',
                    report: '{% url api:reports:session %}'
                },
                reports: '{% url api:reports:read %}'
            }
        };
    </script>
    <script>require(['cilantro/pages/workspace/main']);</script>
{% endblock %}

{% block content %}

    <div class="container">
        <div class="title">Workspace</div>

        <div class="content">

            <div class="col">
                <h2>What You Were Working On Last</h2>

                <p class="info">This is a quick overview of your last session.</p> 

                <section id="session-report">
                    <h4><a role="name"></a></h4>
                    <div>
                        <strong>Conditions</strong>
                        <ul id="session-scope"></ul>
                    </div>

                    <div>
                        <strong>Columns</strong>
                        <ul id="session-perspective"></ul>
                    </div>
                    <hr>
                    <p class="timestamp info">modified <span role="modified"></span>
                    <span role="timesince"></span></p>
                </section>

                <!--
                <h2>Activity Stream</h2>
                
                <section id="activity-stream">
                <ul><li class="info">There is no activity to report.</li></ul>
                </section>
                -->
            </div>


            <div class="col">
                <h2>Reports</h2>
                <p class="info">Lists all your saved reports.</p>
                <div id="report-list"></div>

                <!--
                <h2>System Status</h2>
                
                <section id="system-status">
                <ul><li class="info">The system status is not currently enabled.</li></ul>
                </section>
                -->
            </div>

        </div>
    </div>

{% endblock %}
