{% extends "base.html" %}
{% load htmlattrs static converters %}

{% block title %}Webapp Creation for application {{ webapp.name }}{% endblock %}

{% block breadcrumb %}
<li class="breadcrumb-item"><a href="{% url 'main:webapp_list' %}">Applications</a></li>
<li class="breadcrumb-item"><a href="{% url 'main:webapp_detail' webapp.docker_name %}">{{ webapp.name | fancy_webapp_name | title}}</a></li>
<li class="breadcrumb-item active" aria-current="page">Sandbox</li>
{% endblock %}

{% block content %}
<div class="container">
  <div class="allgo-page">
    <div class="row">
      <div class="col">
        <div class="tab-content">
          <ul class="nav nav-tabs">
            <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#ssh"><i class="fas fa-terminal"></i> SSH</a></li>
	    {% comment    Disabled until #227 is implemented %}
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#docker"><i class="fab fa-docker"></i> Docker</a></li>
	    {% endcomment %}
          </ul>
          <div class="tab-pane active" id="ssh">

            {###########  IDLE  ###########}
            {% if webapp.sandbox_state == webapp.IDLE %}
            <h5 class="mt-3">You do not have any active sandbox</h5>
            <p>In order to create and publish a new version of your application, you can either:
            <ul>
              <li>start a sandbox, connect to it via ssh, then install the
                application manually</li>
              <li>create a docker image and push it to allgo (see the Docker pane)</li>
            </ul>
            </p>

            <h5 class="mt-3">Start a sandbox</h5>

            {% if versions %}
            <h6 class="mt-3">From an existing version of your application</h6>
            <div class="form-inline">
              <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="start"/>
                <select name="webapp_version_id" id="webapp-version-id" class="form-control">
                  {% for version in versions %}
                  <option value="{{ version.id }}">{{ version.number }}</option>
                  {% endfor %}
                </select>
                <button type="submit" class="btn btn-primary">Start</button>
              </form>
            </div>
            {% endif %}

            <h6>From scratch</h6>
            <div class="form-inline">
              <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="start"/>
                <select name="docker_os_id" id="docker-os" class="form-control">
                  {% for docker_os in  docker_os_list %}
                  <option value="{{ docker_os.id }}">{{ docker_os.name }}:{{ docker_os.version }}</option>
                  {% endfor %}
                </select>
                <button type="submit" class="btn btn-primary">Start</button>
              </form>
            </div>

            {###########  RUNNING  ###########}
            {% elif webapp.sandbox_state == webapp.RUNNING %}

            <h5 class="mt-3">Your sandbox is running</h5>

            <p class="mt-3">
            In order to install your application, you can connect in SSH using
            the command below or click to the Docker panel if you prefer to use this method
            or are using continuous development. 

            <h5>1. Connect via SSH</h5>

            {% if not user.allgouser.sshkey %}
            <p><span class="text-danger"><i class="fas fa-exclamation-circle text-danger"></i> important:</span>
            you must <a href="{% url 'main:user_ssh_add' %}">add your public SSH key</a> to your account before using this command
            </p>
            {% endif %}

            <pre class="language-bash mb-3"><code class="language-*">{{ ssh_command }}</code></pre>

            <h5>2. Install the application</h5>
            
            <p>The entrypoint configured for your webapp is:
            <tt>{{ webapp.entrypoint }}</tt>. This is the command that is
            executed when a job is run.</p>

            <h5>3. Test your webapp</h5>

            <p>You can use the <a href="{% url 'main:webapp_detail' webapp.docker_name %}"
                                  target="_blank">job creation form</a> to run a job.</p>


            <h5>4. Close your sandbox</h5>

            <p>Once you are done, you can either:
              <ul>
                <li><b>commit</b> your work, this will save the content of your
                  sandbox and make it a new version of your app</li>
                <li><b>rollback</b>, this will throw away all changes done in the
                  sandbox since it was started.</li>
              </ul>
            </p>

            <hr/>
            <h6>Commit panel</h6>
            <form method="post">
              {% csrf_token %}
              <input type="hidden" name="action" value="commit"/>
              <div class="form-row">
                <div class="col-md-6 col-lg-4">
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" name="version-action" value="replace-version">
                      <label class="form-check-label" for="example-radio">Replace version</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" name="version-action" value="new-version">
                      <label class="form-check-label" for="example-radio">New version</label>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6">
                  <div class="form-group">
                    <select class="form-control d-none" name="version-select">
                      {% for version in versions %}
                      <option data-description="{{version.description}}">{{ version.number }}</option>
                      {% endfor %}
                    </select>
                    <input type="text" class="form-control d-none" name="version-new" placeholder="new version number">
                  </div>
                </div>
              </div>

              <div class="form-row">
                <div class="col-lg-10">
                  <div class="form-group">
                    <label>Description</label>
                    <input type="text" name="description" class="form-control">
                  </div>
                </div>
              </div>
              <div class="form-group">
                <button type="submit" class="btn btn-primary">
                  <i class="fas fa-download"></i> Commit</button>
              </div>
            </form>

            <p> If you whish to drop your changes, your can perform a rollback.
            <strong>CAUTION: this will discard all the work made since the sandbox was
              started</strong></p>

            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#rollback_modal">
              <i class="fas fa-times-circle"></i> Rollback
            </button>

            {#  rollback modal dialog  #}
            <div class="modal" id="rollback_modal" tabindex="-1" role="dialog">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-exclamation-triangle"></i> rollback confirmation</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <p>This action will <strong>permanently discard all
                      changes</strong> made since the sandbox of application
                    <strong>“{{ webapp.name }}”</strong> was started.</p>
                    <p>Are you sure you want to proceed?</p>
                  </div>
                  <form method="post">
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                      {% csrf_token %}
                      <input type="hidden" name="action" value="rollback"/>
                      <button type="submit" class="btn btn-danger">
                        <i class="fas fa-times-circle"></i> Confirm rollback
                      </button>
                    </div>
                  </form>
                </div>
              </div>
            </div>

            {###########  STARTING  ###########}
            {% elif webapp.sandbox_state == webapp.STARTING %}
            <div class="text-center">
              <p><i class="fas fa-spinner fa-pulse fa-5x"></i><span class="text-hide">Waiting for the sandbox creation</span></p>
              <p>Please wait, your sandbox is in preparation.</p>
            </div>

            {###########  STOPPING  ###########}
            {% elif webapp.sandbox_state == webapp.STOPPING %}
            <div class="text-center">
              <p><i class="fas fa-spinner fa-pulse fa-5x"></i><span class="text-hide">Waiting for the sandbox termination</span></p>
              <p>Please wait, your sandbox is stopping.</p>
            </div>

            {###########  START_ERROR  ###########}
            {% elif webapp.sandbox_state == webapp.START_ERROR %}

            <h5 class="mt-3">Sandbox start error</h5>

            <p>Your sandbox failed to start</p>
            <form method="post">
              {% csrf_token %}
              <input type="hidden" name="action" value="retry"/>
              <button type="submit" class="btn btn-primary">Retry</button>
            </form>
            <form method="post">
              {% csrf_token %}
              <input type="hidden" name="action" value="abort"/>
              <button type="submit" class="btn btn-danger">Abort</button>
            </form>

            {###########  STOP_ERROR  ###########}
            {% elif webapp.sandbox_state == webapp.STOP_ERROR %}
            <h5 class="mt-3">Sandbox stop error</h5>

            <p>Your sandbox failed to stop</p>

            {# NOTE:  we do not show an 'Abort' button because this action  #}
            {#        is not implemented (because i am not sure that it is  #}
            {#        a good idea to throw away the version being committed #}
            <form method="post">
              {% csrf_token %}
              <input type="hidden" name="action" value="retry"/>
              <button type="submit" class="btn btn-primary">Retry</button>
            </form>

            {% endif %}

            <p><i class="fas fa-question-circle"></i> Need help? <a href="#" title="A||go user documentation">report to the documentation</a>.</p>
          </div>

          <div class="tab-pane" id="docker">
            <p class="mt-3">You can as well directly push your docker image.</p>

            <pre class="language-bash"><code class="language-*">docker login --username {{ user.get_username }} {{ request.get_host }}/{{ webapp.docker_name }}
docker build -t {{ webapp.docker_name }} .
docker push {{ request.get_host }}/{{ webapp.docker_name }}:&lt;version&gt;</code></pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block messages %}
{{ block.super }}
{% include 'partials/_form_messages.html' %}
{% endblock %}


{% block javascript %}
{{ block.super }}
{% if webapp.sandbox_state == webapp.STARTING or webapp.sandbox_state == webapp.STOPPING %}
<script src="{% static 'js/json_seq_events.js' %}"></script>
<script>
json_seq_event_listener("/aio/apps/{{ webapp.docker_name }}/events",
    function(msg) {
      if (msg == undefined) {
              console.log("events channel closed (EOF from server)");
              return;
      }
      if (msg.sandbox_state) {
        // refresh the page when sandbox is ready
        if (!["STARTING", "STOPPING"].includes(msg.sandbox_state)) {
          location.reload()
        }
      }
    },
    function(status, msg) {
      console.log("error:", status, msg);
    }); 

</script>

{% endif %}

<script>
(function() {
  function reset_description(replace) {
    if (replace) {
      $("input[name='description']").val(
          $("[name='version-select'] > :selected").attr("data-description"))
    } else {
      $("input[name='description']").val("")
    }
  }
  function switch_version_display(replace) {
    if (replace) {
      $("[name='version-select']").removeClass("d-none")
      $("[name='version-new']").addClass("d-none")
    } else {
      $("[name='version-new']").removeClass("d-none")
      $("[name='version-select']").addClass("d-none")
    }
    reset_description(replace);
  }

  $("[name='version-action']").change(function(ev) {
    switch_version_display(ev.target.value == "replace-version");
  });
  $("[name='version-select']").change(function(){
    reset_description(true);
  })

  {% if webapp.sandbox_version %}
    $("[value='replace-version']").prop("checked", true)
    $("[name='version-select']").val("{{webapp.sandbox_version.number}}");
    switch_version_display(true);
  {% else %}
    $("[value='new-version']").prop("checked", true)
    switch_version_display(false);
  {% endif %}

}());
</script>
{% endblock %}