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

{% block stylesheet %}
{{ super() }}
<link rel="stylesheet" href="{{ static_url("css/primehub/home.css") }}" type="text/css" />
{% endblock %}

{% block main %}
<div class="container">
  <div class="row">
    {% if not default_server.active %}
    <div class="text-center">
      <a
        id="start"
        role="button"
        class="btn btn-lg btn-primary"
        href="{{ url }}"
      >
        Start My Server
      </a>
    </div>
    {% endif %}

    {% if (user.spawner and
      user.spawner.ready and
      user.spawner.active_group and
      user.spawner.launch_group and
      user.spawner.active_group != user.spawner.launch_group)
    %}
    <div class="warning">
      <i class="fa fa-info-circle" aria-hidden="true"></i> The current server is launched by another group ({{ user.spawner.launch_group }})
    </div>
    {% endif %}

    {% if default_server.active %}
    <div class="server-info">
      <h2>My Server Information</h2>

      <div class="information">
        <div class="resources">
          <span>Instance Type</span>
          <span>{{ default_server.instance_type }}</span>
        </div>
        <div class="resources">
          <span style="margin-right: 48px;">Image</span>
          <span>{{ default_server.launch_image }}</span>
        </div>
        <div class="resources">
          <span>Creation Time</span>
          <span id='created-time'></span>
        </div>
      </div>

      <hr class="divider" />

      <div class="notebook-actions">
        <a
          id="start"
          role="button"
          class="btn btn-lg btn-primary"
          href="{{ url }}"
        >
          Launch Notebook Server
        </a>

        <a id="stop" role="button" class="btn btn-danger">
          <i id="stop-spinner" style="display: none;" class="fa fa-spinner fa-spin"></i>
          Shutdown Server
        </a>
      </div>
    </div>

    {% endif %}
  </div>

  {% if default_server.active and default_server.ssh_config['enabled'] %}
  <div class="row">
    <div>
      <a id="show-instruction" class="collapsed" data-status="close" data-toggle="collapse" href="#ssh-information">
        <i class="fa fa-chevron-right"></i>
        SSH Server Instruction
      </a>
    </div>
    <div id="ssh-information" class="collapse" style="margin: 0">
      <h3>SSH Server Instruction</h3>
      🔑&emsp;<strong>From your jupyter notebook</strong>
      <p>
        Add your public key into <code>~/.ssh/authorized_keys</code> in your jupyter notebook. <a href="https://docs.primehub.io/docs/next/guide_manual/ssh-config#deploy-public-key-into-jupyterhub" rel="noreferrer" target="_blank">[Doc]</a>
      </p>
      💻&emsp;<strong>From your local machine</strong>
      <p>
        Copy and paste the example below into your <code>~/.ssh/config</code>. Then replace <code>~/.ssh/id_rsa</code> with your private key location.
      </p>
      <p>
        <pre class='snippet'><code>HOST {{ default_server.ssh_config['hostname'] }}
  User jovyan
  Hostname {{ default_server.ssh_config['hostname'] }}
  Port 22
  ForwardAgent yes
  ProxyCommand ssh -W %h:%p -i <i>~/.ssh/id_rsa</i> limited-user@{{ default_server.ssh_config['host'] }} -p {{ default_server.ssh_config['port'] }}
  IdentityFile <i>~/.ssh/id_rsa</i>
  StrictHostKeyChecking no
  UserKnownHostsFile=/dev/null</code></pre>
      </p>
      <p>
        After these steps, you will be able to successfully connect to your notebook.
      </p>
      <p>
        <pre class='snippet'><code>$ ssh {{ default_server.ssh_config['hostname'] }}</code></pre>
      </p>
    </div>
  </div>
  {% endif %}
</div>
{% endblock main %}
{% block script %}
{{ super() }}
<script type="text/javascript">
require(["jquery"], function(
  $
) {
  // Open in new tab when clicking "My server"
  {% if default_server.active %}
    $("#start").attr("target", "primehub-notebook");
    {% if default_server.launch_path %}
      $("#start").attr("href", "/hub/user-redirect/lab/tree/{{ default_server.launch_path }}");
      window.open("/hub/user-redirect/lab/tree/{{ default_server.launch_path }}", "primehub-notebook").focus();
    {% endif %}
  {% endif %}

  // On stop button is clicked, "My server" would be grayed out. And then change to "Start my server"
  // In this case, we don't want to open in new tab
  $("#stop").click(function() {
    $(this).attr('disabled', true);
    $('#stop-spinner').css('display', 'inline-block');
    $("#start").css('opacity', 0);
    $("#ssh-information").hide();
  });

  const shutdownButton = document.getElementById('stop');
  const observer = new MutationObserver((record) => {

    const [shutdownButtonAttribute] = record;

    // ref: https://github.com/jupyterhub/jupyterhub/blob/1.2.2/share/jupyterhub/static/js/home.js#L100-L102
    // After stopping the server successfully, it hides the shutdown button but we can't modify `home.js` directly,
    // so use `MutationObserver` to observe button attribute changed then execute the function.
    if (shutdownButtonAttribute.attributeName === 'style') {
      window.location.reload();
    }
  });

  if (shutdownButton) {
    observer.observe(shutdownButton, { attributes: true });
  } else {
    observer.disconnect();
  }

  // force refresh the access token in case to get 403 in the API call.
  // please see ch12047
  setTimeout(function(){
    window.location.reload();
  }, 5 * 60 * 1000);

  $('#show-instruction').on('click', function() {
    const status = $(this).data('status');

    if (status === 'close') {
      $(this).find('i').removeClass('fa-chevron-right').addClass('fa-chevron-down');
      $(this).data('status', 'open');
    } else {
      $(this).find('i').removeClass('fa-chevron-down').addClass('fa-chevron-right');
      $(this).data('status', 'close');
    }
  });

  try {
    // create_time might get "None" when the hub has restarted.
    const created_time = parseInt('{{ default_server.created_time }}');
    var local_datetime = moment(created_time).format('YYYY-MM-DD HH:mm:ss');
    if (local_datetime === 'Invalid date') {
      local_datetime = '';
    }
    $('#created-time').text(local_datetime);
  } catch (e) {
    $('#created-time').text('');
    console.error(e);
  }

});
</script>

{% endblock %}