{% extends "base.html" %}
{% block main %}
<link href="{{ url_for('static', filename='css/launcher.css') }}" rel="stylesheet">

<script type=text/javascript src="{{ url_for('static',filename='js/launcher_init.js') }}"></script>
<script type=text/javascript src="{{url_for('static',filename='js/views.js')}}"></script>
<script type=text/javascript src="{{url_for('static',filename='js/tab_lib.js')}}"></script>

<script type="text/template" id="layout-template">
  <div class="al-divider"></div>
  <div class="modal hide fade" id="confirmModal"></div>
  <div id="alRoot" class="container-fluid al-root">
    <div class="row-fluid">
      <div id="midPanel" class="tabbable span12 mid-panel"></div>
    </div>
  </div><!-- alRoot container-fluid -->
</script>

<script type="text/template" id="modal-confirm-template">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3 id="modalTitle"><%= dialogTitle %></h3>
  </div>
  <div id="modalBody" class="modal-body" style="overflow:auto;">
    <p><%= dialogText %></p>
  </div>
  <div id="modalFooter" class="modal-footer">
    <a id="modalCancelBtn" href="#" class="btn" data-dismiss="modal">Cancel</a>
    <a id="modalConfirmBtn" href="#" class="btn btn-danger">Confirm</a>
  </div>
</script>

<script type="text/template" id="modal-progress-template">
  <p><%= msg %></p>
  <div class="progress progress-striped active">
    <div class="bar" style="width:100%;"></div>
  </div>
</script>

<script type="text/template" id="cluster-template">
  <div class="container-fluid tab-main">
    <div class="row-fluid">
      <div class="btn-toolbar">
      <div class="btn-group">
        <a id="discoBtn" class="btn btn-small btn-inverse" href="#" target="_blank">Disco</a>
      </div>
      <div class="btn-group">
        <a id="terminalBtn" class="btn btn-small btn-inverse" href="#terminalModal" data-toggle="modal"> Terminal
        </a>
      </div>
      </div>
    </div>
  <div class="row-fluid">
    <div class="span6">
      <table style="width:auto" class="table table-condensed">
        <tr>
          <td><b>Disco Master</b></td>
          <td>
            <a id="clusterMasterURL" data-toggle="modal" href="#urlModal"></a>
          </td>
          <td>
            <a id="clusterMasterHelp" data-toggle href="#"><i class="icon-question-sign"></i></a>
          </td>
        </tr>
        
        <tr><td><b>Total Nodes</b></td><td id="clusterNumNodes"></td>
          <td></td>
        </tr>
      </table>
    </div>
  </div> 
  <div id="clusterContent" class="row-fluid">
  </div> 
  <div class="modal hide fade" id="terminalModal">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3>Connect to Remote Terminal</h3>
    </div>
    <div class="modal-body">
      <p><b>IP Address:</b></p>
      <input id="terminalIP" type="text" placeholder="">
      <p><b>Port:</b></p>
      <input id="terminalPort" type="text" placeholder="" value="4200">
      <br>
      <input id="terminalSSL" type="checkbox"> Use SSL (secure connection via https)</checkbox>
      <div class="alert alert-info">See the shellinabox documenation for instructions on how to configure the remote port to use a secure protocol.</div>
      <hr>
      <p>Anaconda uses an open-source tool called &quot;shellinabox&quot; to allow you to connect to remote systems via your web browser.  In order to make a connection, a shellinabox server process must be running on the remote system.  You can download the shellinabox package <a href="/static/downloads/shellinabox-2.14.tar.gz">here</a> and read the included documentation for installation and configuration instructions.
    </div>
    <div class="modal-footer">
      <a href="#" class="btn" data-dismiss="modal">Cancel</a>
      <a id="connectTerminal" href="#" class="btn btn-primary">Connect</a>
    </div>
  </div>
  <div class="modal hide fade" id="urlModal">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3>Disco Master URL</h3>
    </div>
    <div class="modal-body">
      <p>Update the Disco master URL:</p>
      <input id="newMasterURL" type="text" placeholder="">
    </div>
    <div class="modal-footer">
      <a href="#" class="btn" data-dismiss="modal">Cancel</a>
      <a id="saveMasterURL" href="#" class="btn btn-primary">Save</a>
    </div>
  </div>
  </div> 
</script>

<script type="text/template" id="cluster-nodeinfo-template">
  <div class="well span3 al-nodeinfo">
  <p>Node: <b><%= nodename %></b></p>
  <table class="table table-condensed table-bordered" style="width:auto">
    <tr><td>Job OK: <%= job_ok %></td><td>Data Error: <%= data_error %></td></tr>
    <tr><td>Error: <%= error %></td><td>Max Workers: <%= max_workers %></td></tr>
    <tr><td>Connected: <%= connected %></td><td>Blacklisted: <%= blacklisted %></td></tr>
    <tr><td>Disk free: <%= diskfree %></td><td>Disk Used: <%= diskused %></td></tr>
  </table>
  </div>
</script>

<script type="text/template" id="cluster-joblist-template">
  <div class="well span4">
  <p><b>Job List</b></p>
  <table id="jobListTable" class="table table-condensed table-bordered" style="width:auto">
    <thead><th>Job</th><th>Status</th></thead>
  </table>
  </div>
</script>

<script type="text/template" id="cluster-joblist-template">
    <tr><td><%= error %></td><td>Max Workers: <%= max_workers %></td></tr>
</script>

<script type="text/template" id="terminal-template">
  <div class="span12">
    <span class="al-url"><%= url %></span>
    <span>
      <a id="terminalCloseBtn" data-toggle href="#">
        <i class="icon-remove-sign"></i>
      </a>
    </span>
    <iframe class="al-terminal-iframe" src="<%= url %>" height="85%" width="95%"></iframe>
  </div>
</script>

<script type="text/template" id="config-template">
  <div class="container-fluid tab-main">
    <div id="defaultPane" class="span12 al-config-content">
      <h2 class="al-tab-h2">Anaconda Environments</h2>
      <p>Each environment includes a unique combination of packages.  The default environment includes all the packages included in Anaconda at installation.  Using this interface, new custom environments can be created within Anaconda.
      <div>
      <hr>
        <p>Select the environment you wish to view:</p>
        <select id="envSelect"></select>
        <div class="button-group pull-right">
          <button id="envAdd" class="btn btn-primary">
            <i class="icon-plus"></i>
            Add 
          </button>
          <button id="envDelete" class="btn btn-primary">
            <i class="icon-remove"></i>
            Delete
          </button>
        </div>
      </div>
      <div class="alert alert-success al-path-alert">
        Path: <span id="configDefaultPath"></span>
      </div>
      <div id="tableDiv" class="well"></div>
    </div>
  </div>
</script>

<script type="text/template" id="config-option-template">
  <option value="<%= val %>"><%= ele %></option>
</script>

<script type="text/template" id="config-package-table">
  <table id="configTable" class="table table-striped table-condensed al-config-table">
  <thead><th>Package</th><th>Version</th>
  </table>
</script>

<script type="text/template" id="config-package-row">
  <tr><td><%= p %></td><td><%= v %></td>
</script>

<script type="text/template" id="config-addenv-ce-template">
  <div class="container-fluid tab-main"
    <div class="span12" style="padding-top:10px;">
    <br>
    <div class="btn-group pull-right">
     <button id="addEnvCloseBtn" class="btn btn-mini btn-inverse"><i class="icon-remove"></i> Cancel</a>
    </div>
    <div class="hero-unit">
      <h2>This feature is available with Anaconda Pro</h2>
      <p>Anaconda Pro provides the ability to create custom Python environments. Each environment can be configured to contain a unique version of Python and compatible packages.</p>
    <br>
    <p align="center">
      <a class="btn btn-large btn-primary" href="<%= buyNowPage %>" target="_blank">Buy Now</a>
      &nbsp;&nbsp;
      <a class="btn btn-large btn-primary" href="<%= productPage %>" target="_blank">Learn More</a>
    </p>
    </div>
  </div>
</script>

<script type="text/template" id="config-addenv-pro-template">
  <div class="container-fluid tab-main"
    <div class="span12" style="padding-top:10px;">
      <div class="btn-group pull-right">
       <button id="addEnvCloseBtn" class="btn btn-mini btn-inverse"><i class="icon-remove"></i> &nbsp;Cancel</a>
      </div>
      <div class="span12">
      <h2 class="al-tab-h2">Add an Anaconda Environment</h2>
      <p>Each environment includes a unique combination of packages. Follow these steps to create a new environment.</p>
      <ol>
         <li>Enter a unique name in the Name field.</li>
         <li>Select the Python version.</li>
         <li>Select the packages to be included in the environment (note, if a package has dependencies then the dependencies will automatically be selected).</li>
         <li>
           Press this 
           <button class="btn btn-primary btn-mini" id="addEnvSaveBtn">Create New Environment</button>
         </li>
      </ol>
      <hr>
      </div>
      <div class="span12">
      <div class="span4">
        <h2>Environment Name</h2>
        <input type="text" id="addEnvName" required pattern="[a-zA-Z0-9]+" title="Alphanumeric values only."></input>
        <a id="addEnvNameHelp" data-toggle href="#"><i class="icon-question-sign"></i></a>
      </div>
      <div class="span4">
        <h2>Python Version</h2>
        <select id="addEnvPython">
          <option value="" selected="selected">-- Select a Version --</option>
        </select>
        <a id="addEnvPythonHelp" data-toggle href="#"><i class="icon-question-sign"></i></a>
      </div>
      </div>
      <div class="span11">
      <h2>Packages</h2>
      <div id="addEnvPackageDiv" class="well">
        <p>Select a Python version to cause the package list to be populated.</p>
      </div>
      <p align="center">
        <button class="btn btn-primary" id="addEnvSaveBtn">Create New Environment</button>
      </p>
      </div>
    </div>
  </div>
</script>

<script type="text/template" id="config-addenv-required-template">
  <div class="alert alert-success">
    <h4><%= title %></h4>
    <span><%= str %></span>
  </div>
</script>

<script type="text/template" id="config-addenv-optional-template">
  <div id="addEnvOpt" class="alert alert-success">
    <div class="btn-group pull-right">
      <button id="addEnvClearBtn" class="btn btn-mini">
        Clear All
      </button>
      <button id="addEnvSelectBtn" class="btn btn-inverse btn-mini">
        Select All
      </button>
    </div>
    <h4><%= title %></h4>
    <p><%= str %></p>
    <table id="addEnvTable" class="table table-bordered table-condensed"></table>
  </div>
</script>

<script type="text/template" id="config-addenv-tablerow-template">
  <tr><td><%= cell1 %></td><td><%= cell2 %></td><td><%= cell3 %></td></tr>
</script>

<script type="text/template" id="config-addenv-cell-template">
  <input type="checkbox" id="addEnvPackageCheckbox" name="package" value="<%= packID %>"/> <span class="al-package-link" data-pid="<%= packID %>"><%=package%>, <%=ver%></span>
</script>

<script type="text/template" id="p-template">
  <p><%= str %></p>
</script>

<div id="layout-root"></div>

<script type=text/javascript src="{{ url_for('static',filename='js/launcher.js') }}"></script>


{% endblock %}