<commit_before>{% extends 'common/base.html' %}
{% load flatblock_tags %}

{% block content %}
        <div class="row-fluid">
          <div class="span6">
            <div id="scenario-html">
              <div class="row-fluid">
                  <div class="row-fluid" id="row-scenarios-list">
                    <div class="span12">
                        <div class="tabbable">
                            <ul class="nav nav-tabs" id="formtabs" style="margin-bottom:0px;">
                                <li class="active">
                                    <a href="#data-tab-content" id="data-tab" data-toggle="tab">Data</a>
                                </li>
                                <li data-bind="click: scenarios.switchMode.bind($data, 'manage')"> 
                                    <a href="#scenario-tab-content" id="scenario-tab" data-toggle="tab">Scenarios</a>
                                </li>
                                <li data-bind="click: scenarios.switchMode.bind($data, 'shared')"> 
                                    <a href="#scenario-tab-content" id="shared-scenario-tab" data-toggle="tab">Shared</a>
                                </li>
                                <li>
                                    <a href="#active-tab-content" id="active-tab" data-toggle="tab">Active</a>
                                </li>
                                <li>
                                    <a href="#legend-tab-content" id="legend-tab" data-toggle="tab">Legend</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div id="active-tab-content" class="tab-pane">
                                    <div>{% include "layer_manager/active.html" %}</div>
                                </div>
                                <div id="legend-tab-content" class="tab-pane">
                                    <div>{% include "layer_manager/legend.html" %}</div>
                                </div>
                                <div id="data-tab-content" class="tab-pane active"> 
                                    <div>{% flatblock "pre-layer-list" 3600 %}</div>
                                    <div class="">
                                        <div>{% include "layer_manager/search.html" %}</div>
                                        <div>{% include "layer_manager/data.html" %}</div>
                                    </div>

                                    <p>{% flatblock "post-layer-list" 3600 %}</p>
                                </div>

                                <div id="scenario-tab-content" class="tab-pane">
                                    {% if user.is_authenticated %}
                                    <div>
                                        <div data-bind="visible: scenarios.showScenarioList">
                                            <div data-bind="if: !scenarios.scenarioLoadComplete()" style="text-align: center"> 
                                                <img alt="loading" src="/media/img/ajax-loader.gif"/> 
                                            </div>
                                            <div data-bind="if: scenarios.scenarioLoadComplete() && scenarios.scenarioList().length == 0 && scenarios.dataMode() == 'manage'"> 
                                                <p>{% flatblock "new-manage-scenario" 3600 %}</p>
                                            </div>
                                            <div data-bind="if: scenarios.scenarioLoadComplete() && scenarios.scenarioList().length == 0 && scenarios.dataMode() == 'shared'"> 
                                                <p>{% flatblock "new-share-scenario" 3600 %}</p>
                                            </div>
                                            <div class="alert alert-error" data-bind="visible: scenarios.scenarioLoadError">
                                                <p><strong> Could not load scenario list!</strong></p>
                                                <p>Please try again... if the error persists, please contact us.</p>
                                            </div>
                                            <div class="alert alert-error" data-bind="visible: scenarios.planningUnitsLoadError">
                                                <p><strong> Could not load planning units!</strong></p>
                                                <p> Please try again... if the error persists, please contact us.</p>
                                            </div>
                                            <div class="alert alert-error" data-bind="visible: scenarios.formLoadError">
                                                <p><strong> Could not load the scenario form!</strong></p>
                                                <p> Please try again... if the error persists, please contact us.</p>
                                            </div>
                                            <div data-bind="if: scenarios.scenarioList().length > 0">
                                                <table class="table table-scenariolist table-bordered table-condensed">
                                                <thead>
                                                    <tr>
                                                        <th> Scenario Name </th>
                                                        <th> Date Modified </th>
                                                        <th> Description</th>
                                                        <th> Owner</th>
                                                    </tr>
                                                </thead>
                                                <!-- ko with: scenarios -->
                                                <tbody data-bind="foreach: scenarioListPaginated">
                                                    <tr class="scenario-row" 
                                                        data-bind="attr: {'data-original-title': description}, 
                                                                click: $parent.selectFeature, 
                                                                css: {'active': $data === $parent.selectedFeature() }">
                                                        <td class="scenario-name">
                                                            <span data-bind="visible: expired()">
                                                                <i class="icon-exclamation-sign"></i>
                                                            </span>
                                                            <span data-bind="visible: !done()">
                                                                <i class="icon-refresh"></i>
                                                            </span>
                                                            <span data-bind="text: name"> </span>
                                                        </td>
                                                        <td data-bind="text: date_modified"></td>
                                                        <td data-bind="text: description().substr(0,77) + '...'"></td>
                                                        <td> <span data-bind="text: user_fullname"></span>
                                                            <span data-bind="visible: sharing_groups().length > 0">
                                                                <i class="icon-share-alt"></i>
                                                            </span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                                <!-- /ko -->
                                                </table>
                                            </div>
                                            <div data-bind="if: scenarios.scenarioList().length, visible: scenarios.scenarioList().length > scenarios.listDisplayCount">
                                                <div class="pagination">
                                                    <!-- ko with: scenarios -->
                                                    <ul data-bind="foreach: paginationList">
                                                    <li data-bind="click: $parent.setListIndex, 
                                                                    css: { 'active': $parent.listStart() === listIndex, 'disabled': displayIndex === '...' }">
                                                        <a href="#" data-bind="text: displayIndex, attr: { title: listIndex }"></a>
                                                    </li>
                                                    </ul>
                                                    <!-- /ko -->
                                                </div>
                                            </div>
                                            <div>
                                                <button href="#" class="btn btn-primary" 
                                                    data-bind="click: scenarios.addScenarioStart, visible: scenarios.dataMode() == 'manage'">
                                                <i class="icon-plus-sign icon-white"></i> Create New Scenario
                                                <span data-bind="visible: !scenarios.formLoadComplete()"><img alt="loading" src="/media/img/ajax-loader.gif"/></span>
                                                </button>
                                            </div>
                                        </div> <!-- end showScenarioList -->
                                        <div class="span12 well" data-bind="visible: scenarios.selectedFeature" style="margin-left:0;">
                                        <!-- ko with: scenarios -->
                                        <div class="scenario-detail" data-bind="with: selectedFeature">
                                            <div class="row-fluid">
                                            <div class="btn-group pull-left">
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.backToScenarioList">
                                                    <i class="icon-white icon-backward"></i> Return to List </a>
                                            </div>
                                            <div class="btn-group pull-right" data-bind="if: !error() && done() == false && $parent.dataMode() == 'manage'">
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.showDeleteDialog">
                                                <i class="icon-white icon-remove"></i> Delete</a>
                                            </div>
                                            <div class="btn-group pull-right" data-bind="if: error() && done() == false && $parent.dataMode() == 'manage'">
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.editScenario">
                                                <i class="icon-edit icon-white"></i> Edit </a>
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.showDeleteDialog">
                                                <i class="icon-remove icon-white"></i> Delete</a>
                                            </div>
                                            <div class="btn-group pull-right" data-bind="if: done() == true && $parent.dataMode() == 'manage'">
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.editScenario">
                                                <i class="icon-white icon-edit"></i> Edit </a>
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.copyScenario">
                                                <i class="icon-white icon-tags"></i> Copy </a>
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.showDownloadDialog">
                                                <i class="icon-white icon-download-alt"></i> Download</a>
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.showShareDialog">
                                                <i class="icon-white icon-share-alt"></i> Share</a>
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.showDeleteDialog">
                                                <i class="icon-white icon-remove"></i> Delete</a>
                                            </div>
                                            <div class="btn-group pull-right" data-bind="if: $parent.dataMode() == 'shared'">
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.copyScenario">
                                                <i class="icon-white icon-tags"></i> Copy </a>
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.showDownloadDialog">
                                                <i class="icon-white icon-download-alt"></i> Download</a>
                                            </div>
                                            </div>
                                            <div class="row-fluid">
                                            <div style="height:16px;">
                                                <img style="padding-left: 12px;" data-bind="visible: !$parent.formLoadComplete()" 
                                                    alt="loading" src="/media/img/ajax-loader.gif" />
                                            </div>
                                            <h4><div data-bind="text: name"></div></h4>
                                            <p data-bind="text: description"></p>
                                            <div id="scenario-show-container" style="margin-top: 18px;">
                                                <span data-bind="visible: !$parent.reportLoadComplete()">
                                                    <img alt="loading" src="/media/img/ajax-loader.gif" />
                                                </span>
                                                <div class="alert alert-error" data-bind="visible: $parent.reportLoadError">
                                                    <p><strong> Could not load the scenario report!</strong></p>
                                                    <p> Please try again... if the error persists, please contact us.</p>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        <!-- /ko -->
                                      </div>
                                    </div>
                                    <!-- ko with: scenarios -->
                                    <div class="row-fluid" data-bind="visible: showScenarioFormPanel">
                                        <div class="span12 well">
                                            <div class="pull-right">
                                                <button href="#" class="btn" data-bind="click: cancelAddScenario">
                                                    <i class="icon-trash"></i> Cancel
                                                </button>
                                                <button href="#" class="btn btn-primary" data-bind="click: saveScenarioForm">
                                                    <i class="icon-file icon-white"></i> Run Scenario
                                                    <span data-bind="visible: !formSaveComplete()">
                                                        <img alt="loading" src="/media/img/ajax-loader.gif"/>
                                                    </span>
                                                </button>
                                                <div class="alert alert-error" data-bind="visible: formSaveError">
                                                    <p><strong> Error: could not save the scenario!</strong></p>
                                                </div>
                                            </div>
                                            <div id="scenarios-form-container" class="form-panel"></div>
                                        </div>
                                    </div>
                                    <!-- /ko -->
                                    {% else %}
                                    <!-- /////////// User not authenticated ///////////////// -->
                                    <div> 
                                            {% flatblock "home_text" 3600 %}
                                            <p><em>You currently not logged in to {% flatblock "title" 3600 %}.</em></p>
                                            <p><a class="btn btn-mini" href="{% url registration_register %}" id="register">Register</a> for an account</p>
                                            <p><a class="btn btn-mini" href="{% url user_signin %}" id="signin">Sign In</a> to begin creating scenarios</p>
                                    </div>
                                    {% endif %}
                                </div> <!-- end scenario tab content -->
                            </div> <!-- end tab content -->
                        </div>  <!-- end tabable -->
                  </div>
                </div>
              </div> <!-- no properties -->

              <div class="modal" id="scenario-delete-dialog" style="display:none">
                <div class="modal-header">
                  <a class="close" data-dismiss="modal">×</a>
                  <h3>Delete Scenario</h3>
                </div>
                <div class="modal-body">
                  <div data-bind="if: scenarios.selectedFeature()">
                   Are you sure you want to delete <strong><span data-bind="text: scenarios.selectedFeature().name"></span></strong>?
                  </div>
                </div>
                <div class="modal-footer">
                  <a href="#" class="btn" data-dismiss="modal">cancel</a>
                  <a href="#" class="btn btn-danger" data-bind="click: scenarios.deleteScenario">Delete Scenario</a>
                </div>
              </div>

              <div class="modal" id="scenario-download-dialog" style="display:none">
                <div class="modal-header">
                  <a class="close" data-dismiss="modal">×</a>
                  <h3>Download Scenario</h3>
                </div>
                <div class="modal-body">
                    <p>Download the <strong><span data-bind="text: scenarios.selectedFeature().name"></span></strong> scenario results as a zipped shapefile for use in GIS software.</p>
                    <h5><em>Optional</em></h5>
                    <p> You can select other scenarios to create an "array"; 
                        <em>i.e.</em> an aggregate of the results from all selected scenarios.
                    </p> 
                    <form id="download-array-form" data-bind="if: scenarios.selectedFeature">
                      <!-- ko with: scenarios -->
                      <ul data-bind="foreach: scenarioList">
                        <li class="group" data-bind="if: uid != $parent.selectedFeature().uid">
                          <input type="checkbox" name="download_array" data-bind="attr: {value: uid, id: uid}"/> 
                          <label style="display: inline-block;" data-bind="attr: {'for': uid}, text: name" /></label>
                        </li>
                      </ul>
                      <!-- /ko -->
                    </form>
                </div>
                <div class="modal-footer">
                  <a href="#" class="btn" data-dismiss="modal">cancel</a>
                  <a href="#" class="btn btn-danger" data-bind="click: scenarios.downloadScenario">Download</a>
                </div>
              </div>

              <div class="modal" id="scenario-share-dialog" style="display:none">
                <div class="modal-header">
                  <a class="close" data-dismiss="modal">×</a>
                  <h3>Share Scenario</h3>
                </div>
                <div class="modal-body">
                 <div id="share-form-div"></div> 
                </div>
                <div class="modal-footer">
                  <a href="#" class="btn" data-dismiss="modal">cancel</a>
                  <a href="#" class="btn btn-danger" data-bind="click: scenarios.shareScenario">Save Share Settings</a>
                </div>
              </div>


            </div>
            <!-- end of scenario pages -->

          </div>

          <div class="span6">
            <div class="outermap well">
                <div data-bind="if: !scenarios.planningUnitsLoadComplete()" id="map-loading"> 
                    <img alt="loading" src="/media/img/ajax-loader.gif"/> 
                </div>
                <div id="watershed-name" class="well hide">
                </div>
                <div id="info" class="well">
                    <button type="button" class="close" id="info-close">×</button>
                    <div id="info-title"></div>
                    <div id="info-content"></div>
                </div>

                <style>
                    #description-overlay {
                        bottom: 14px;
                        margin: 2px;
                        position: absolute;
                        z-index: 1043;
                        text-align: left;
                        vertical-align: center;
                        padding: 18px;
                        background: white;
                        background: rgba(162, 205, 181, 0.8);
                        margin-right: 12px;
                    }
                </style>
                {% include "layer_manager/description.html" %}

              <div id="map"></div>
            </div>
          </div>
        </div>
  
    <iframe id="download-iframe" src="" style="display:none; visibility:hidden"></iframe>

    <script type="text/javascript">
    var app = {
        // TODO document global namespace app.viewModel.blah
        viewModel: {
            scenarios: new scenariosViewModel(), 
            progress: null,
        },
        utils: {},
        updateUrl: function() { /* change url hash */ },
    };
    </script>

    <!-- TODO document or put in include -->
    <script src="/media/layer_manager/js/map.js"></script>
    <script src="/media/layer_manager/js/models.js"></script>
    <script src="/media/layer_manager/js/load.js"></script>
    <script src="/media/layer_manager/js/knockout-bindings.js"></script>

    <script>
        handleWorkspace = function (data) {
            app.workspace = data;
            app.workspaceUtil = new madrona.features.workspace(data); 
        };

        {% if user.is_authenticated %}
            $.get('/features/{{user.username}}/workspace-owner.json', handleWorkspace);
        {% else %}
            $.get('/features/workspace-public.json', handleWorkspace);
        {% endif %}

        app.onResize = function () {
            $("#map").height($(window).height() - 78);
            map.render('map');
        };
        
        app.timer = null; 

        app.utils.loadScenarioLayer = function() {
            olLayer = map.getLayersByName("Scenario Results")[0];

            var keys = [];
            for (var k in app.viewModel.layers.layerIndex)
                keys.push(k);
            id = keys.length + 999999; // offset to make sure no collision
            app.scenarioLayerId = id;

            var layerViewModel = new layerModel({
                name: olLayer.name,
                type: "Vector",
                opacity: 0.5,
                legend: "/media/legends/priorities.png"
            });
            layerViewModel.layer = olLayer;
            app.viewModel.layers.layerIndex[id] = layerViewModel;
            olLayer.setOpacity(layerViewModel.opacity());
        };

        $(document).ready(function () {
            ko.applyBindings(app.viewModel);

            {% if user.is_authenticated %}
                app.viewModel.scenarios.loadScenarios();
            {% endif %}

            init_map();
            app.utils.initMap(map);
            app.viewModel.layers.loadLayersFromServer().done( function() {
                app.utils.loadScenarioLayer();
            });
            app.onResize();
            $(window).resize(app.onResize);
            $("#info").hide();
            $("#info-close").click( function(e) { 
                e.preventDefault();
                $('#info').hide();
            });
        });
    </script>
{% endblock content %}

{% block scripts %}<script src="{{MEDIA_URL}}OpenLayers.js"></script>{% endblock scripts %}
<commit_msg>remove shared tab and add as option within scenarios tab<commit_after>{% extends 'common/base.html' %}
{% load flatblock_tags %}

{% block content %}
        <div class="row-fluid">
          <div class="span6">
            <div id="scenario-html">
              <div class="row-fluid">
                  <div class="row-fluid" id="row-scenarios-list">
                    <div class="span12">
                        <div class="tabbable">
                            <ul class="nav nav-tabs" id="formtabs" style="margin-bottom:0px;">
                                <li class="active">
                                    <a href="#data-tab-content" id="data-tab" data-toggle="tab">Data</a>
                                </li>
                                <li data-bind="click: scenarios.switchMode.bind($data, 'manage')"> 
                                    <a href="#scenario-tab-content" id="scenario-tab" data-toggle="tab">Scenarios</a>
                                </li>
                                <li>
                                    <a href="#active-tab-content" id="active-tab" data-toggle="tab">Active</a>
                                </li>
                                <li>
                                    <a href="#legend-tab-content" id="legend-tab" data-toggle="tab">Legend</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div id="active-tab-content" class="tab-pane">
                                    <div>{% include "layer_manager/active.html" %}</div>
                                </div>
                                <div id="legend-tab-content" class="tab-pane">
                                    <div>{% include "layer_manager/legend.html" %}</div>
                                </div>
                                <div id="data-tab-content" class="tab-pane active"> 
                                    <div>{% flatblock "pre-layer-list" 3600 %}</div>
                                    <div class="">
                                        <div>{% include "layer_manager/search.html" %}</div>
                                        <div>{% include "layer_manager/data.html" %}</div>
                                    </div>

                                    <p>{% flatblock "post-layer-list" 3600 %}</p>
                                </div>

                                <div id="scenario-tab-content" class="tab-pane">
                                    {% if user.is_authenticated %}
                                    <div>
                                        <div data-bind="visible: scenarios.showScenarioList">
                                            <div data-bind="if: !scenarios.scenarioLoadComplete()" style="text-align: center"> 
                                                <img alt="loading" src="/media/img/ajax-loader.gif"/> 
                                            </div>
                                            <div data-bind="if: scenarios.scenarioLoadComplete() && scenarios.scenarioList().length == 0 && scenarios.dataMode() == 'manage'"> 
                                                <p>{% flatblock "new-manage-scenario" 3600 %}</p>
                                            </div>
                                            <div data-bind="if: scenarios.scenarioLoadComplete() && scenarios.scenarioList().length == 0 && scenarios.dataMode() == 'shared'"> 
                                                <p>{% flatblock "new-share-scenario" 3600 %}</p>
                                            </div>
                                            <div class="alert alert-error" data-bind="visible: scenarios.scenarioLoadError">
                                                <p><strong> Could not load scenario list!</strong></p>
                                                <p>Please try again... if the error persists, please contact us.</p>
                                            </div>
                                            <div class="alert alert-error" data-bind="visible: scenarios.planningUnitsLoadError">
                                                <p><strong> Could not load planning units!</strong></p>
                                                <p> Please try again... if the error persists, please contact us.</p>
                                            </div>
                                            <div class="alert alert-error" data-bind="visible: scenarios.formLoadError">
                                                <p><strong> Could not load the scenario form!</strong></p>
                                                <p> Please try again... if the error persists, please contact us.</p>
                                            </div>
                                            <div data-bind="if: scenarios.scenarioList().length > 0">
                                                <table class="table table-scenariolist table-bordered table-condensed">
                                                <thead>
                                                    <tr>
                                                        <th> Scenario Name </th>
                                                        <th> Date Modified </th>
                                                        <th> Description</th>
                                                        <th> Owner</th>
                                                    </tr>
                                                </thead>
                                                <!-- ko with: scenarios -->
                                                <tbody data-bind="foreach: scenarioListPaginated">
                                                    <tr class="scenario-row" 
                                                        data-bind="attr: {'data-original-title': description}, 
                                                                click: $parent.selectFeature, 
                                                                css: {'active': $data === $parent.selectedFeature() }">
                                                        <td class="scenario-name">
                                                            <span data-bind="visible: expired()">
                                                                <i class="icon-exclamation-sign"></i>
                                                            </span>
                                                            <span data-bind="visible: !done()">
                                                                <i class="icon-refresh"></i>
                                                            </span>
                                                            <span data-bind="text: name"> </span>
                                                        </td>
                                                        <td data-bind="text: date_modified"></td>
                                                        <td data-bind="text: description().substr(0,77) + '...'"></td>
                                                        <td> <span data-bind="text: user_fullname"></span>
                                                            <span data-bind="visible: sharing_groups().length > 0">
                                                                <i class="icon-share-alt"></i>
                                                            </span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                                <!-- /ko -->
                                                </table>
                                            </div>
                                            <div data-bind="if: scenarios.scenarioList().length, visible: scenarios.scenarioList().length > scenarios.listDisplayCount">
                                                <div class="pagination">
                                                    <!-- ko with: scenarios -->
                                                    <ul data-bind="foreach: paginationList">
                                                    <li data-bind="click: $parent.setListIndex, 
                                                                    css: { 'active': $parent.listStart() === listIndex, 'disabled': displayIndex === '...' }">
                                                        <a href="#" data-bind="text: displayIndex, attr: { title: listIndex }"></a>
                                                    </li>
                                                    </ul>
                                                    <!-- /ko -->
                                                </div>
                                            </div>
                                            <div>
                                                <button href="#" class="btn btn-primary" 
                                                    data-bind="click: scenarios.addScenarioStart, visible: scenarios.dataMode() == 'manage'">
                                                <i class="icon-plus-sign icon-white"></i> Create New Scenario
                                                <span data-bind="visible: !scenarios.formLoadComplete()"><img alt="loading" src="/media/img/ajax-loader.gif"/></span>
                                                </button>

                                                <button data-bind="click: scenarios.switchMode.bind($data, 'shared'), visible: scenarios.dataMode() == 'manage'"> 
                                                    <i class="icon-share-alt"></i> Switch to shared scenarios
                                                </button>
                                                <button data-bind="click: scenarios.switchMode.bind($data, 'manage'), visible: scenarios.dataMode() == 'shared'"> 
                                                    <i class="icon-user"></i> Switch to my scenarios
                                                </button>
                                            </div>
                                        </div> <!-- end showScenarioList -->
                                        <div class="span12 well" data-bind="visible: scenarios.selectedFeature" style="margin-left:0;">
                                        <!-- ko with: scenarios -->
                                        <div class="scenario-detail" data-bind="with: selectedFeature">
                                            <div class="row-fluid">
                                            <div class="btn-group pull-left">
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.backToScenarioList">
                                                    <i class="icon-white icon-backward"></i> Return to List </a>
                                            </div>
                                            <div class="btn-group pull-right" data-bind="if: !error() && done() == false && $parent.dataMode() == 'manage'">
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.showDeleteDialog">
                                                <i class="icon-white icon-remove"></i> Delete</a>
                                            </div>
                                            <div class="btn-group pull-right" data-bind="if: error() && done() == false && $parent.dataMode() == 'manage'">
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.editScenario">
                                                <i class="icon-edit icon-white"></i> Edit </a>
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.showDeleteDialog">
                                                <i class="icon-remove icon-white"></i> Delete</a>
                                            </div>
                                            <div class="btn-group pull-right" data-bind="if: done() == true && $parent.dataMode() == 'manage'">
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.editScenario">
                                                <i class="icon-white icon-edit"></i> Edit </a>
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.copyScenario">
                                                <i class="icon-white icon-tags"></i> Copy </a>
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.showDownloadDialog">
                                                <i class="icon-white icon-download-alt"></i> Download</a>
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.showShareDialog">
                                                <i class="icon-white icon-share-alt"></i> Share</a>
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.showDeleteDialog">
                                                <i class="icon-white icon-remove"></i> Delete</a>
                                            </div>
                                            <div class="btn-group pull-right" data-bind="if: $parent.dataMode() == 'shared'">
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.copyScenario">
                                                <i class="icon-white icon-tags"></i> Copy </a>
                                                <a href="#" class="btn btn-mini" data-bind="click: $parent.showDownloadDialog">
                                                <i class="icon-white icon-download-alt"></i> Download</a>
                                            </div>
                                            </div>
                                            <div class="row-fluid">
                                            <div style="height:16px;">
                                                <img style="padding-left: 12px;" data-bind="visible: !$parent.formLoadComplete()" 
                                                    alt="loading" src="/media/img/ajax-loader.gif" />
                                            </div>
                                            <h4><div data-bind="text: name"></div></h4>
                                            <p data-bind="text: description"></p>
                                            <div id="scenario-show-container" style="margin-top: 18px;">
                                                <span data-bind="visible: !$parent.reportLoadComplete()">
                                                    <img alt="loading" src="/media/img/ajax-loader.gif" />
                                                </span>
                                                <div class="alert alert-error" data-bind="visible: $parent.reportLoadError">
                                                    <p><strong> Could not load the scenario report!</strong></p>
                                                    <p> Please try again... if the error persists, please contact us.</p>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                        <!-- /ko -->
                                      </div>
                                    </div>
                                    <!-- ko with: scenarios -->
                                    <div class="row-fluid" data-bind="visible: showScenarioFormPanel">
                                        <div class="span12 well">
                                            <div class="pull-right">
                                                <button href="#" class="btn" data-bind="click: cancelAddScenario">
                                                    <i class="icon-trash"></i> Cancel
                                                </button>
                                                <button href="#" class="btn btn-primary" data-bind="click: saveScenarioForm">
                                                    <i class="icon-file icon-white"></i> Run Scenario
                                                    <span data-bind="visible: !formSaveComplete()">
                                                        <img alt="loading" src="/media/img/ajax-loader.gif"/>
                                                    </span>
                                                </button>
                                                <div class="alert alert-error" data-bind="visible: formSaveError">
                                                    <p><strong> Error: could not save the scenario!</strong></p>
                                                </div>
                                            </div>
                                            <div id="scenarios-form-container" class="form-panel"></div>
                                        </div>
                                    </div>
                                    <!-- /ko -->
                                    {% else %}
                                    <!-- /////////// User not authenticated ///////////////// -->
                                    <div> 
                                            {% flatblock "home_text" 3600 %}
                                            <p><em>You currently not logged in to {% flatblock "title" 3600 %}.</em></p>
                                            <p><a class="btn btn-mini" href="{% url registration_register %}" id="register">Register</a> for an account</p>
                                            <p><a class="btn btn-mini" href="{% url user_signin %}" id="signin">Sign In</a> to begin creating scenarios</p>
                                    </div>
                                    {% endif %}
                                </div> <!-- end scenario tab content -->
                            </div> <!-- end tab content -->
                        </div>  <!-- end tabable -->
                  </div>
                </div>
              </div> <!-- no properties -->

              <div class="modal" id="scenario-delete-dialog" style="display:none">
                <div class="modal-header">
                  <a class="close" data-dismiss="modal">×</a>
                  <h3>Delete Scenario</h3>
                </div>
                <div class="modal-body">
                  <div data-bind="if: scenarios.selectedFeature()">
                   Are you sure you want to delete <strong><span data-bind="text: scenarios.selectedFeature().name"></span></strong>?
                  </div>
                </div>
                <div class="modal-footer">
                  <a href="#" class="btn" data-dismiss="modal">cancel</a>
                  <a href="#" class="btn btn-danger" data-bind="click: scenarios.deleteScenario">Delete Scenario</a>
                </div>
              </div>

              <div class="modal" id="scenario-download-dialog" style="display:none">
                <div class="modal-header">
                  <a class="close" data-dismiss="modal">×</a>
                  <h3>Download Scenario</h3>
                </div>
                <div class="modal-body">
                    <p>Download the <strong><span data-bind="text: scenarios.selectedFeature().name"></span></strong> scenario results as a zipped shapefile for use in GIS software.</p>
                    <h5><em>Optional</em></h5>
                    <p> You can select other scenarios to create an "array"; 
                        <em>i.e.</em> an aggregate of the results from all selected scenarios.
                    </p> 
                    <form id="download-array-form" data-bind="if: scenarios.selectedFeature">
                      <!-- ko with: scenarios -->
                      <ul data-bind="foreach: scenarioList">
                        <li class="group" data-bind="if: uid != $parent.selectedFeature().uid">
                          <input type="checkbox" name="download_array" data-bind="attr: {value: uid, id: uid}"/> 
                          <label style="display: inline-block;" data-bind="attr: {'for': uid}, text: name" /></label>
                        </li>
                      </ul>
                      <!-- /ko -->
                    </form>
                </div>
                <div class="modal-footer">
                  <a href="#" class="btn" data-dismiss="modal">cancel</a>
                  <a href="#" class="btn btn-danger" data-bind="click: scenarios.downloadScenario">Download</a>
                </div>
              </div>

              <div class="modal" id="scenario-share-dialog" style="display:none">
                <div class="modal-header">
                  <a class="close" data-dismiss="modal">×</a>
                  <h3>Share Scenario</h3>
                </div>
                <div class="modal-body">
                 <div id="share-form-div"></div> 
                </div>
                <div class="modal-footer">
                  <a href="#" class="btn" data-dismiss="modal">cancel</a>
                  <a href="#" class="btn btn-danger" data-bind="click: scenarios.shareScenario">Save Share Settings</a>
                </div>
              </div>


            </div>
            <!-- end of scenario pages -->

          </div>

          <div class="span6">
            <div class="outermap well">
                <div data-bind="if: !scenarios.planningUnitsLoadComplete()" id="map-loading"> 
                    <img alt="loading" src="/media/img/ajax-loader.gif"/> 
                </div>
                <div id="watershed-name" class="well hide">
                </div>
                <div id="info" class="well">
                    <button type="button" class="close" id="info-close">×</button>
                    <div id="info-title"></div>
                    <div id="info-content"></div>
                </div>

                <style>
                    #description-overlay {
                        bottom: 14px;
                        margin: 2px;
                        position: absolute;
                        z-index: 1043;
                        text-align: left;
                        vertical-align: center;
                        padding: 18px;
                        background: white;
                        background: rgba(162, 205, 181, 0.8);
                        margin-right: 12px;
                    }
                </style>
                {% include "layer_manager/description.html" %}

              <div id="map"></div>
            </div>
          </div>
        </div>
  
    <iframe id="download-iframe" src="" style="display:none; visibility:hidden"></iframe>

    <script type="text/javascript">
    var app = {
        // TODO document global namespace app.viewModel.blah
        viewModel: {
            scenarios: new scenariosViewModel(), 
            progress: null,
        },
        utils: {},
        updateUrl: function() { /* change url hash */ },
    };
    </script>

    <!-- TODO document or put in include -->
    <script src="/media/layer_manager/js/map.js"></script>
    <script src="/media/layer_manager/js/models.js"></script>
    <script src="/media/layer_manager/js/load.js"></script>
    <script src="/media/layer_manager/js/knockout-bindings.js"></script>

    <script>
        handleWorkspace = function (data) {
            app.workspace = data;
            app.workspaceUtil = new madrona.features.workspace(data); 
        };

        {% if user.is_authenticated %}
            $.get('/features/{{user.username}}/workspace-owner.json', handleWorkspace);
        {% else %}
            $.get('/features/workspace-public.json', handleWorkspace);
        {% endif %}

        app.onResize = function () {
            $("#map").height($(window).height() - 78);
            map.render('map');
        };
        
        app.timer = null; 

        app.utils.loadScenarioLayer = function() {
            olLayer = map.getLayersByName("Scenario Results")[0];

            var keys = [];
            for (var k in app.viewModel.layers.layerIndex)
                keys.push(k);
            id = keys.length + 999999; // offset to make sure no collision
            app.scenarioLayerId = id;

            var layerViewModel = new layerModel({
                name: olLayer.name,
                type: "Vector",
                opacity: 0.5,
                legend: "/media/legends/priorities.png"
            });
            layerViewModel.layer = olLayer;
            app.viewModel.layers.layerIndex[id] = layerViewModel;
            olLayer.setOpacity(layerViewModel.opacity());
        };

        $(document).ready(function () {
            ko.applyBindings(app.viewModel);

            {% if user.is_authenticated %}
                app.viewModel.scenarios.loadScenarios();
            {% endif %}

            init_map();
            app.utils.initMap(map);
            app.viewModel.layers.loadLayersFromServer().done( function() {
                app.utils.loadScenarioLayer();
            });
            app.onResize();
            $(window).resize(app.onResize);
            $("#info").hide();
            $("#info-close").click( function(e) { 
                e.preventDefault();
                $('#info').hide();
            });
        });
    </script>
{% endblock content %}

{% block scripts %}<script src="{{MEDIA_URL}}OpenLayers.js"></script>{% endblock scripts %}

{'fraction_non_alphanumeric': 0.12381026227537946, 'fraction_numerical': 0.003489251167929905, 'mean_word_length': 0.8531503699978447, 'pattern_counts': {'":': 0, '<': 845, '<?xml version=': 0, '>': 851, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 724, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5755840', 'n_tokens_mistral': 10704, 'n_tokens_neox': 10018, 'n_words': 2232}