{% extends ../base.html %}

{% block title %}Crafty Controller - {{ translate('serverWizard', 'newServer', data['lang']) }}{% end %}

{% block content %}

<div class="content-wrapper">
  <ul class="nav nav-tabs col-md-12 tab-simple-styled " role="tablist">
    <li class="nav-item term-nav-item">
      <a class="nav-link" href="/server/step1" role="tab" aria-selected="false">
        <i class="fas fa-file-signature"></i>Minecraft-Java</a>
    </li>
    <li class="nav-item term-nav-item">
      <a class="nav-link active" href="/server/bedrock_step1" role="tab" aria-selected="false">
        <i class="fas fa-file-signature"></i>Minecraft-Bedrock</a>
    </li>
  </ul>
  <div class="d-none" id="overlay" onclick="hide(event)"></div>
  <div class="row">
    {% if data['online'] %}
    <div class="col-sm-6 grid-margin stretch-card">
      <div class="card">
        <div class="card-body">

          <h4>{{ translate('serverWizard', 'newServer', data['lang']) }}</h4>
          <br />
          <p class="card-description">

          <form method="post" name="create_server" class="server-wizard" onSubmit="wait_msg()">
            {% raw xsrf_form_html() %}
            <div class="row">

              <div class="col-sm-12 col-md-12">
                <div class="form-group">
                  <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
                  <input type="text" class="form-control" id="server_name" name="server_name"
                    placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
                </div>
              </div>

            </div>

            <div class="col-sm-12">
              <div class="form-group">
                <div id="accordion-1">
                  <div class="card">
                    <div class="card-header p-2" id="Role-1">
                      <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-1" aria-expanded="true"
                        aria-controls="collapseRole-1">
                        <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole', data['lang']) }}
                        <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
                          data['lang']) }}</small>
                      </p>
                    </div>
                    <div id="collapseRole-1" class="collapse" aria-labelledby="Role-1" data-parent="">
                      <div class="card-body scroll">
                        <div class="form-group">
                          {% for r in data['roles'] %}
                          <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}"
                                type="checkbox">&nbsp;
                              {{ r['role_name'].capitalize() }}</label></span>
                          {% end %}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <button onclick="eula_confirm()" type="button" class="btn btn-primary mr-2">{{ translate('serverWizard',
              'buildServer',
              data['lang']) }}</button>
            <button type="reset" class="btn btn-danger mr-2">{{ translate('serverWizard', 'resetForm', data['lang'])
              }}</button>
        </div>
        </form>
        </p>
      </div>
    </div>
    {% end %}
    <div class="col-sm-6 grid-margin stretch-card">
      <div class="card">
        <div class="card-body">

          <h4>{{ translate('serverWizard', 'importServer', data['lang']) }}</h4>
          <br />
          <p class="card-description">

          <form method="post" class="server-wizard" onSubmit="wait_msg(true)">
            {% raw xsrf_form_html() %}
            <input type="hidden" value="import_jar" name="create_type">
            <div class="row">

              <div class="col-sm-12">
                <div class="form-group">
                  <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
                  <input type="text" class="form-control" id="server_name" name="server_name" value=""
                    placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
                </div>
              </div>

              <div class="col-sm-12">
                <div class="form-group">
                  <label for="server">{{ translate('serverWizard', 'serverPath', data['lang']) }} <small>{{
                      translate('serverWizard', 'absoluteServerPath', data['lang']) }}</small></label>
                  <input type="text" class="form-control" id="server_path" name="server_path"
                    placeholder="/var/opt/server" required>
                </div>
              </div>

              <div class="col-sm-12">
                <div class="form-group">
                  <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
                  <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
                    placeholder="bedrock_server" required>
                </div>
              </div>



            </div>
            <br />
            <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
                style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
                data['lang']) }}</small></h4>
            <hr>
            <div class="row">

              <div class="col-sm-12">
                <div class="form-group">
                  <label for="port2">{{ translate('serverWizard', 'serverPort', data['lang']) }}
                    <small></small></label>
                  <input type="number" class="form-control" id="port2" name="port" value="19132" step="1" min="1"
                    required>
                </div>
              </div>
              <div class="col-sm-12">
                <div class="form-group">
                  <div id="accordion-2">
                    <div class="card">
                      <div class="card-header p-2" id="Role-2">
                        <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-2" aria-expanded="true"
                          aria-controls="collapseRole-2">
                          <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole', data['lang']) }}
                          <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
                            data['lang']) }}</small>
                        </p>
                      </div>
                      <div id="collapseRole-2" class="collapse" aria-labelledby="Role-2" data-parent="">
                        <div class="card-body scroll">
                          <div class="form-group">
                            {% for r in data['roles'] %}
                            <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}"
                                  type="checkbox">&nbsp;
                                {{ r['role_name'].capitalize() }}</label></span>
                            {% end %}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <button type="submit" class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton',
              data['lang']) }}</button>
            <button type="reset" class="btn btn-danger mr-2">{{ translate('serverWizard', 'resetForm', data['lang'])
              }}</button>

          </form>
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-6 grid-margin stretch-card">
      <div class="card">
        <div class="card-body">

          <h4>{{ translate('serverWizard', 'importZip', data['lang']) }}</h4>
          <br />
          <p class="card-description">

          <form name="zip" method="post" class="server-wizard" onSubmit="wait_msg(true)">
            {% raw xsrf_form_html() %}
            <input type="hidden" value="import_zip" name="create_type">

            <div class="row">
              <div class="col-sm-9">
                <div class="col-sm-12">
                  <div class="form-group">
                    <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
                    <input type="text" class="form-control" id="server_name" name="server_name" value=""
                      placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group">
                    <label for="server">{{ translate('serverWizard', 'zipPath', data['lang']) }} <small>{{
                        translate('serverWizard', 'absoluteZipPath', data['lang']) }}</small></label>
                    <input type="text" class="form-control" id="server_path" name="server_path"
                      placeholder="/var/opt/server.zip" required>
                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group">
                    <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{
                        translate('serverWizard', 'explainRoot', data['lang']) }}</small></label>
                    <br>
                    <button class="btn btn-primary mr-2" id="root_files_button" type="button">{{
                      translate('serverWizard', 'clickRoot', data['lang']) }}</button>
                  </div>
                </div>


                <div class="col-sm-12">
                  <div class="form-group">
                    <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
                    <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
                      placeholder="bedrock_server" required>
                  </div>
                </div>
              </div>
            </div>



            <div class="col-sm-12">
              <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
                  style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
                  data['lang']) }}</small></h4>
              <hr>
              <div class="row">

                <div class="col-sm-12">
                  <div class="form-group">
                    <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }}
                      <small></small></label>
                    <input type="number" class="form-control" id="port3" name="port" value="19132" step="1" min="1"
                      required>
                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group">
                    <div id="accordion-3">
                      <div class="card">
                        <div class="card-header p-2" id="Role-3">
                          <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-3" aria-expanded="true"
                            aria-controls="collapseRole-3">
                            <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole', data['lang'])
                            }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
                              data['lang']) }}</small>
                          </p>
                        </div>
                        <div id="collapseRole-3" class="collapse" aria-labelledby="Role-3" data-parent="">
                          <div class="card-body scroll">
                            <div class="form-group">
                              {% for r in data['roles'] %}
                              <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}"
                                    type="checkbox">&nbsp;
                                  {{ r['role_name'].capitalize() }}</label></span>
                              {% end %}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-12" style="visibility: hidden;">
                  <div class="form-group">
                    <input type="text" class="form-control" id="zip_root_path" name="zip_root_path">
                  </div>
                </div>
                <div class="modal fade" id="dir_select" tabindex="-1" role="dialog" aria-labelledby="dir_select"
                  aria-hidden="true">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">{{ translate('serverWizard',
                          'selectZipDir', data['lang']) }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <div class="tree-ctx-item" id="main-tree-div" data-path=""
                          style="overflow: scroll; max-height:75%;">
                          <input type="radio" id="main-tree-input" name="root_path" value="" checked>
                          <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
                            <i class="far fa-folder"></i>
                            <i class="far fa-folder-open"></i>
                            {{ translate('serverFiles', 'files', data['lang']) }}
                          </span>
                          </input>
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{
                          translate('serverWizard', 'close', data['lang']) }}</button>
                        <button type="button" id="modal-okay" data-dismiss="modal" class="btn btn-primary">{{
                          translate('serverWizard', 'save', data['lang']) }}</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <button id="zip_submit" type="submit" title="You must select server root dir first" disabled
                class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
                }}</button>
              <button type="reset" class="btn btn-danger mr-2">{{ translate('serverWizard', 'resetForm', data['lang'])
                }}</button>
            </div>
        </div>
        </form>
        </p>
      </div>
    </div>
    <div class="col-sm-6 grid-margin stretch-card">
      <div class="card">
        <div class="card-body">

          <h4>{{ translate('serverWizard', 'uploadZip', data['lang']) }}</h4>
          <br />
          <p class="card-description">

          <form name="zip" method="post" class="server-wizard" onSubmit="wait_msg(true)">
            {% raw xsrf_form_html() %}
            <input type="hidden" value="import_zip" name="create_type">

            <div class="row">
              <div class="col-sm-12">
                <div class="col-sm-12">
                  <div class="form-group">
                    <label for="server_name">{{ translate('serverWizard', 'serverName', data['lang']) }}</label>
                    <input type="text" class="form-control" id="server_name" name="server_name" value=""
                      placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}" required>
                  </div>
                </div>

                <div class="col-sm-12">
                  <div class="form-group">
                    <label for="server">Server Upload </label><br>
                    <span id="upload_input">
                      <input type="file" multiple="false" class="form-control" id="file" name="file" required
                        style="width: 70%;">
                      <button type="button" class="btn btn-info" onclick="sendFile()">UPLOAD</button>
                    </span>
                  </div>
                </div>
              </div>
              <div id="lower_half" style="visibility: hidden;">
                <div class="col-sm-12">
                  <div class="form-group">
                    <label for="server">{{ translate('serverWizard', 'selectRoot', data['lang']) }} <small>{{
                        translate('serverWizard', 'explainRoot', data['lang']) }}</small></label>
                    <br>
                    <button class="btn btn-primary mr-2" id="root_upload_button" type="button">{{
                      translate('serverWizard', 'clickRoot', data['lang']) }}</button>
                  </div>
                </div>


                <div class="col-sm-12">
                  <div class="form-group">
                    <label for="server_jar">{{ translate('serverWizard', 'serverJar', data['lang']) }}</label>
                    <input type="text" class="form-control" id="server_jar" name="server_jar" value=""
                      placeholder="paper.jar" required>
                  </div>
                </div>

                <div class="col-sm-12">
                  <h4 class="card-title">{{ translate('serverWizard', 'quickSettings', data['lang']) }} <small
                      style="text-transform: none;"> - {{ translate('serverWizard', 'quickSettingsDescription',
                      data['lang']) }}</small></h4>
                  <hr>
                  <div class="row">

                    <div class="col-sm-12">
                      <div class="form-group">
                        <label for="min_memory3">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{
                            translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
                        <input type="number" class="form-control" id="min_memory3" name="min_memory" value="1"
                          step="0.5" min="0.5" required>
                      </div>
                    </div>

                    <div class="col-sm-12">
                      <div class="form-group">
                        <label for="max_memory3">{{ translate('serverWizard', 'maxMem', data['lang']) }} <small> - {{
                            translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
                        <input type="number" class="form-control" id="max_memory3" name="max_memory" value="2"
                          step="0.5" min="0.5" required>
                      </div>
                    </div>

                    <div class="col-sm-12">
                      <div class="form-group">
                        <label for="port3">{{ translate('serverWizard', 'serverPort', data['lang']) }} <small> - {{
                            translate('serverWizard', 'defaultPort', data['lang']) }}</small></label>
                        <input type="number" class="form-control" id="port3" name="port" value="25565" step="1" min="1"
                          required>
                      </div>
                    </div>

                    <div class="col-sm-12">
                      <div class="form-group">
                        <div id="accordion-3">
                          <div class="card">
                            <div class="card-header p-2" id="Role-3">
                              <p class="mb-0 p-0" data-toggle="collapse" data-target="#collapseRole-3"
                                aria-expanded="true" aria-controls="collapseRole-3">
                                <i class="fas fa-chevron-down"></i> {{ translate('serverWizard', 'addRole',
                                data['lang'])
                                }} <small style="text-transform: none;"> - {{ translate('serverWizard', 'autoCreate',
                                  data['lang']) }}</small>
                              </p>
                            </div>
                            <div id="collapseRole-3" class="collapse" aria-labelledby="Role-3" data-parent="">
                              <div class="card-body scroll">
                                <div class="form-group">
                                  {% for r in data['roles'] %}
                                  <span class="d-block menu-option"><label><input name="{{ r['role_id'] }}"
                                        type="checkbox">&nbsp;
                                      {{ r['role_name'].capitalize() }}</label></span>
                                  {% end %}
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-12" style="visibility: hidden;">
                      <div class="form-group">
                        <input type="text" class="form-control" id="zip_root_path" name="zip_root_path">
                      </div>
                    </div>
                    <div class="modal fade" id="dir_select" tabindex="-1" role="dialog" aria-labelledby="dir_select"
                      aria-hidden="true">
                      <div class="modal-dialog" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle">{{ translate('serverWizard',
                              'selectZipDir', data['lang']) }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div class="modal-body">
                            <div class="tree-ctx-item" id="main-tree-div" data-path=""
                              style="overflow: scroll; max-height:75%;">
                              <input type="radio" id="main-tree-input-upload" name="root_path" value="" checked>
                              <span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path="">
                                <i class="far fa-folder"></i>
                                <i class="far fa-folder-open"></i>
                                {{ translate('serverFiles', 'files', data['lang']) }}
                              </span>
                              </input>
                            </div>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{
                              translate('serverWizard', 'close', data['lang']) }}</button>
                            <button type="button" id="modal-okay" data-dismiss="modal" class="btn btn-primary">{{
                              translate('serverWizard', 'save', data['lang']) }}</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <button id="upload_submit" type="submit" title="You must select server root dir first" disabled
                  class="btn btn-primary mr-2">{{ translate('serverWizard', 'importServerButton', data['lang'])
                  }}</button>
                <button type="reset" class="btn btn-danger mr-2">{{ translate('serverWizard', 'resetForm', data['lang'])
                  }}</button>
              </div>
            </div>
          </form>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  .scroll {
    max-height: 12em;
    overflow-y: auto;
  }

  .menu-btn {
    font-size: 0.9em;
    padding: 2px 10px;
  }

  .menu {
    padding-top: 10px;
    z-index: 200;
    margin-top: 4px;
    position: absolute;
    background-color: #2a2c44;
  }

  .menu-option {
    padding: 6px 20px 6px;
    color: white;
  }

  #overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
  }

  #op_logo {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
</style>
<style>
  /* Remove default bullets */
  .tree-view,
  .tree-nested {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-left: 10px;
  }

  /* Style the items */
  .tree-item,
  .files-tree-title {
    cursor: pointer;
    user-select: none;
    /* Prevent text selection */
  }

  /* Create the caret/arrow with a unicode, and style it */
  .tree-caret .fa-folder {
    display: inline-block;
  }

  .tree-caret .fa-folder-open {
    display: none;
  }

  /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
  .tree-caret-down .fa-folder {
    display: none;
  }

  .tree-caret-down .fa-folder-open {
    display: inline-block;
  }

  /* Hide the nested list */
  .tree-nested {
    display: none;
  }
</style>

{% end %}

{% block js%}
<script>

  var file;
  function sendFile() {
    file = $("#file")[0].files[0]
    document.getElementById("upload_input").innerHTML = '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">&nbsp;<i class="fa-solid fa-spinner"></i></div></div>'
    let xmlHttpRequest = new XMLHttpRequest();
    let token = getCookie("_xsrf")
    let fileName = file.name
    let target = '/upload'
    let mimeType = file.type
    let size = file.size
    let type = 'server_import'

    xmlHttpRequest.open('POST', target, true);
    xmlHttpRequest.setRequestHeader('X-Content-Type', mimeType);
    xmlHttpRequest.setRequestHeader('X-XSRFToken', token);
    xmlHttpRequest.setRequestHeader('X-Content-Length', size);
    xmlHttpRequest.setRequestHeader('X-Content-Disposition', 'attachment; filename="' + fileName + '"');
    xmlHttpRequest.setRequestHeader('X-Content-Upload-Type', type);
    xmlHttpRequest.setRequestHeader('X-FileName', fileName);
    xmlHttpRequest.addEventListener('load', (event) => {
      if (event.target.responseText == 'success') {
        console.log('Upload for file', file.name, 'was successful!')
        document.getElementById("upload_input").innerHTML = '<div class="card-header header-sm d-flex justify-content-between align-items-center"><span id="file-uploaded" style="color: gray;">' + fileName + '</span> 🔒</div>';
        document.getElementById("lower_half").style.visibility = "visible";
      }
      else {
        alert('Upload failed with response: ' + event.target.responseText);
        doUpload = false;
      }
    }, false);
    xmlHttpRequest.addEventListener('error', (e) => {
      console.error('Error while uploading file', file.name + '.', 'Event:', e)
    }, false);
    xmlHttpRequest.send(file);
  }

  document.getElementById("root_upload_button").addEventListener("click", function () {
    if (file) {
      if (document.getElementById('root_upload_button').classList.contains('clicked')) {
        document.getElementById('main-tree-div').innerHTML = '<input type="radio" id="main-tree-input-upload" name="root_path" value="" checked><span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path=""><i class="far fa-folder"></i><i class="far fa-folder-open"></i>{{ translate("serverFiles", "files", data["lang"]) }}</span></input>'
      } else {
        document.getElementById('root_upload_button').classList.add('clicked')
      }
      var token = getCookie("_xsrf");
      var dialog = bootbox.dialog({
        message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Please wait while we gather your files...</p>',
        closeButton: false
      });
      $.ajax({
        type: "POST",
        headers: { 'X-XSRFToken': token },
        url: '/ajax/unzip_server?id=-1&file=' + file.name,
      });
    } else {
      bootbox.alert("You must input a path before selecting this button");
    }
  });

  function eula_confirm() {
    bootbox.confirm({
      title: "{% raw translate('error', 'eulaTitle', data['lang']) %}",
      message: "{% raw translate('error', 'eulaMsg', data['lang']) %}<a href='https://www.minecraft.net/en-us/eula' target='_blank'>Minecraft EULA</a>&nbsp; {% raw translate('error', 'privMsg', data['lang']) %}<a target='_blank' href='https://privacy.microsoft.com/en-us/privacystatement'>Microsoft Privacy Policy</a>",
      buttons: {
        confirm: {
          label: "{% raw translate('error', 'agree', data['lang']) %}",
          className: 'btn-info'
        },
        cancel: {
          label: "{% raw translate('error', 'cancel', data['lang']) %}",
          className: 'btn-secondary'
        }
      },
      callback: function (result) {
        if (result == true) {
          document.create_server.submit();
        }
        else {
          return;
        }
      }
    })
  }
</script>
<script>
  document.getElementById("root_files_button").addEventListener("click", function () {
    if (document.forms["zip"]["server_path"].value != "") {
      if (document.getElementById('root_files_button').classList.contains('clicked')) {
        document.getElementById('main-tree-div').innerHTML = '<input type="radio" id="main-tree-input" name="root_path" value="" checked><span id="main-tree" class="files-tree-title tree-caret-down root-dir" data-path=""><i class="far fa-folder"></i><i class="far fa-folder-open"></i>{{ translate('serverFiles', 'files', data['lang']) }}</span></input>'
      } else {
        document.getElementById('root_files_button').classList.add('clicked')
      }
      path = document.forms["zip"]["server_path"].value;
      console.log(document.forms["zip"]["server_path"].value)
      var token = getCookie("_xsrf");
      var dialog = bootbox.dialog({
        message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Please wait while we gather your files...</p>',
        closeButton: false
      });
      $.ajax({
        type: "POST",
        headers: { 'X-XSRFToken': token },
        url: '/ajax/unzip_server?id=-1&path=' + path,
      });
    } else {
      bootbox.alert("You must input a path before selecting this button");
    }
  });
</script>

<script>
  function dropDown(event) {
    event.target.parentElement.children[1].classList.remove("d-none");
    document.getElementById("overlay").classList.remove("d-none");
  }
  function hide(event) {
    var items = document.getElementsByClassName('menu');
    for (let i = 0; i < items.length; i++) {
      items[i].classList.add("d-none");
    }
    document.getElementById("overlay").classList.add("d-none");
  }

  function wait_msg(importing) {
    bootbox.alert({
      title: importing ? '{% raw translate("serverWizard", "importing", data['lang']) %}': '{% raw translate("serverWizard", "downloading", data['lang']) %}',
      message: '<i class="fas fa-cloud-download"></i> {% raw translate("serverWizard", "bePatient", data['lang']) %}',
    });
  }

  function show_file_tree() {
    $("#dir_select").modal();
  }

  function getTreeView(path) {
    if (document.getElementById("lower_half").visibility == "hidden") {
      document.getElementById('zip_submit').disabled = false;
    } else {
      document.getElementById('upload_submit').disabled = false;
    }
    path = path

    $.ajax({
      type: "GET",
      url: '/ajax/get_zip_tree?id=-1&path=' + path,
      dataType: 'text',
      success: function (data) {
        console.log("got response:");
        console.log(data);

        dataArr = data.split('\n');
        serverDir = dataArr.shift(); // Remove & return first element (server directory)
        text = dataArr.join('\n');

        try {
          document.getElementById('main-tree-div').innerHTML += text;
          document.getElementById('main-tree').parentElement.classList.add("clicked");
        } catch {
          document.getElementById('files-tree').innerHTML = text;
        }


        document.getElementsByClassName('files-tree-title')[0].setAttribute('data-path', serverDir);
        document.getElementsByClassName('files-tree-title')[0].setAttribute('data-name', 'Files');

      },
    });
  }

  function getToggleMain(event) {
    path = event.target.parentElement.getAttribute('data-path');
    document.getElementById("files-tree").classList.toggle("d-block");
    document.getElementById(path + "span").classList.toggle("tree-caret-down");
    document.getElementById(path + "span").classList.toggle("tree-caret");
  }


  function getDirView(event) {
    path = event.target.parentElement.getAttribute('data-path');

    if (document.getElementById(path).classList.contains('clicked')) {

      var toggler = document.getElementById(path + "span");

      if (toggler.classList.contains('files-tree-title')) {
        document.getElementById(path + "ul").classList.toggle("d-block");
        document.getElementById(path + "span").classList.toggle("tree-caret-down");
      }
      return;
    } else {
      $.ajax({
        type: "GET",
        url: '/ajax/get_zip_dir?id=-1&path=' + path,
        dataType: 'text',
        success: function (data) {
          console.log("got response:");

          dataArr = data.split('\n');
          serverDir = dataArr.shift(); // Remove & return first element (server directory)
          text = dataArr.join('\n');

          try {
            document.getElementById(path + "span").classList.add('tree-caret-down');
            document.getElementById(path).innerHTML += text;
            document.getElementById(path).classList.add("clicked");
          } catch {
            console.log("Bad")
          }

          var toggler = document.getElementById(path);

          if (toggler.classList.contains('files-tree-title')) {
            document.getElementById(path + "span").addEventListener("click", function caretListener() {
              document.getElementById(path + "ul").classList.toggle("d-block");
              document.getElementById(path + "span").classList.toggle("tree-caret-down");
            });
          }
        },
      });
    }
  }
  if (webSocket) {
    webSocket.on('send_temp_path', function (data) {
      setTimeout(function () {
        var x = document.querySelector('.bootbox');
        if (x) {
          x.remove()
        }
        var x = document.querySelector('.modal-backdrop');
        if (x) {
          x.remove()
        }
        document.getElementById('main-tree-input').setAttribute('value', data.path)
        document.getElementById('main-tree-input-upload').setAttribute('value', data.path)
        getTreeView(data.path);
        show_file_tree();

      }, 5000);
    });
  }

</script>
{% end %}