{% extends ../base.html %}

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

{% block content %}

<div class="content-wrapper">
    <div class="row">
      <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" class="server-wizard">
                {% raw xsrf_form_html() %}
                <div class="row">
                  <div class="col-sm-12">
                    <div class="form-group">
                      <label for="server_type">{{ translate('serverWizard', 'serverType', data['lang']) }}</label>
                      <select class="form-control form-control-lg select-css" id="server_type" name="server_type" onchange="serverTypeChange(this)">
                        {% for s in data['server_types'] %}
                            <option value="{{ s }}">{{ s.capitalize() }}</option>
                        {% end %}
                      </select>
                    </div>
                  </div>

                  <div class="col-sm-12">
                    <div class="form-group">
                      <label for="server_version">{{ translate('serverWizard', 'serverVersion', data['lang']) }}</label>
                      <select class="form-control form-control-lg select-css" id="server" name="server">
                            <option value="0">Select a Version</option>
                      </select>
                    </div>
                  </div>

                  <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" placeholder="{{ translate('serverWizard', 'myNewServer', data['lang']) }}">
                    </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-3">
                    <div class="form-group">
                      <label for="min_memory1">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{ translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
                      <input type="number" class="form-control" id="min_memory1"  name="min_memory" value="1" step="0.5" min="0.5">
                    </div>
                  </div>

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

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

                </div>
                <button type="submit" class="btn btn-primary mr-2" onclick="wait_msg()">{{ translate('serverWizard', 'buildServer', data['lang']) }}</button>
                <button type="reset" class="btn btn-danger mr-2">{{ translate('serverWizard', 'resetForm', data['lang']) }}</button>

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

      <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">
                {% 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']) }}">
                    </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">
                    </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">
                    </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-3">
                    <div class="form-group">
                      <label for="min_memory2">{{ translate('serverWizard', 'minMem', data['lang']) }} <small> - {{ translate('serverWizard', 'sizeInGB', data['lang']) }}</small></label>
                      <input type="number" class="form-control" id="min_memory2"  name="min_memory" value="1" step="0.5" min="0.5">
                    </div>
                  </div>

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

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

                </div>
                <button type="submit" class="btn btn-primary mr-2" onclick="wait_msg(true)">{{ 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="col-sm-13 grid-margin stretch-card">
        <div class="card">
          <div class="card-body">

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

              <form method="post" class="server-wizard">
                {% 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']) }}">
                      </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">
                      </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">
                      </div>
                    </div>
                  </div>



                  <div class="col-sm-3">
                    <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">
                        </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">
                        </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">
                        </div>
                      </div>

                    </div>
                    <button type="submit" class="btn btn-primary mr-2" onclick="wait_msg(true)">{{ 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>

{% end %}

{% block js%}

<script>
  $( document ).ready(function() {
    console.log('ready');
    var forms = $('form.server-wizard');
    forms.each(function(i, formEl) {
      var form = $(formEl);
      var min = form.find('[name=min_memory]');
      var max = form.find('[name=max_memory]');
      console.log(form, min, max)
      min.change(function(){
        check_sizes(max, min, 'min');
      });
      max.change(function(){
        check_sizes(max, min, 'max');
      });
    });
  });

  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 check_sizes(a, b, changed){
    max_mem = parseFloat(a.val());
    min_mem = parseFloat(b.val());
    if (max_mem < min_mem && changed === 'min'){
      a.val(min_mem)
    }
    if (max_mem < min_mem && changed === 'max'){
      b.val(max_mem)
    }
  }

</script>
<script type="text/javascript">
  //<![CDATA[ 
  // array of possible countries in the same order as they appear in the country selection list 
  
  function decodeHtmlCharCodes(str) { 
    return str.replace("&quot;", "\"");
  }

  function convertHtmlJsonToJavacriptArray(str) {
    var result = []
    str = decodeHtmlCharCodes(str)
    for(var i in str)
      result.push([i, str [i]]);
    return result
  }

  var text = '{% raw data["js_server_types"] %}';
  var serverTypesLists = JSON.parse(text);
  //convertHtmlJsonToJavacriptArray('{{ data["js_server_types"] }}')
  /* CountryChange() is called from the onchange event of a select element. 
  * param selectObj - the select object which fired the on change event. 
  */ 
  function serverTypeChange(selectObj) { 
    // get the index of the selected option 
    var idx = selectObj.selectedIndex; 
    // get the value of the selected option 
    var which = selectObj.options[idx].value; 
    // use the selected option value to retrieve the list of items from the serverTypesLists array 
    cList = serverTypesLists[which]; 
    // get the country select element via its known id 
    var cSelect = document.getElementById("server"); 
    // remove the current options from the country select 
    var len=cSelect.options.length; 
    while (cSelect.options.length > 0) { 
      cSelect.remove(0); 
    } 
    var newOption; 
    // create new options 
    for (var i=0; i<cList.length; i++) { 
      newOption = document.createElement("option"); 
      newOption.value = which+"|"+cList[i];  // assumes option string and value are the same 
      newOption.text=cList[i]; 
      // add the new option 
      try { 
        cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE 
      } 
      catch (e) { 
        cSelect.appendChild(newOption); 
      } 
    } 
  } 
 //]]>
 </script>
{% end %}