<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<script src="qrc:///js/vue.js"></script>
<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script src="qrc:///js/_settingsManager.js"></script>
<script src="qrc:///js/tools.js"></script>
<link rel="stylesheet" type="text/css" href="qrc:///css/_settingsManager.css"/>
</head>
<body onload="init()">
<div id="settings">
    <div id="header">
        <h1>{{ gt("settings") }}</h1>
    </div>
    <div class="row">
        <label>{{ gt("port-for-local-kiwix-server-setting") }}</label>
        <input type="number" min="1" max="65535" v-on:change="setPort()" v-model="kiwixServerPort">
    </div>
    <div class="row">
        <label>{{ gt("zoom-level-setting") }}</label>
        <div class="percentage-symbol">
          <input type="number" step="10" min="30" max="500" v-on:change="setZoomFactor()" v-model="zoomFactor" >
        </div>
    </div>
    <div class="row">
        <label>{{ gt("download-directory-setting") }}</label>
        <span id="download_dir"><span>{{ downloadDir }}</span></span>
        <input type="button" :value="gt('reset')" v-on:click="resetDownloadDir()">
        <input type="button" :value="gt('browse')" v-on:click="browseDownloadDir()">
    </div>
</div>
</body></html>
 
