<%
"use strict";

var myth = new Myth();
%>

<head>
<meta charset="UTF-8">
<title><%=qsTr("WebFrontend Settings")%></title>
<link rel="stylesheet" type="text/css" href="/3rdParty/jquery/jqueryUI/css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/css/site.css">
<link rel="stylesheet" type="text/css" href="/tv/css/common.css">
<link rel="stylesheet" type="text/css" href="/css/settings.css">
<script src="/js/utility.js"></script> <!-- ECMA not JS -->
<script type="text/javascript" src="/3rdParty/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/3rdParty/jquery/jqueryUI/js/jquery-ui-1.10.3.js"></script>
<script src="/js/settings.js"></script>
<script src="/tv/js/common.js"></script>
</head>
<body>

<div class="notifyPopup" id="saveFormDataSuccess">
    <%=qsTr("Changes Saved")%>
</div>

<div class="notifyPopup" id="saveFormDataError">
    <%=qsTr("Save Failed!")%>
</div>

<div style="border:1px #CC0000 solid;background-color: rgba(102, 0, 0, 0.7);padding:7px;margin:5px;text-align:center;">
  This feature is in work in progress and some settings have no effect at present.
</div>

<div id="settingsEditor">
  <ul>
    <li><a href="#page-1"><%=qsTr("General")%></a></li>
    <li><a href="#page-2"><%=qsTr("Security")%></a></li>
    <li><a href="#page-3"><%=qsTr("Appearance")%></a></li>
  </ul>
  <form action="/setup/ajax_backends/setting_util.qsp" autocomplete="on">
    <input type="hidden" name="_action" value="saveWebFrontendSettings">

    <div id="page-1"> <!-- General Settings -->

    <!-- Comment -->
      <span>Nothing to see here yet</span>

    </div>
    <div id="page-2"> <!-- Security Settings -->

    <!-- Enable SSL -->
      <div class="setting setting-toggle">
        <label for="setting-EnableSSL"><%=qsTr("Enable TLS")%>:</label>
        <span>No</span>
        <div class="setting-toggle-background">
          <input type="range" name="setting[WebFrontend_enableSSL]"
            id="setting-EnableSSL"
            value="<%=myth.GetSetting("", "WebFrontend_enableSSL", "0") > 0 ? 1 : 0%>"
            min="0" max="1"
            onChange="MythSettings.EnableWidget('setting-TLSOptions', (this.value > 0 ? true : false))" required>
        </div>
        <span>Yes</span>
      </div>

      <fieldset id="setting-TLSOptions" class="setting-fieldset" <%=myth.GetSetting("", "WebFrontend_enableSSL", "") == 1 ? '' : 'disabled'%>>
        <legend><%=qsTr("TLS Options")%></legend>
      <!-- SSL Private Key File -->
        <div class="setting setting-text">
          <label for="setting-TLSPrivateKeyPath"><%=qsTr("Private Key Path")%>:</label>
          <input type="text" name="setting[hostSSLKey]" class="setting-path" id="setting-TLSPrivateKeyPath" value="<%=myth.GetSetting("", "hostSSLKey", "")%>">
        </div>

      <!-- SSL Certificate File -->
        <div class="setting setting-text">
          <label for="setting-TLSHostCertPath"><%=qsTr("Host Certificate Path")%>:</label>
          <input type="text" name="setting[hostSSLCertificate]" class="setting-path" id="setting-TLSHostCertPath" value="<%=myth.GetSetting("", "hostSSLCertificate", "")%>">
        </div>

      <!-- SSL Certificate File -->
        <div class="setting setting-text">
          <label for="setting-TLSCACertPath"><%=qsTr("CA Certificate Path")%>:</label>
          <input type="text" name="setting[caSSLCertificate]" class="setting-path" id="setting-TLSCACertPath" value="<%=myth.GetSetting("", "caSSLCertificate", "")%>" placeholder="<%=qsTr("Optional")%>">
        </div>
      </fieldset>

    <!-- Save -->
      <div class="setting setting-button">
        <button type="button"  name="Save" onClick="saveFormData(this.form);"><%=qsTr("Save Changes")%></button>
      </div>

    </div>
    <div id="page-3"> <!-- Appearance Settings -->

    <!-- Disable Animations -->
      <div class="setting setting-toggle">
        <label for="setting-EnableAnimations"><%=qsTr("Enable Animations")%>:</label>
        <span>No</span>
        <div class="setting-toggle-background">
          <input type="range" name="setting[WebFrontend_enableAnimations]" id="setting-EnableAnimations" value="<%=myth.GetSetting("", "WebFrontend_enableAnimations", "1") > 0 ? "1" : "0"%>" min="0" max="1" required>
        </div>
        <span>Yes</span>
      </div>

    <!-- Save -->
      <div class="setting setting-button">
        <button type="button"  name="Save" onClick="saveFormData(this.form);"><%=qsTr("Save Changes")%></button>
      </div>

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

<script type="text/javascript" nonce="<%=CSP_NONCE%>">
  $( "#settingsEditor" ).tabs({ active: 1 });
</script>

</body>