@(toolList: play.api.libs.json.JsObject, instances: List[UUID], instanceMap: scala.collection.mutable.Map[UUID, services.ToolInstance])(implicit user: Option[models.User])

@import helper._
@import play.api.Play.current
@import services.ToolManagerPlugin
@import scala.io.Source
@import scala.xml.parsing.XhtmlParser
@import play.api.libs.json._


@main("Tool Manager") {
  <link rel="stylesheet" href="@routes.Assets.at("stylesheets/tableborder.css")" />

  <div class="row">
    <div class="col-md-12">
      <h2>Available analysis environments</h2>
    </div>
  </div>

  <div>
    <a class="btn btn-link" data-toggle="collapse" aria-expanded="false" aria-controls="collapseExample" href="#tools-list">
      <span class="glyphicon glyphicon-collapse-down" title="Expand tools list"></span> Expand list
    </a>
    <div class="collapse" id="tools-list" aria-hidden="true">
      <ul>
        @for(apiPath <- toolList.keys) {
          <li>
            <b>@{
                var x = (toolList \ apiPath \ "name")
                x.toString.replace("\"","")
            }</b></br>&nbsp;&nbsp;&nbsp;&nbsp;
            @{
              var x = (toolList \ apiPath \ "description")
              x.toString.replace("\"","")
            }
          </li>
        }
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <h2>Active instances</h2>
    </div>
  </div>

  <div>
  @instances.map { instanceID =>
    @instanceMap.get(instanceID) match {
      case Some(inst) => {
          <div class = "panel panel-default" id="@instanceID-listitem">
            <div class="panel-body">
              <div class="row">
                <div class="col-md-12 col-sm-12 col-lg-12">

                  <h2>
                    @if(inst.url == "") {
                      @inst.name (not yet ready)
                    } else {
                      <a href="@inst.url.replace("\"","")" target="_blank">@inst.name</a>
                    }
                  </h2>

                  <div class ="row">
                    <div class="col-md-6 col-sm-6 col-lg-6">
                      <ul class="list-unstyled">
                        @inst.owner match {
                          case Some(u) => {
                            <li>@Messages("owner.label"): <a href= "@routes.Profile.viewProfileUUID(u.id)"> @u.fullName </a></li>
                          }
                          case None => {}
                        }

                        <li>Environment: <b>@Html(inst.toolName)</b></li>
                        <li>Created @inst.created.format("MMM dd, yyyy")</li>
                        <li>Updated @inst.updated.format("MMM dd, yyyy")</li>

                        <li>
                          @if(inst.uploadHistory.keys.size > 0) {
                            <a class="btn btn-link" data-toggle="collapse" aria-expanded="false" aria-controls="collapseExample" href="#datasets-@inst.id">
                              <span class="glyphicon glyphicon-collapse-down" title="@inst.uploadHistory.keys.size datasets"></span>
                              Expand upload history
                            </a>
                            <div class="collapse" id="datasets-@inst.id" aria-hidden="true">
                              <div class="well"> @{
                                var dsList = ""
                                instanceMap.get(instanceID) match {
                                  case Some(instance) => {
                                    for((dsId, (dsName, upTime, uploaderId)) <- instance.uploadHistory) {
                                      val dsURL = controllers.routes.Datasets.dataset(dsId).url

                                      dsList += "<b>" + upTime + "</b>: <a href=" + dsURL + ">" + dsName + "</a></br>"
                                    }
                                  }
                                  case None => {}
                                }
                                Html(dsList)
                              }
                              </div>
                            </div>
                          }
                        </li>
                      </ul>
                    </div>
                    <div class="col-md-6 col-sm-6 col-lg-6">
                      <ul class="list-unstyled">
                          <li>
                            <a id='download-dataset-url' href="#" onclick="removeInstance('@inst.toolPath','@instanceID')" class="btn btn-link"role="button">
                              <span class="glyphicon glyphicon-stop"></span>
                              Stop Instance
                            </a>
                          </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        }
      case None => {}
    }
  }
  </div>

  <script>
    function removeInstance(toolPath, instanceID) {
      // Get current status from ToolManagerPlugin and refresh sidebar table
      var request = new XMLHttpRequest();
      request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
          location.reload();
        }
      }

      request.open("GET", jsRoutes.controllers.ToolManager.removeInstance(toolPath, instanceID).url, true);
      request.send();
    }
  </script>
}