{% set menu = True %}
{% set tree = True %}
{% set projects_root = (projects_page and breadcrumbs|length == 1) %}
{% extends "page.html" %}

{% block title %}{{page_title}}{% endblock %}


{% block params %}
{{super()}}
data-base-url="{{base_url | urlencode}}"
data-notebook-path="{{notebook_path | urlencode}}"
data-terminals-available="{{terminals_available}}"
data-server-root="{{server_root}}"
{% endblock %}

{% block extra_buttons %}
  {% if terminals_available %}
  <button id="new-terminal" role="presentation" class="btn btn-default btn-xs" title="New Terminal">
    <i class="fa fa-terminal" aria-hidden="true"></i>
  </button>
  {% endif %}
  <button class="btn btn-default btn-xs" onclick="window.open('{{ gallery_url | default("https://swan-gallery.web.cern.ch/", true) }}', '_blank')" title="Examples Gallery">
    <i class="fa fa-picture-o" aria-hidden="true"></i>
  </button>
{% endblock %}

{% block extra_options %}
<li>
  <a href="#" data-toggle="modal" data-target="#running-modal">Running Processes</a>
</li>
<li>
  <a href="{{base_url}}nbextensions" onclick="window.open('{{base_url}}nbextensions', '_blank');return false">Nbextensions configuration</a>
</li>
{% endblock %}

{% block site %}

  <div id="ipython-main-app" class="container">

        {% if share_page and not share_tree %}
        <!-- Share -->
        <div id="share">
          <div id="share-projects-placeholder" class="row list_item" style="display: none;">
            <div>There are no projects shared</div>
          </div>

          <div id="shared-projects-project-element" class="list_item row" style="display: none;">
            <div class="col-md-5 col-xs-9">
              <div class="row">
                <div class="col-xs-1">
                  <i class="item_icon project_icon icon-fixed-width"></i>
                </div>
                <div class="col-xs-11 name">
                  <div>
                    <a class="item_link" href="">
                      <span class="item_name"></span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-2 hidden-xs">
              <ul class="actions">
                <li><a href="javascript:" class="btn-clone green">Clone</a></li>
              </ul>
            </div>
            <div class="col-md-1 hidden-xs shared_size">
            </div>
            <div class="col-md-2 hidden-xs shared_user">
            </div>
            <div class="col-md-2 col-xs-3 shared_date">
            </div>
          </div>

          <div id="sharing-projects-project-element" class="list_item row" style="display: none;">
            <div class="col-md-5 col-xs-9">
              <div class="row">
                <div class="col-xs-1">
                  <i class="item_icon project_icon icon-fixed-width"></i>
                </div>
                <div class="col-xs-11 name">
                  <div>
                    <a class="item_link" href="">
                      <span class="item_name"></span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-3 hidden-xs">
              <ul class="actions">
                <li><a href="javascript:" class="btn-update blue">Edit sharing</a></li>
              </ul>
            </div>
            <div class="col-md-2 hidden-xs shared_with">
            </div>
            <div class="col-md-2 col-xs-3 shared_date">
            </div>
          </div>

          <div class="panel-group">
            <ul class="breadcrumb">
              <li><a href="/">SWAN</a></li>
              <li><a href="{{base_url}}share">Share</a></li>
            </ul>

            <div>
              <div class="row title-bar">
                <div class="col-md-6">
                  <h1>
                    Projects shared with me
                    <a data-toggle="collapse" data-target="#shared" href="javascript:" class="no-hover-efecct">
                      <i class="icon-collapse"></i>
                    </a>
                  </h1>
                </div>
              </div>

              <div id="shared" class="notebook_list collapse in">
                <div id="notebook_list_header" class="row header list_header">
                  <div class="col-md-5 col-xs-9">
                    <div class="row">
                      <div class="col-xs-1">
                      </div>
                      <div class="col-xs-11 name">
                         <span class="sort-action-share" data-sorter="sort-name">
                             Name
                             <i class="fa fa-sort-desc"></i>
                         </span>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-2 hidden-xs">
                  </div>
                  <div class="col-md-1 hidden-xs">
                    <span class="sort-action-share" data-sorter="sort-size">
                       Size
                       <i class="fa fa-sort-desc" style="display: none"></i>
                    </span>
                  </div>
                  <div class="col-md-2 hidden-xs">
                    <span class="sort-action-share" data-sorter="sort-by">
                       Shared by
                       <i class="fa fa-sort-desc" style="display: none"></i>
                    </span>
                  </div>
                  <div class="col-md-2 col-xs-3">
                    <span class="sort-action-share" data-sorter="last-modified">
                      Date
                      <i class="fa fa-sort-desc" style="display: none"></i>
                    </span>
                  </div>
                </div>
                <div id="shared-projects-list">
                </div>
              </div>
            </div>

            <p>&nbsp;</p>
            <p>&nbsp;</p>

            <div>
              <div class="row title-bar">
                <div class="col-md-6">
                  <h1>
                    Projects shared by me
                    <a data-toggle="collapse" data-target="#sharing" href="javascript:" class="no-hover-efecct">
                      <i class="icon-collapse"></i>
                    </a>
                  </h1>
                </div>
              </div>

              <div id="sharing" class="notebook_list collapse in">
                <div class="row header list_header">
                  <div class="col-md-5 col-xs-9">
                    <div class="row">
                      <div class="col-xs-1">
                      </div>
                      <div class="col-xs-11 name">
                         <span class="sort-action-share" data-sorter="sort-name">
                             Name
                             <i class="fa fa-sort-desc"></i>
                         </span>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 hidden-xs">
                  </div>
                  <div class="col-md-2 hidden-xs">
                    <span class="sort-action-share" data-sorter="sort-with">
                      Shared with
                      <i class="fa fa-sort-desc" style="display: none"></i>
                    </span>
                  </div>
                  <div class="col-md-2 col-xs-3">
                    <span class="sort-action-share" data-sorter="last-modified">
                      Date
                      <i class="fa fa-sort-desc" style="display: none"></i>
                    </span>
                  </div>
                </div>
                <div id="sharing-projects-list">
                </div>
              </div>
            </div>
          </div>
        </div>
        {% else %}
        <!-- Tree -->
        <div id="tree">
          <ul class="breadcrumb"><!--
            --><li><a href="/">SWAN</a></li><!--
            -->{% if projects_page %}<!--
            --><li><a href="{{base_url}}projects">My Projects</a></li><!--
            -->{% for crumb in breadcrumbs[1:] %}<!--
            --><li><a href="{{crumb[0]}}">{{crumb[1]}}</a></li>
            {% endfor %}<!--
            -->{% elif share_page %}<!--
            --><li><a href="{{base_url}}share">Share</a></li><!--
            --><li>{{breadcrumbs[1][1]}}</li><!--
            -->{% for crumb in breadcrumbs[2:] %}<!--
            --><li><a href="{{crumb[0]}}">{{crumb[1]}}</a></li><!--
            -->{% endfor %}<!--
            -->{% else %}<!--
            --><li><a href="{{base_url}}cernbox">CERNBox</a></li><!--
            -->{% for crumb in breadcrumbs[1:] %}<!--
            --><li><a href="{{crumb[0]}}">{{crumb[1]}}</a></li><!--
            -->{% endfor %}<!--
            -->{% endif %}
          </ul>
          <div class="row title-bar">
            <div class="col-md-6">
              {% if projects_page %}
              <h1>{% if breadcrumbs|length > 1 %}{{breadcrumbs[-1][1]}}{% else %}My Projects{% endif %}<!--
                -->{% if breadcrumbs|length > 1 %}<a href="{{breadcrumbs[-2][0]}}"><i class="icon-up" aria-hidden="true"></i></a>{% endif %}
              </h1>
              {% elif share_page %}
              <h1>{{breadcrumbs[-1][1]}}<!--
               --><a href="{% if breadcrumbs|length > 3 %}{{breadcrumbs[-2][0]}}{% else %}{{base_url}}share{% endif %}"><i class="icon-up" aria-hidden="true"></i></a>
              </h1>
              {% else %}
              <h1>{% if breadcrumbs|length > 1 %}{{breadcrumbs[-1][1]}}{% else %}CERNBox{% endif %}<!--
                -->{% if breadcrumbs|length > 1 %}<a href="{{breadcrumbs[-2][0]}}"><i class="icon-up" aria-hidden="true"></i></a>{% endif %}
              </h1>
              {% endif %}
            </div>
            <div class="col-md-6 buttons-bar">
              <div id="notebook_toolbar" class="row">

                <div class="no-padding tree-buttons pull-right">
                  <div class="pull-right">

                  {% if share_page %}
                    <button title="{% trans %}Download selected{% endtrans %}" aria-label="{% trans %}Download{% endtrans %}" class="download-button btn btn-default btn-xs"><i class="fa fa-download fa-fw" aria-hidden="true"></i></button>
                    <div class="separator"></div>
                    <button title="Clone project" id="clone-button" class="btn btn-default btn-xs"><i class="icon-clone" aria-hidden="true"></i></button>
                  {% else %}
                    <button title="{% trans %}Shutdown selected notebook(s){% endtrans %}" aria-label="{% trans %}Shutdown{% endtrans %}" class="shutdown-button btn btn-default btn-xs btn-warning"><i class="fa fa-stop" aria-hidden="true"></i></button>
                    <button title="{% trans %}Rename selected{% endtrans %}" aria-label="{% trans %}Rename{% endtrans %}" class="rename-button btn btn-default btn-xs"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i></button>
                    <span class="page-projects"{% if not projects_root %} style="display:none"{% endif %}>
                      <button title="{% trans %}Delete selected{% endtrans %}" aria-label="{% trans %}Delete selected{% endtrans %}" class="delete-button btn btn-default btn-xs btn-danger"><i class="icon-fa-times" aria-hidden="true"></i></button>
                      <div class="separator"></div>
                      <button title="Download Project from git" id="download-project" class="btn btn-default btn-xs"><i class="fa fa-cloud-download fa-fw"></i></button>
                      <button title="Add new Project" id="new-project" class="btn btn-default btn-xs"><i class="icon-fa-plus"></i></button>
                    </span><span class="page-tree"{% if projects_root %} style="display:none"{% endif %}>
                      <button title="{% trans %}View selected{% endtrans %}" aria-label="{% trans %}View{% endtrans %}" class="view-button btn btn-default btn-xs"><i class="fa fa-eye fa-fw" aria-hidden="true"></i></button>
                      <button title="{% trans %}Edit selected{% endtrans %}" aria-label="{% trans %}Edit{% endtrans %}" class="edit-button btn btn-default btn-xs"><i class="fa fa-pencil-square-o fa-fw" aria-hidden="true"></i></button>
                      <button title="{% trans %}Duplicate selected{% endtrans %}" aria-label="{% trans %}Duplicate{% endtrans %}" class="duplicate-button btn btn-default btn-xs"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></button>
                      <button title="{% trans %}Move selected{% endtrans %}" aria-label="{% trans %}Move{% endtrans %}" class="move-button btn btn-default btn-xs"><i class="fa fa-scissors fa-fw" aria-hidden="true"></i></button>
                      <button title="{% trans %}Download selected{% endtrans %}" aria-label="{% trans %}Download{% endtrans %}" class="download-button btn btn-default btn-xs"><i class="fa fa-download fa-fw" aria-hidden="true"></i></button>
                      <button title="{% trans %}Delete selected{% endtrans %}" aria-label="{% trans %}Delete selected{% endtrans %}" class="delete-button btn btn-default btn-xs btn-danger"><i class="icon-fa-times" aria-hidden="true"></i></button>
                      <div class="separator"></div>
                      <button title="Share this Project" id="share-project-button" class="btn btn-default btn-xs"><i class="fa fa-share-alt fa-fw"></i></button>

                      <form id='alternate_upload'  class='alternate_upload'>
                        <span id="notebook_list_info">
                        <span id="upload_span" class="btn btn-xs btn-default btn-upload" role="button" tabindex="0">
                          <input id="upload_span_input" title="{% trans %}Click to browse for a file to upload.{% endtrans %}" type="file" name="datafile" class="fileinput" multiple='multiple' tabindex="-1">
                          <i class="fa fa-upload fa-fw" aria-hidden="true"></i>
                        </span>
                        </span>
                      </form>
                      <div id="new-buttons" class="btn-group">
                        <button title="Add new..." class="dropdown-toggle btn btn-default btn-xs" data-toggle="dropdown">
                          <i class="icon-fa-plus" aria-hidden="true"></i>
                        </button>
                        <ul id="new-menu" class="dropdown-menu" role="menu">
                          <li role="menuitem" class="dropdown-header" id="notebook-kernels">Notebook:</li>
                          <li role="presentation" class="divider"></li>
                          <li role="none" id="new-file">
                            <a role="menuitem" tabindex="-1" href="#">{% trans %}Text File{% endtrans %}</a>
                          </li>
                          <li role="none" id="new-folder">
                            <a role="menuitem" tabindex="-1" href="#">{% trans %}Folder{% endtrans %}</a>
                          </li>
                        </ul>
                      </div>
                    </span>
                  {% endif %}
                    <div class="btn-group">

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="notebook_list" class="notebook_list">
            <div id="notebook_list_header" class="row header">
              <div class="col-md-5 col-xs-9">
                <div class="row">
                  <div class="col-xs-1">
                    <input type="checkbox" class="tree-selector" id="select-all">
                  </div>
                  <div class="col-xs-11 name">
                    <div id="sort_name" >
                      <span class="sort-action" id="sort-name">
                          {% trans %}Name{% endtrans %}
                          <i class="fa fa-sort-desc"></i>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-3 hidden-xs">
              </div>
              <div class="col-md-1 hidden-xs">
                  <span class="sort-action" id="file-size">
                    {% trans %}Size{% endtrans %}
                    <i class="fa fa-sort-desc" style="display: none"></i>
                  </span>
              </div>
              <div class="col-md-1 hidden-xs">
                {% trans %}Status{% endtrans %}
              </div>
              <div class="col-md-2 col-xs-3">
                <div id="last_modified">
                  <span class="sort-action" id="last-modified">
                    {% trans %}Modified{% endtrans %}
                    <i class="fa fa-sort-desc" style="display: none"></i>
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div id="readme"></div>
        </div>
        {% endif %}

        <!-- Running -->
        <div id="running-modal" class="modal fade right" role="dialog">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Running Processes</h4>
              </div>
              <div class="modal-body">
                <div id="running" class="">
                  <div class="panel-group" id="accordion" >
                    <div>
                      <div class="row title-bar">
                        <div class="col-md-12">
                          <h2>
                            Notebooks
                            <a data-toggle="collapse" data-target="#running_notebooks" href="javascript:">
                              <i class="icon-collapse"></i>
                            </a>
                            <a data-toggle="collapse" class="extend_name" href="javascript:"
                               title="Expand/Compress the file path">
                              <i class="fa fa-expand"></i>
                            </a>
                          </h2>
                        </div>
                      </div>
                      <div id="running_notebooks" class="notebook_list list_container collapse in">
                        <div class="row header list_header">
                          <div class="col-xs-9">
                            <div class="row">
                              <div class="col-xs-1">
                              </div>
                              <div class="col-xs-11 name">
                                Name
                              </div>
                            </div>
                          </div>
                          <div class="col-xs-3">
                            Kernel
                          </div>
                        </div>
                        <div id="running_list">
                          <div id="running_list_placeholder" class="row list_placeholder">
                            <div class="list_item">There are no notebooks running</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div>
                      <div class="row title-bar">
                        <div class="col-md-6">
                          <h2>
                            Terminals
                            <a data-toggle="collapse" data-target="#running_terminals" href="javascript:">
                              <i class="icon-collapse"></i>
                            </a>
                          </h2>
                        </div>
                      </div>
                      <div id="running_terminals" class="notebook_list list_container collapse in">
                        <div class="row header list_header">
                          <div class="col-xs-9">
                            <div class="row">
                              <div class="col-xs-1">
                              </div>
                              <div class="col-xs-11 name">
                                Name
                              </div>
                            </div>
                          </div>
                        </div>
                        <div id="terminal_list">
                          <div id="terminal_list_header" class="row list_placeholder">
                            {% if terminals_available %}
                            <div class="list_item">There are no terminals running</div>
                            {% else %}
                            <div class="list_item">Terminals are unavailable</div>
                            {% endif %}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

  </div><!-- ipython-main-app  -->



{% endblock %}

{% block script %}
    {{super()}}
    <script src="{{ static_url("tree/js/main.min.js") }}" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
      $('#element').tooltip('enable')
    </script>
{% endblock %}
