{% extends "templates/home.html" %}

{% block stylesheet %}
<meta id="base-url" data-url="{{ binder_base_url }}">
<meta id="badge-base-url" data-url="{{badge_base_url}}">
{# static files from binder #}
<script src="{{ static_binder }}dist/bundle.js?v={{ static_version }}"></script>
<link href="{{ static_binder }}dist/styles.css?v={{ static_version }}" rel="stylesheet"/>
<link rel="stylesheet" href="{{ static_url("components/bootstrap/dist/css/bootstrap.min.css") }}" type="text/css"/>
{{ super() }}
<link rel="stylesheet" href="{{ static_url("css/persistent_bhub.css") }}" type="text/css"/>
{% endblock stylesheet %}

{% block scripts %}
    <script src="{{static_url("components/requirejs/require.js") }}" type="text/javascript" charset="utf-8"></script>
    <script src="{{static_url("components/jquery/dist/jquery.min.js") }}" type="text/javascript" charset="utf-8"></script>
{#    <script src="{{static_url("components/bootstrap/dist/js/bootstrap.min.js") }}" type="text/javascript" charset="utf-8"></script>#}
{% endblock scripts %}

{% block main %}
<div id="main-container" class="container">
  {% block binder_header %}
    <div id="header" class="text-center">
        {#      <h3>Turn a Git repo into a collection of interactive notebooks</h3>#}
        <div id="explanation">
            Have a Binder-Ready repository? With Persistent BinderHub, turn this repository into a persistent Jupyter
            environment, allowing you to continue your analysis from anywhere at any time.
        </div>
    </div>
  {% endblock binder_header %}
  {% block projects_form %}
  <div class="row form-group"></div>
  <div class="row build-project-container">
    <div class="col-lg-12 build-form-container">
    {# copied from https://github.com/jupyterhub/binderhub/blob/207ae704752cde82f33fc771a3b58aa1ecc04b6d/binderhub/templates/index.html#L34 #}
    {% block binder_form %}
      <form id="build-form" class="form jumbotron build-form">
        <h3 id="form-header" class='row'>Build and launch a new repository</h3>
        <input type="hidden" id="provider_prefix" value="gh"/>
        <div class="form-group row">
          <label for="repository">GitHub repository name or URL</label>
          <div class="input-group">
            <div class="input-group-btn" id="url-type-btn">
              <button type="button" class="btn btn-secondary dropdown-toggle"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                title="Specify source of repository"
              >
              <span id="provider_prefix-selected">
              GitHub
              </span>
              <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" id="provider_prefix_sel">
                <li class="dropdown-item" value="gh"><a href="#">GitHub</a></li>
                <li class="dropdown-item" value="gist"><a href="#">Gist</a></li>
                <li class="dropdown-item" value="gl"><a href="#">GitLab.com</a></li>
                <li class="dropdown-item" value="git"><a href="#">Git repository</a></li>
                {# TODO enable zenodo, figshare and others #}
{#                <li class="dropdown-item" value="zenodo"><a href="#">Zenodo DOI</a></li>#}
{#                <li class="dropdown-item" value="figshare"><a href="#">Figshare DOI</a></li>#}
{#                <li class="dropdown-item" value="hydroshare"><a href="#">Hydroshare resource</a></li>#}
{#                <li class="dropdown-item" value="dataverse"><a href="#">Dataverse DOI</a></li>#}
              </ul>
            </div>
            <input class="form-control" type="text" id="repository" data-lpignore="true" placeholder="GitHub repository name or URL"/>
          </div>
        </div>
        <div class="form-row row">
          <div class="form-group col-md-4">
            <label for="ref">Git branch, tag, or commit</label>
            <input class="form-control" type="text" id="ref" placeholder="Git branch, tag, or commit"/>
          </div>
          <div class="form-group col-md-6">
            <label for="filepath"></label>
            <div class="input-group">
              <input class="form-control" type="text" id="filepath"
                placeholder=""
              />
              <div class="input-group-btn" id="url-or-file-btn">
                <button type="button" class="btn btn-secondary dropdown-toggle"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                  title="Specify whether the path to open is a URL or a file"
                >
                <span id="url-or-file-selected">
                {{ 'URL' if urlpath else 'File' }}
                </span>
                <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li class="dropdown-item"><a href="#">File</a></li>
                  <li class="dropdown-item"><a href="#">URL</a></li>
                </ul>
              </div>
            </div>
          </div>

          <div class="form-group col-md-2">
            <div class="btn-group" id="launch-buttons">
              <button id="submit" class="btn-submit" type="submit">launch</button>
            </div>
          </div>
        </div>

        {% block projects %}
        {% set projects = user.spawner.get_state_field('projects') %}
        <div class="projects-container{% if not projects %} no-projects{% endif %}">
          <h3>Your Projects</h3>
          <div class="table-responsive">
           <table id="your-projects" class="table table-striped{% if not projects %} hidden{% endif %}">
               <thead>
               <tr>
                   <th>Repository</th>
                   <th>Commit</th>
                   <th>Last used</th>
                   <th>Actions</th>
               </tr>
               </thead>
               <tbody>
                  {% for project in projects %}
                  <tr>
                      {% set project_running = loop.index == loop.length and user.running %}
                      {% set project_active = loop.index == loop.length and user.spawner.active %}
                      {% set project_not_active = user.spawner._stop_pending or (user.spawner.active and loop.index != loop.length) %}
                      <td class="projects-cell projects-display-name"><a href="{{ project[0] }}" target="_blank">{{ project[3] }}</a></td>
                      <td class="projects-cell">{{ project[2][:7] }}</td>
                      <td class="projects-cell time-col" id="last-used-{{ project[2] }}">{% if project_running %}running{% else %}{{ project[4] }}{% endif %}</td>
                      <td class="projects-cell">
                          {% if project_running %}
                          {# last element in projects is currently running, add Stop button for it #}
                          <a id="stop" role="button" class="btn btn-sm btn-danger" data-ref="{{ project[2] }}">Stop</a>
                          {% endif %}
                          {# add launch button for each element, if user has no server running #}
                          {# if last element is running, hide launch buttons of all other elements #}
                          <a role="button" id="launch-{{ project[2] }}"
                             class="project-launch btn btn-sm {% if project_active %}btn-primary{% else %}btn-warning{% endif %}{% if project_not_active %} hidden{% endif %}"
                             href="{% if project_active %}{{ url }}{% else %}#{% endif %}"
                             data-url="{{ project[0] }}">
                             {% if project_active %}My Server{% else %}Launch{% endif %}
                          </a>
                          <a role="button" id="delete-{{ project[2] }}"
                             class="project-delete btn btn-sm btn-danger{% if user.spawner.active %} hidden{% endif %}"
                             href="#" title="Delete from projects list and persistent storage"
                             data-url="{{ project[0] }}"
                             data-name="{{ project[3] }}"
                             data-toggle="modal" data-target="#delete-project">
                             Delete
                          </a>
                       </td>
                  </tr>
                  {% endfor %}
               </tbody>
           </table>
          <span id="no-projects" {% if projects %}class="hidden"{% endif %}>You have no projects.</span>
          </div>
        </div>
        {# Modal for project deletion dialog #}
        <div class="modal fade" id="delete-project" tabindex="-1" role="dialog" aria-labelledby="delete-project-label">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button id="delete-close" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="delete-project-label">Delete a project</h4>
              </div>
              <div class="modal-body" id="delete-project-body">
                <span id="delete-project-text">Are you sure that you want to delete the project?</span>
                <br>
                <label class="delete-project-label"><input type="checkbox" id="delete-on-disk"> I do understand that this also deletes the files associated with this project.</label>
                <input type="hidden" id="delete-url" value=""/>
                <input type="hidden" id="delete-id" value=""/>
                <input type="hidden" id="delete-name" value=""/>
              </div>
              <div id="delete-project-error" class="alert alert-danger hidden"></div>
              <div class="modal-footer">
                <button type="button" id="delete-confirm" class="btn btn-default btn-danger" disabled>Delete now</button>
              </div>
            </div>
          </div>
        </div>
        {% endblock projects %}


        <!--url section-->
        <div class="url row">
            <div class="dropdownmenu">
              <label>Copy the URL below and share your Binder with others:</label>
            </div>
            <div class="url-row">
              <pre id="basic-url-snippet" data-default="Fill in the fields to see a URL for sharing your Binder."></pre>
              <img class="icon clipboard" src="{{ static_binder }}images/copy-icon-black.svg?v={{ static_version }}" data-clipboard-target="#basic-url-snippet" alt="Copy to clipboard">
            </div>
        </div>

        <div class="badges row">
            <div class="dropdownmenu" id="toggle-badge-snippet">
              <label>Copy the text below, then paste into your README to show a binder badge: <img id="badge" src="{{ static_binder }}images/badge_logo.svg?v={{ static_version }}"></label>
              <a id="badge-link"></a>
              <a href="#" title="show badge snippets"><span id="badge-snippet-caret" class="glyphicon glyphicon-triangle-right"></span></a>
            </div>
            <div id="badge-snippets" class="hidden">
              <!--Markdown section-->
              <div  class="badge-snippet-row">
                 <pre id="markdown-badge-snippet" data-default="Fill in the fields to see the markdown badge snippet."></pre>
                 <img class="icon" src="{{ static_binder }}images/markdown-icon.svg?v={{ static_version }}">
                 <img class="icon clipboard"
                    src="{{ static_binder }}images/copy-icon-black.svg?v={{ static_version }}"
                    data-clipboard-target="#markdown-badge-snippet"
                    alt="Copy markdown link to clipboard">
              </div>
              <!--RST section-->
              <div  class="badge-snippet-row">
                  <pre id="rst-badge-snippet" data-default="Fill in the fields to see the rST badge snippet."></pre>
                  <img class="icon" src="{{ static_binder }}images/rst-icon.svg?v={{ static_version }}">
                  <img class="icon clipboard" src="{{ static_binder }}images/copy-icon-black.svg?v={{ static_version }}"
                    data-clipboard-target="#rst-badge-snippet"
                    alt="Copy rst link to clipboard">
              </div>
            </div>
        </div>

        <div id="build-progress" class="progress on-build hidden row">
          <div id="phase-failed" class="progress-bar progress-bar-danger progress-bar-striped hidden" style="width: 100%">
            Failed. Try refreshing this page in a few seconds.
          </div>
          <div id="phase-waiting" class="progress-bar progress-bar-danger progress-bar-striped active hidden" style="width: 10%">
            Waiting
          </div>
          <div id="phase-already-built" class="progress-bar progress-bar-warning progress-bar-striped active hidden" style="width: 90%">
            Already built!
          </div>
          <div id="phase-building" class="progress-bar progress-bar-warning progress-bar-striped active hidden" style="width: 40%">
            Building
          </div>
          <div id="phase-pushing" class="progress-bar progress-bar-info progress-bar-striped active hidden" style="width: 40%">
            Pushing
          </div>
          <div id="phase-launching" class="progress-bar progress-bar-success progress-bar-striped active hidden" style="width: 10%">
            Launching
          </div>
        </div>

        <div id="log-container" class="panel panel-default on-build hidden row">
          <div id="toggle-logs" class="panel-heading">
            Build logs
            <button type="button" class="btn btn-link btn-xs pull-right">show</button>
          </div>
          <div class="panel-body hidden">
            <div id="log"></div>
          </div>
        </div>
      </form>
    {% endblock binder_form %}
    </div>
  </div>

  <div class="row form-group"></div>
  {% endblock projects_form %}

  {% block how_it_works %}
  <div id="how-it-works">
  <h3 class="text-center">How it works</h3>

  <div class="row">
    <div class="col-md-1 col-md-offset-2 point-container">
      <span class="point point-orange">1</span>
    </div>
    <div class="col-md-7 front">
      <span class="front-em">Build repositories like <a href="http://mybinder.org/">MyBinder.org</a></span><br>Enter your repository information in the <a href="https://mybinder.readthedocs.io/en/latest/introduction.html">Binder</a> form.
      We build and launch your <a href="https://notebooks.gesis.org/gallery/">binder-ready</a> repository so that you can interact with it just like on <a href="https://binderhub.readthedocs.io/en/latest/known-deployments.html">any other</a> Binder deployment.
      Once a repository has been launched it will be added to the list of your projects.
    </div>
  </div>

  <div class="row">
    <div class="col-md-1 col-md-offset-2 point-container">
      <span class="point point-red">2</span>
    </div>
    <div class="col-md-7 front">
      <span class="front-em">Persist /projects like a <a href="https://github.com/jupyter/docker-stacks/issues/358#issuecomment-288844834">Jovyan</a> </span><br>You are not just a visitor, but a true resident on <a href="">Jupyter</a>.
      Your projects have a persistent $HOME directory whose contents are mirrored at /projects. Use the buttons in the table to launch, stop or delete an existing project.
      The <a href="https://github.com/gesiscss/data_science_image">data science</a>  image can be your place to begin. To update a project-image use the Binder form and for files use git.
      You can launch one project at a time and have up to 5 projects in total.
    </div>
  </div>
  </div>
  {% endblock how_it_works %}

{#  {% block binder_questions %}#}
{#  <div class="row text-center">#}
{#    <div id="questions">questions?<br />read#}
{#        <a href="https://discourse.jupyter.org/t/a-persistent-binderhub-deployment/2865" target='_blank'>this post</a>,#}
{#        join the discussion and see the <a href="https://github.com/gesiscss/orc" target='_blank'>code</a>#}
{#    </div>#}
{#  </div>#}
{##}
{#  <div class="row form-group"></div>#}
{#  <div class="row form-group"></div>#}
{#  {% endblock binder_questions %}#}
</div>
{% endblock main %}

{% block script %}
<script type="text/javascript">

require(["jquery", "jhapi", "moment"], function($, JHAPI, moment) {
  "use strict";

  var base_url = window.jhdata.base_url;
  var user = window.jhdata.user;
  var api = new JHAPI(base_url);

  // Customize stop server button
  $("#stop").click(function() {
    $(this).text('Stopping')
           .attr("disabled", true)
           .attr("title", "Your server is stopping")
           .click(function() {
               return false;
           });
    // hide "My Server" button while stopping
    $(this).next('a').addClass('hidden');
    api.stop_server(user, {
      success: function() {
        $("#stop").hide();
        var ref = $('#stop').data('ref');
        $('#last-used-'+ref).text(moment().calendar());
        // change text from "My Server" to "Launch" and make all launch buttons visible
        $('.project-launch').attr('href', '#').text('Launch').removeClass('btn-primary').addClass('btn-warning').removeClass('hidden');
        $('.project-delete').removeClass('hidden');
      }
    });
  });

  // nice formatting for "Last used" column in projects table
  // copied from admin.js
  $(".time-col").map(function (i, el) {
    // convert ISO datestamps to nice momentjs ones
    el = $(el);
    if (el.text() !== "running" ) {
        let m = moment(new Date(el.text().trim()));
        //el.text(m.isValid() ? m.fromNow() : "never");
        el.text(m.isValid() ? m.calendar(): "never");
    }
  });
});


$(document).ready(function() {
    // Project launch through table
    $('.project-launch').click(function(e) {
        // if server is running, this button holds the url of the server
        // if server is not running, do following
        if ($(this).attr('href') === '#') {
            e.preventDefault();
            //$("#build-form").get(0).scrollIntoView();
            // fill the binder form with values of selected repo and submit
            var ref = $(this).prop('id').replace("launch-","");
            var repo_url = $(this).data('url');
            var repo_url_lower = repo_url.toLowerCase();
            var provider_prefix;
            var provider_prefix_selected;
            // TODO handle provider prefix for other providers
            if (repo_url_lower.indexOf('github.com') !== -1 && repo_url_lower.indexOf('gist.github.com') === -1) {
               provider_prefix = 'gh';
               provider_prefix_selected = 'GitHub';
            } else if (repo_url_lower.indexOf('gitlab.com') !== -1) {
               // gitlab.com
               provider_prefix = 'gl';
               provider_prefix_selected = 'GitLab.com';
            } else if (repo_url_lower.indexOf('gist.github.com') !== -1) {
               // gist.github.com
               provider_prefix = 'gist';
               provider_prefix_selected = 'Gist';
            } else {
               provider_prefix = 'git';
               provider_prefix_selected = 'Git repository';
            }
            $('#provider_prefix').val(provider_prefix);
            $('#provider_prefix-selected').text(provider_prefix_selected);
            $('#ref').val(ref);
            $('#repository').val(repo_url);
            $('#filepath').val('');
            $('button#submit').trigger('click');
            // hide all launch and delete buttons
            $('.project-launch').addClass('hidden');
            $('.project-delete').addClass('hidden');
            return false;
        }
    });

    // Project deletion
    // we would use show.bs.modal event instead of click: https://getbootstrap.com/docs/3.4/javascript/#modals-events
    // but it bootstrap methods fails because we load jquery after bootstrap js
    // see: https://stackoverflow.com/questions/25757968/bootstrap-modal-is-not-a-function
    $('.project-delete').on('click', function (event) {
        // reset parts of dialog
        $('#delete-project-body').children().removeClass("hidden");
        $('#delete-project-error').text('').addClass("hidden");
        $('#delete-on-disk').prop("checked", false);
        $('#delete-confirm').text("Delete now").removeClass("hidden").prop("disabled", true);
        // fill hidden inputs, they will be used in ajax call to delete project
        $('#delete-url').val($(this).data('url'));
        $('#delete-id').val($(this).prop('id'));  // this will be used in success return of ajax call to delete project row from table
        var project_name = $(this).data('name');
        $('#delete-name').val(project_name);
        // update text in confirm dialog
        $('#delete-project-label').text('Delete project: ' + project_name);
        $('#delete-project-text').text('Are you sure that you want to delete "' + project_name +'" project?');
    });
    $('#delete-on-disk').on('click', function (event) {
        // Enable/disable "Delete now" button according to delete-on-disk checkbox
        $('#delete-confirm').prop("disabled", !$(this).prop("checked"));
    });
    function display_error(message) {
        // display error message in modal
        $('#delete-project-body').children().addClass("hidden");
        $('#delete-project-error').text(message).removeClass("hidden");
        $('#delete-confirm').addClass("hidden");
    }
    $('#delete-project').on('hide.bs.modal', function (e) {
        // reset hidden inputs, when modal is closed
        $('#delete-url').val('');
        $('#delete-name').val('');
        $('#delete-id').val('');
    });
    $('#delete-confirm').on('click', function (event) {
        $('#delete-confirm').prop("disabled", true).text("Deleting");
        var body = JSON.stringify({repo_url: $('#delete-url').val(),
                                   name: $('#delete-name').val(),
                                   id: $('#delete-id').val()});
        var user_name = window.jhdata.user;
        var url = '/hub/api/projects/'+user_name;
        console.log(url, body);
        $.ajax({
            url: url,
            type: 'DELETE',
            data: body,
            success: function (response) {
                if ("error" in response) {
                    // show error message only, user should handle the error first
                    display_error(response['error']);
                } else {
                    // project is deleted
                    // remove project from "Your Projects" table
                    $("#"+response["id"]).closest('tr').remove();
                    if ($('#your-projects tr').length === 1) {
                        // user has no projects, so remove empty projects table
                        $('#your-projects').addClass("hidden");
                        $('#no-projects').removeClass("hidden");
                        $('.projects-container').addClass("no-projects");
                    }
                    // close modal
                    // .modal fails because we load jquery after bootstrap js
                    // see: https://stackoverflow.com/questions/25757968/bootstrap-modal-is-not-a-function
                    //$('#delete-project').modal('hide');
                    $('#delete-close').trigger('click');
                }
                },
            error: function () {
                display_error("Error. Please refresh the page and try again.");
            }
        });
    });
});
</script>

<script type="text/javascript">
// initialize binder form
indexMain();
</script>
{% endblock %}