<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Service settings</title>

    <meta http-equiv="Content-Security-Policy"
          content="style-src 'self' 'unsafe-inline' https://use.fontawesome.com; font-src 'self' https://use.fontawesome.com; script-src 'self' 'sha256-UoPUIMX0PZl7cy3YoegZ0EDleSaHxTURPMyK09xsa0E='">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
          integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/service-settings.css">

    <script>require('./js/settings.js')</script>
</head>

<body>
<form>
    <div class="form-header">
        <h1>Settings</h1>
    </div>

    <div class="form-body">
        <div class="updates">
            <p id="current-version"></p>
            <p id="update-status">Loading...</p>
            <button id="download-button" type="button" class="hidden">Download</button>
        </div>

        <section>
            <h2 class="form-header">Startup</h2>

            <label class="form-group"><input type="checkbox" name="start-minimized" id="start-minimized"> Start minimized in system tray</label>
        </section>

        <section>
            <h2 class="form-header">Appearance</h2>

            <label class="form-group"><input type="checkbox" name="big-nav-bar" id="big-nav-bar"> Increase the size of the navigation bar</label>
        </section>

        <section>
            <h2 class="form-header">History navigation buttons</h2>

            <label class="form-group">
                <input type="checkbox" name="security-button" id="security-button"> Security info (recommended)</label>
            <label class="form-group">
                <input type="checkbox" name="home-button" id="home-button"> Home button</label>
            <label class="form-group">
                <input type="checkbox" name="back-button" id="back-button"> Go back button</label>
            <label class="form-group">
                <input type="checkbox" name="forward-button" id="forward-button"> Go forward button</label>
            <label class="form-group">
                <input type="checkbox" name="refresh-button" id="refresh-button"> Refresh page button</label>
        </section>
    </div>

    <div class="form-footer">
        <div class="form-group" id="buttons">
            <button id="cancel-button" type="button">Cancel</button>
            <button type="submit">Save</button>
        </div>
    </div>
</form>
</body>
</html>