<head>
  <!-- Metadata to make scaling work better -->
  <meta charset="utf-8">
  <meta
    http-equiv="X-UA-Compatible"
    content="IE=edge"
  >
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>Launch</title>

  <!-- jQuery -->
  <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"
  ></script>

  <!-- Bootstrap -->
  <link
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
    crossorigin="anonymous"
  >
  <script
    src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"
  ></script>

  <!-- Import google font to match Canvas authorization page font -->
  <link
    href="https://fonts.googleapis.com/css?family=Lato"
    rel="stylesheet"
  >

  <!-- Inline styles for simplicity -->
  <!-- Designed to replicate Canvas authorization page to minimize confusion -->
  <style type="text/css">
    /* ----- PAGE/LAYOUT: ----- */

    /* Body (background color and font to match Canvas authorization page) */
    body {
      background-color: #222;
      text-align: center;
      font-family: 'Lato', sans-serif;
    }

    /* Container so the content won't span the whole width of the page */
    .page-container {
      margin-left: 30px;
      margin-right: 30px;
      margin-top: 10px;
      max-width: 850px;
      width: 100%;
      background-color: #333;
      color: black;
      border-radius: 5px;
      -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
      box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
      border: 0.5px solid gray;
      display: inline-block;
      text-align: left;
    }

    /* Content header (top of page, separated from content) */
    .header {
      border-bottom: 1px solid black;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 20px;
      padding-bottom: 20px;
      background-color: #333;
      color: white;
      border-radius: 5px 5px 0 0;
    }

    /* Page title */
    .title {
      font-size: 1.5em;
      font-weight: bold;
    }

    /* Page subtitle, slightly dimmed */
    .subtitle {
      font-size: 1.2em;
      color: #ccc;
    }

    /* Lower portion of the page, white background, the content: course list */
    .content-container {
      background-color: white;
      border-radius: 0 0 5px 5px;

      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;
      padding-bottom: 10px;

      margin-bottom: 10px;
      margin: 0;
    }

    /* Item Box */
    .item {
      border-radius: 5px;
      border: 1px solid darkgray;
      background: #555;
      color: white;
      font-weight: bold;
      padding: 5px;
      display: flex;
      width: 100%;
      align-items: center;
      margin-bottom: 5px;
    }

    .item-label {
      flex-grow: 1;
      padding: 5px;
    }

    .item-title {
      font-size: 25px;
    }

    .launch-assignment-button {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow-x: hidden;
      text-align: left;
    }

    .modal-body {
      max-height: calc(100vh - 200px);
      overflow-y: scroll;
    }

    .scrollpane {
      max-height: 230px;
      overflow-y: auto;
    }
  </style>

  <script type="text/javascript">
    <% const choosingPath = (customLaunchPaths.length > 0 && !isSelfLaunch); %>

    /* --------------------------- Search --------------------------- */
    var tas = <%- JSON.stringify(tas.map((ta) => { return ta.profile; })) %>;
    var students = <%- JSON.stringify(students.map((student) => { return student.profile; })) %>;
    function updateSearch(type) {
      var query = document.getElementById(type + '-query').value.toLowerCase().trim();

      var users = (
        (type === 'ta')
          ? tas
          : students
      );

      // Loop through and hide/show based on search query
      var i;
      var numShown = 0;
      for (i = 0; i < users.length; i++) {
        var profile = users[i];
        var showThisOne;
        if (query.length === 0) {
          // No query. Show them all!
          showThisOne = true;
        } else {
          // Filter by name or Canvas id
          showThisOne = (
            profile.name.toLowerCase().includes(query)
            || profile.sortable_name.toLowerCase().includes(query)
            || String(profile.id).includes(query)
          );
        }

        // Show/hide
        var selector = (
          (type === 'ta')
            ? '#ta-' + i
            : '#student-' + i
        );
        if (showThisOne) {
          $(selector).show(50);
          numShown += 1;
        } else {
          $(selector).hide(50);
        }
      }

      // Show/hide the "none found" message
      var selector = (
        (type === 'ta')
          ? '#ta-none'
          : '#student-none'
      );
      if (numShown === 0) {
        $(selector).show(50);
      } else {
        $(selector).hide(50);
      }
    }
  </script>
</head>

<body>
  <!-- Page content -->
  <div class="page-container">

    <!-- ----------------------------------------------- -->
    <!--                  LAUNCH PATHS                   -->
    <!-- ----------------------------------------------- -->

    <% if (choosingPath) { %>
      <div id="launch-paths">
        <!-- Header -->
        <div class="header">
          <div class="title">
            Select Launch Path
          </div>
          <div class="subtitle">
            click to choose which path the launch should occur on
          </div>
        </div>

        <div class="content-container">
          <!-- Launch paths -->
          <% customLaunchPaths.forEach((customLaunchPath, i)=> { %>
            <div class="item" id="launch-path-<%= i %>">
              <div class="item-label">
                <div class="item-title">
                  <%= customLaunchPath.name %>
                  <div
                    class="small"
                    title="<%= customLaunchPath.path %>"
                  >
                    <span class="badge badge-secondary ml-1">
                      <!-- Truncated path: -->
                      <%= (customLaunchPath.path.length > 50) ? `${customLaunchPath.path.substring(0, 50)}...` : customLaunchPath.path %>
                    </span>
                  </div>
                </div>
              </div>
              <div>
                <a
                  role="button"
                  class="btn btn-warning btn-lg font-weight-bold"
                  href="https://localhost:8080<%= customLaunchPath.path %>"
                  target="_blank"
                  id="custom_launch_path_<%= i %>-choose-button"
                >
                  Choose Path
                </a>
              </div>
            </div>
          <% }); %>

          <!-- Home (/) Path -->
          <div class="item" id="launch-path-home">
            <div class="item-label">
              <div class="item-title">
                Home
                <div class="small">
                  <span class="badge badge-secondary ml-1">
                    /
                  </span>
                </div>
              </div>
            </div>
            <div>
              <button
                type="button"
                class="btn btn-warning btn-lg font-weight-bold"
                id="custom_launch_path_home-choose-button"
                onclick="$('#launch-paths').hide(); $('#main-chooser').show(500);"
              >
                Choose Path
              </a>
            </div>
          </div>
        </div><!-- End content container -->
      </div>
    <% } %>

    <!-- ----------------------------------------------- -->
    <!--                  MAIN CONTENT                   -->
    <!-- ----------------------------------------------- -->

    <!-- Header (title and subtitle) -->
    <div
      id="main-chooser"
      style="<%= choosingPath ? 'display: none' : '' %>"
    >
      <div class="header">
        <div class="title">
          <%= (isSelfLaunch ? 'Canvas Login Simulator' : 'Canvas Launch Simulator' ) %>
        </div>
        <div class="subtitle">
          <%= (
            isSelfLaunch
              ? 'your app initiated a self-launch, so the user is prompted to log in (if not already logged in)'
              : 'click to simulate an LTI launch'
          ) %>
        </div>
      </div>

      <div class="content-container">
        <!-- Teachers -->
        <h3>Teacher:</h3>
        <div class="item">
          <div class="item-label">
            <div class="item-title">
              <%= teacher.profile.name %>
            </div>
          </div>
          <div>
            <a
              role="button"
              class="btn btn-warning btn-lg font-weight-bold"
              href="/simulator/users/<%= teacher.id %>/launch"
              target="<%= (isSelfLaunch ? '_self': '_blank' ) %>"
              id="teacher_0-launch-button"
              <%- (choosingPath ? 'onclick="$(\'#launch-paths\').show(); $(\'#main-chooser\').hide();"' : '') %>
            >
              <%= (isSelfLaunch ? 'Simulate Login' : 'Simulate Launch' ) %>
            </a>
          </div>
        </div>

        <!-- TAs -->
        <% if (tas.length > 0) { %>
          <h3 class="mt-2">TAs:</h3>

          <!-- Search -->
          <% if (tas.length> 4) { %>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">Search:</span>
              </div>
              <input
                type="text"
                id="ta-query"
                class="form-control"
                aria-label="Search TAs"
                oninput="updateSearch('ta');"
              >
            </div>

            <div
              class="alert alert-warning"
              style="display: none"
              id="ta-none"
            >
              <div>
                <strong>No TAs found</strong>
              </div>
              Please broaden your search.
            </div>
          <% } %>

          <div class="scrollpane">
            <% tas.forEach((ta, i)=> { %>
              <div class="item" id="ta-<%= i %>">
                <div class="item-label">
                  <div class="item-title">
                    <%= ta.profile.name %>
                  </div>
                </div>
                <div>
                  <a
                    role="button"
                    class="btn btn-warning btn-lg font-weight-bold"
                    href="/simulator/users/<%= ta.id %>/launch"
                    target="<%= (isSelfLaunch ? '_self' : '_blank' ) %>"
                    id="ta_<%= i %>-launch-button"
                  >
                    <%= (isSelfLaunch ? 'Simulate Login' : 'Simulate Launch' ) %>
                  </a>
                </div>
              </div>
            <% }); %>
          </div>
        <% } %>

        <!-- Students -->
        <% if (students.length> 0) { %>
          <h3 class="mt-2">Students:</h3>

          <!-- Search -->
          <% if (students.length> 4) { %>
            <div class="input-group mb-3">
              <div class="input-group-prepend">
                <span class="input-group-text">Search:</span>
              </div>
              <input
                type="text"
                id="student-query"
                class="form-control"
                aria-label="Search Students"
                oninput="updateSearch('student');"
              >
            </div>

            <div
              class="alert alert-warning"
              style="display: none"
              id="student-none"
            >
              <div>
                <strong>No students found</strong>
              </div>
              Please broaden your search.
            </div>
          <% } %>

          <div class="scrollpane">
            <% students.forEach((student, i)=> { %>
              <div class="item" id="student-<%= i %>">
                <div class="item-label">
                  <div class="item-title">
                    <%= student.profile.name %>
                  </div>
                </div>
                <div>
                  <a
                    role="button"
                    class="btn btn-warning btn-lg font-weight-bold"
                    href="/simulator/users/<%= student.id %>/launch"
                    target="<%= (isSelfLaunch ? '_self' : '_blank' ) %>"
                    id="student_<%= i %>-launch-button"
                  >
                    <%= (isSelfLaunch ? 'Simulate Login' : 'Simulate Launch' ) %>
                  </a>
                </div>
              </div>
            <% }); %>
          </div>
        <% } %>
      </div><!-- End content container -->
    </div><!-- End main -->
  </div><!-- End Container -->
</body>
