{% extends "base.html" %}

{% macro config_item(config, depends="") -%}
    <tr class="settings-item additional-config {% if config['advanced'] %}advanced-setting{% endif %}"
            {% if config.get('reboot') and enable_reboot %}reboot="true"{% endif %}
            {% if config.get('required') %}required="true"{% endif %}
            {% if config.get('strip') %}strip="true"{% endif %}
            {% if config.get('depends') %}depends="{{' '.join(config['depends'])}}{% if depends %} {{depends}}{% endif %}"{% endif %}
            {% if config.get('min') is not none %}min="{{config['min']}}"{% endif %}
            {% if config.get('max') is not none %}max="{{config['max']}}"{% endif %}
            {% if config.get('floating') %}floating="true"{% endif %}
            {% if config.get('sign') %}sign="true"{% endif %}
            {% if config.get('snap') is not none %}snap="{{config['snap']}}"{% endif %}
            {% if config.get('ticks') %}ticks="{{config['ticks']}}"{% endif %}
            {% if config.get('ticksnum') is not none %}ticksnum="{{config['ticksnum']}}"{% endif %}
            {% if config.get('decimals') is not none %}decimals="{{config['decimals']}}"{% endif %}
            {% if config.get('unit') %}unit="{{config['unit']}}"{% endif %}
            {% if config.get('validate') %}validate="{{config['validate']}}"{% endif %}>
        {% if config['type'] == 'separator' %}
        <td colspan="100"><div class="settings-item-separator"></div></td>
        {% else %}
        <td class="settings-item-label"><span class="settings-item-label">{{config['label']}}</span></td>
        <td class="settings-item-value">
            {% if config['type'] == 'str' %}
                <input type="text" class="styled {{config['section']}} {% if config.get('camera') %}camera{% else %}main{% endif %}-config" id="{{config['name']}}Entry">
                {% if config['unit'] %}<span class="settings-item-unit">{{config['unit']}}</span>{% endif %}
            {% elif config['type'] == 'pwd' %}
                <input type="password" class="styled {{config['section']}} {% if config.get('camera') %}camera{% else %}main{% endif %}-config" id="{{config['name']}}Entry">
            {% elif config['type'] == 'number' %}
                <input type="text" class="number styled {{config['section']}} {% if config.get('camera') %}camera{% else %}main{% endif %}-config" id="{{config['name']}}Entry">
                {% if config['unit'] %}<span class="settings-item-unit">{{config['unit']}}</span>{% endif %}
            {% elif config['type'] == 'range' %}
                <input type="text" class="range styled {{config['section']}} {% if config.get('camera') %}camera{% else %}main{% endif %}-config" id="{{config['name']}}Slider">
            {% elif config['type'] == 'bool' %}
                <input type="checkbox" class="styled {{config['section']}} {% if config.get('camera') %}camera{% else %}main{% endif %}-config" id="{{config['name']}}Switch">
            {% elif config['type'] == 'choices' %}
                <select class="styled {{config['section']}} {% if config.get('camera') %}camera{% else %}main{% endif %}-config" id="{{config['name']}}Select">
                    {% for choice in config['choices'] %}
                    <option value="{{choice[0]}}">{{choice[1]}}</option>
                    {% endfor %}
                </select>
                {% if config['unit'] %}<span class="settings-item-unit">{{config['unit']}}</span>{% endif %}
            {% elif config['type'] == 'html' %}
                <div class="html styled {{config['section']}} {% if config.get('camera') %}camera{% else %}main{% endif %}-config" id="{{config['name']}}Html"></div>
            {% endif %}
        </td>
        <td>{% if config.get('description') %}<span class="help-mark" title="{{config['description']}}">?</span>{% endif %}</td>
        {% endif %}
    </tr>
{%- endmacro %}

{% block title %}{% if title %}{{title}}{% else %}{{hostname}}{% endif %}{% endblock %}

{% block style %}
    {{super()}}
    <link rel="stylesheet" type="text/css" href="{{static_path}}css/ui.css?v={{version}}" />
    <link rel="stylesheet" type="text/css" href="{{static_path}}css/main.css?v={{version}}" />
    {% if frame %}
        <link rel="stylesheet" type="text/css" href="{{static_path}}css/frame.css?v={{version}}" />
    {% endif %}
{% endblock %}

{% block script %}
    {{super()}}
    <script type="text/javascript" src="{{static_path}}js/ui.js?v={{version}}"></script>
    <script type="text/javascript" src="{{static_path}}js/main.js?v={{version}}"></script>
    {% if frame %}
        <script type="text/javascript" src="{{static_path}}js/frame.js?v={{version}}"></script>
    {% endif %}
    <script type="text/javascript">
        var adminUsername = '{{admin_username}}';
        var frame = {% if frame %}true{% else %}false{% endif %};
        var hasLocalCamSupport = {% if has_motion %}true{% else %}false{% endif %};
        var hasNetCamSupport = {% if has_motion %}true{% else %}false{% endif %};
        {% if mask_width %}
        var maskWidth = {{mask_width}};
        {% endif %}
    </script>
{% endblock %}

{% block body %}
    {% if not frame %}
    <div class="header">
        <div class="header-container">
            <div class="settings-top-bar closed">
                <div class="button icon settings-button mouse-effect" title="settings"></div
                ><div class="button icon logout-button mouse-effect" title="switch user"></div>
                <select class="styled" id="cameraSelect" {% if not add_remove_cameras %}style="display: none;"{% endif %}></select>
                <div class="button icon rem-camera-button mouse-effect" id="remCameraButton" title="remove camera" {% if not add_remove_cameras %}style="display: none;"{% endif %}></div>
                <div class="button apply-button" id="applyButton">Apply</div>
                {% if hostname %}<div class="hostname">{{hostname}}</div>{% endif %}
            </div>
            <div class="logo">
                <a href="">
                    <span class="logo">motionEye</span>
                    <img class="logo" src="{{static_path}}img/motioneye-logo.svg">
                </a>
            </div>
        </div>
    </div>
    {% endif %}
    {% if not frame %}
    <div class="page">
        <div class="settings closed">
            <div class="settings-container">
                <!-- Preferences -->
                <div class="settings-section-title" id="preferencesDiv">
                    <span class="help-mark" title="user preferences">?</span>
                    <a class="settings-section-title">Preferences</a>
                    <span class="minimize open"></span>
                </div>
                <table class="settings">
                    <tr class="settings-item" min="1" max="4" snap="1" ticksnum="4" decimals="0" id="layoutColumnsRow">
                        <td class="settings-item-label"><span class="settings-item-label">Layout Columns</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled prefs" id="layoutColumnsSlider"></td>
                        <td><span class="help-mark" title="configures the number of columns used to lay out the camera frames">?</span></td>
                    </tr>
                    <tr class="settings-item">
                        <td class="settings-item-label"><span class="settings-item-label">Fit Frames Vertically</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled prefs" id="fitFramesVerticallySwitch"></td>
                        <td><span class="help-mark" title="controls whether frame sizes can be reduced to vertically fit the window or not">?</span></td>
                    </tr>
                    <tr class="settings-item" min="1" max="4" snap="1" ticksnum="4" decimals="0" id="layoutRows" depends="fitFramesVertically">
                        <td class="settings-item-label"><span class="settings-item-label">Layout Rows</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled prefs" id="layoutRowsSlider"></td>
                        <td><span class="help-mark" title="configures the number of rows used to lay out the camera frames">?</span></td>
                    </tr>
                    <tr class="settings-item" min="0" max="100" snap="2" ticksnum="6" decimals="0">
                        <td class="settings-item-label"><span class="settings-item-label">Frame Rate Dimmer</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled prefs" id="framerateDimmerSlider"></td>
                        <td><span class="help-mark" title="dims the global frame rate to save network bandwidth and traffic (doesn't work on simple MJPEG cameras)">?</span></td>
                    </tr>
                    <tr class="settings-item" min="1" max="100" snap="2" ticks="1|20|40|60|80|100" decimals="0">
                        <td class="settings-item-label"><span class="settings-item-label">Resolution Dimmer</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled prefs" id="resolutionDimmerSlider"></td>
                        <td><span class="help-mark" title="dims the actual resolution of all cameras to save network bandwidth and traffic (doesn't work on simple MJPEG cameras)">?</span></td>
                    </tr>
                </table>
                
                <tr class="settings-item advanced-setting">
                    <td colspan="100"><div class="settings-item-separator" style="margin: 0px 0px 1.5em 0px;"></div></td>
                </tr>

                <!-- General Settings -->
                <div class="settings-section-title" id="generalSectionDiv">
                    <span class="help-mark" title="general settings, not related to any camera">?</span>
                    <a class="settings-section-title">General Settings</a>
                    <span class="minimize open"></span>
                </div>
                <table class="settings">
                    <tr class="settings-item">
                        <td class="settings-item-label"><span class="settings-item-label">Advanced Settings</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled general main-config" id="showAdvancedSwitch"></td>
                        <td><span class="help-mark" title="enable this to be able to access all the advanced settings">?</span></td>
                    </tr>
                    <tr class="settings-item" required="true" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Admin Username</span></td>
                        <td class="settings-item-value"><input type="text" class="styled general main-config" id="adminUsernameEntry" readonly="readonly"></td>
                        <td><span class="help-mark" title="the username to be used for configuring the system">?</span></td>
                    </tr>
                    <tr class="settings-item" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Admin Password</span></td>
                        <td class="settings-item-value"><input type="password" class="styled general main-config" id="adminPasswordEntry"></td>
                        <td><span class="help-mark" title="administrator's password">?</span></td>
                    </tr>
                    <tr class="settings-item" required="true" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Surveillance Username</span></td>
                        <td class="settings-item-value"><input type="text" class="styled general main-config" id="normalUsernameEntry"></td>
                        <td><span class="help-mark" title="the username to be used for video surveillance">?</span></td>
                    </tr>
                    <tr class="settings-item" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Surveillance Password</span></td>
                        <td class="settings-item-value"><input type="password" class="styled general main-config" id="normalPasswordEntry"></td>
                        <td><span class="help-mark" title="the password for the surveillance user (leave empty for passwordless surveillance)">?</span></td>
                    </tr>
                    {% for config in main_sections.get('general', {}).get('configs', []) %}
                        {{config_item(config)}}
                    {% endfor %}
                    <tr class="settings-item advanced-setting">
                        <td colspan="100"><div class="settings-item-separator"></div></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">motionEye Version</span></td>
                        <td class="settings-item-value"><span class="settings-item-label">{{version}}</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Motion Version</span></td>
                        <td class="settings-item-value"><span class="settings-item-label">{{motion_version}}</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">OS Version</span></td>
                        <td class="settings-item-value"><span class="settings-item-label">{{os_version}}</span></td>
                    </tr>
                    {% if enable_update %}
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Software Update</span></td>
                        <td class="settings-item-value"><div class="button normal-button update-button" id="updateButton">Check</div></td>
                        <td><span class="help-mark" title="checks for new versions and performs updates">?</span></td>
                    </tr>
                    {% endif %}
                    <tr class="settings-item advanced-setting{% if not enable_reboot %} hidden{% endif %}">
                        <td class="settings-item-label"><span class="settings-item-label">Power</span></td>
                        <td class="settings-item-value"><div class="button normal-button shut-down-button" id="shutDownButton">Shut Down</div></td>
                        <td><span class="help-mark" title="shuts down the system">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting{% if not enable_reboot %} hidden{% endif %}">
                        <td class="settings-item-label"><span class="settings-item-label"></span></td>
                        <td class="settings-item-value"><div class="button normal-button reboot-button" id="rebootButton">Reboot</div></td>
                        <td><span class="help-mark" title="reboots the system">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td colspan="100"><div class="settings-item-separator"></div></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Configuration</span></td>
                        <td class="settings-item-value"><div class="button normal-button backup-button" id="backupButton">Backup</div></td>
                        <td><span class="help-mark" title="creates a file with the current configuration for you to save it locally">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label"></span></td>
                        <td class="settings-item-value"><div class="button normal-button restore-button" id="restoreButton">Restore</div></td>
                        <td><span class="help-mark" title="restores the configuration from a previously saved backup file">?</span></td>
                    </tr>
                </table>

                <!-- Additional Main Sections -->
                {% for section in main_sections.values() %}
                {% if section.get('label') and section.get('configs') %}
                <div class="settings-section-title {% if section['advanced'] %}advanced-setting{% endif %}">
                    {% if section.get('onoff') %}<input type="checkbox" class="styled section additional-section {{section['name']}} main-config" id="{{section['name']}}Switch">{% endif %}
                    {% if section.get('description') %}<span class="help-mark" title="{{section['description']}}">?</span>{% endif %}
                    <a class="settings-section-title">{{section['label']}}</a>
                    <span class="minimize {% if section.get('open') %}open{% endif %}"></span>
                </div>
                <table class="settings {% if section.get('advanced') %}advanced-setting{% endif %}">
                    {% for config in section['configs'] %}
                        {{config_item(config)}}
                    {% endfor %}
                </table>
                {% endif %}                    
                {% endfor %}

                <tr class="settings-item advanced-setting">
                    <td colspan="100"><div class="settings-item-separator" style="margin: 0px 0px 1.5em 0px;"></div></td>
                </tr>
                
                <!-- Video Device -->
                <div class="settings-section-title" id="deviceSectionDiv">
                    <input type="checkbox" class="styled section device camera-config" id="videoDeviceEnabledSwitch">
                    <span class="help-mark" title="enable this if you want to use this camera device">?</span>
                    <a class="settings-section-title">Video Device</a>
                    <span class="minimize open"></span>
                </div>
                <table class="settings">
                    <tr class="settings-item" required="true" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Camera Name</span></td>
                        <td class="settings-item-value"><input type="text" class="styled device camera-config" id="deviceNameEntry" placeholder="camera name..."></td>
                        <td><span class="help-mark" title="an alias for this camera device">?</span></td>
                    </tr>
                    <tr class="settings-item" required="true" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Camera ID</span></td>
                        <td class="settings-item-value"><input type="text" class="styled device camera-config" id="deviceIdEntry" readonly="readonly"></td>
                        <td><span class="help-mark" title="the camera identifier number">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Camera Device</span></td>
                        <td class="settings-item-value"><input type="text" class="styled device camera-config" id="deviceUrlEntry" readonly="readonly"></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Camera Type</span></td>
                        <td class="settings-item-value"><input type="text" class="styled device camera-config" id="deviceTypeEntry" readonly="readonly"></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td colspan="100"><div class="settings-item-separator"></div></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Automatic Brightness</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled device camera-config" id="autoBrightnessSwitch"></td>
                        <td><span class="help-mark" title="enables software automatic brightness (only recommended for cameras without autobrightness)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
                        <td class="settings-item-label"><span class="settings-item-label">Brightness</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled device camera-config" id="brightnessSlider"></td>
                        <td><span class="help-mark" title="sets a desired brightness level for this camera">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
                        <td class="settings-item-label"><span class="settings-item-label">Contrast</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled device camera-config" id="contrastSlider"></td>
                        <td><span class="help-mark" title="sets a desired contrast level for this camera">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
                        <td class="settings-item-label"><span class="settings-item-label">Saturation</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled device camera-config" id="saturationSlider"></td>
                        <td><span class="help-mark" title="sets a desired saturation level for this camera">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
                        <td class="settings-item-label"><span class="settings-item-label">Hue</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled device camera-config" id="hueSlider"></td>
                        <td><span class="help-mark" title="sets a desired hue for this camera">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td colspan="100"><div class="settings-item-separator"></div></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Video Resolution</span></td>
                        <td class="settings-item-value">
                            <select class="video-resolution styled device camera-config" id="resolutionSelect">
                            </select>
                        </td>
                        <td><span class="help-mark" title="the video resolution (larger values produce better quality but require more CPU power, larger storage space and bandwidth)">?</span></td>
                    </tr>
                    <tr class="settings-item" min="96" max="4096" required="true" depends="resolution=custom">
                        <td class="settings-item-label"><span class="settings-item-label">Width</span></td>
                        <td class="settings-item-value"><input type="text" class="styled number device camera-config" id="customWidthEntry"></td>
                        <td><span class="help-mark" title="enter a custom resolution width">?</span></td>
                    </tr>
                    <tr class="settings-item" min="96" max="4096" required="true" depends="resolution=custom">
                        <td class="settings-item-label"><span class="settings-item-label">Height</span></td>
                        <td class="settings-item-value"><input type="text" class="styled number device camera-config" id="customHeightEntry"></td>
                        <td><span class="help-mark" title="enter a custom resolution height">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Video Rotation</span></td>
                        <td class="settings-item-value">
                            <select class="rotation styled device camera-config" id="rotationSelect">
                                <option value="0">0&deg;</option>
                                <option value="90">90&deg;</option>
                                <option value="180">180&deg;</option>
                                <option value="270">270&deg;</option>
                            </select>
                        </td>
                        <td><span class="help-mark" title="use this to rotate the captured image, if your camera is not positioned correctly">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="2" max="30" snap="0" ticks="2|5|10|15|20|25|30" decimals="0">
                        <td class="settings-item-label"><span class="settings-item-label">Frame Rate</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled device camera-config" id="framerateSlider"></td>
                        <td><span class="help-mark" title="sets the number of frames captured by the camera every second (higher values produce smoother videos but require more CPU power, larger storage space and bandwidth)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Extra Motion Options</span></td>
                        <td class="settings-item-value"><textarea class="styled device camera-config" id="extraOptionsEntry" rows="3"></textarea></td>
                        <td><span class="help-mark" title="you can add here any extra options for the motion daemon (use the &quot;name value&quot; format, one option per line)">?</span></td>
                    </tr>
                    {% for config in camera_sections.get('device', {}).get('configs', []) %}
                        {{config_item(config)}}
                    {% endfor %}
                </table>
                
                <!-- File Storage -->
                <div class="settings-section-title advanced-setting" id="storageSectionDiv">
                    <span class="help-mark" title="choose where and how your media files are saved">?</span>
                    <a class="settings-section-title">File Storage</a>
                    <span class="minimize"></span>
                </div>
                <table class="settings advanced-setting">
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Storage Device</span></td>
                        <td class="settings-item-value">
                            <select class="styled storage camera-config" id="storageDeviceSelect">
                            </select>
                        </td>
                        <td><span class="help-mark" title="indicates the storage device where the image and video files will be saved">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" required="true" depends="storageDevice=network-share" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Network Server</span></td>
                        <td class="settings-item-value"><input type="text" class="styled storage camera-config" id="networkServerEntry"></td>
                        <td><span class="help-mark" title="the address of the network server (IP address or hostname)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" required="true" depends="storageDevice=network-share" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Share Name</span></td>
                        <td class="settings-item-value"><input type="text" class="styled storage camera-config" id="networkShareNameEntry"></td>
                        <td><span class="help-mark" title="the name of the network share">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="storageDevice=network-share" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Share Username</span></td>
                        <td class="settings-item-value"><input type="text" class="styled storage camera-config" id="networkUsernameEntry"></td>
                        <td><span class="help-mark" title="the username to be supplied when accessing the network share (leave empty if no username is required)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="storageDevice=network-share" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Share Password</span></td>
                        <td class="settings-item-value"><input type="password" class="styled storage camera-config" id="networkPasswordEntry"></td>
                        <td><span class="help-mark" title="the password required by the network share (leave empty if no password is required)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" required="true" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Root Directory</span></td>
                        <td class="settings-item-value"><input type="text" class="styled storage camera-config" id="rootDirectoryEntry"></td>
                        <td><span class="help-mark" title="the root path (on the selected storage device) where the files will be saved">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="storageDevice=network-share">
                        <td class="settings-item-label"><span class="settings-item-label"></span></td>
                        <td class="settings-item-value"><div class="button normal-button test-button" id="networkShareTestButton">Test Share</div></td>
                        <td><span class="help-mark" title="click this button to test the network share connectivity after you have filled in the required details">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td colspan="100"><div class="settings-item-separator"></div></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Disk Usage</span></td>
                        <td class="settings-item-value">
                            <div id="diskUsageProgressBar" class="progress-bar"></div>
                        </td>
                        <td><span class="help-mark" title="the used/total size of the disk where the root directory resides">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td colspan="100"><div class="settings-item-separator"></div></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Upload Media Files</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled storage camera-config" id="uploadEnabledSwitch"></td>
                        <td><span class="help-mark" title="enable this if you want your media files to be uploaded to an external service">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="uploadEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Upload Pictures</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled storage camera-config" id="uploadPictureSwitch"></td>
                        <td><span class="help-mark" title="enable this if you want pictures to be uploaded to an external service">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="uploadEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Upload Movies</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled storage camera-config" id="uploadMovieSwitch"></td>
                        <td><span class="help-mark" title="enable this if you want videos to be uploaded to an external service">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="uploadEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Upload Service</span></td>
                        <td class="settings-item-value">
                            <select class="styled storage camera-config" id="uploadServiceSelect">
                                <option value="ftp">FTP Server</option>
                                <option value="sftp">SFTP Server</option>
<!--                                 <option value="http">HTTP Server</option> -->
<!--                                 <option value="https">HTTPS Server</option> -->
                                <option value="gdrive">Google Drive</option>
                                <option value="dropbox">Dropbox</option>
                            </select>
                        </td>
                        <td><span class="help-mark" title="choose a service to which the media files should be uploaded">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" required="true" depends="uploadEnabled uploadService=(ftp|sftp|http|https)">
                        <td class="settings-item-label"><span class="settings-item-label">Server Address</span></td>
                        <td class="settings-item-value"><input type="text" class="styled storage camera-config" id="uploadServerEntry"></td>
                        <td><span class="help-mark" title="the domain name or IP address of the server (e.g. ftp.example.com or 192.168.1.3)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" required="true" min="1" max="65535" depends="uploadEnabled uploadService=(ftp|sftp|http|https)">
                        <td class="settings-item-label"><span class="settings-item-label">Server Port</span></td>
                        <td class="settings-item-value"><input type="text" class="number styled storage camera-config" id="uploadPortEntry"></td>
                        <td><span class="help-mark" title="the port to use when connecting to the service (leave it empty to use the default value)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="uploadEnabled uploadService=(http|https)">
                        <td class="settings-item-label"><span class="settings-item-label">Method</span></td>
                        <td class="settings-item-value">
                            <select class="styled storage camera-config" id="uploadMethodSelect">
                                <option value="post">POST</option>
                                <option value="put">PUT</option>
                            </select>
                        </td>
                        <td><span class="help-mark" title="the HTTP method to use when uploading files">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" required="true" depends="uploadEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Location</span></td>
                        <td class="settings-item-value"><input type="text" class="styled storage camera-config" id="uploadLocationEntry"></td>
                        <td><span class="help-mark" title="the location (root path) where media files should be uploaded (e.g. /files/cam1/)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="uploadEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Include Subfolders</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled storage camera-config" id="uploadSubfoldersSwitch"></td>
                        <td><span class="help-mark" title="enable this to upload the media files together with their subfolders, instead of placing them directly into the root location">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="uploadEnabled uploadService=(ftp|sftp|http|https)">
                        <td class="settings-item-label"><span class="settings-item-label">Username</span></td>
                        <td class="settings-item-value"><input type="text" class="styled storage camera-config" id="uploadUsernameEntry"></td>
                        <td><span class="help-mark" title="the username for the upload service account">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="uploadEnabled uploadService=(ftp|sftp|http|https)">
                        <td class="settings-item-label"><span class="settings-item-label">Password</span></td>
                        <td class="settings-item-value"><input type="password" class="styled storage camera-config" id="uploadPasswordEntry"></td>
                        <td><span class="help-mark" title="the password for the upload service account">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="uploadEnabled uploadService=(gdrive|dropbox)">
                        <td class="settings-item-label"><span class="settings-item-label">Authorization Key</span></td>
                        <td class="settings-item-value"><input type="password" class="styled storage camera-config" id="uploadAuthorizationKeyEntry"></td>
                        <td><span class="help-mark" title="the key used to authenticate with the upload service (normally required only during setup)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="uploadEnabled uploadService=(gdrive|dropbox)">
                        <td class="settings-item-label"><span class="settings-item-label"></span></td>
                        <td class="settings-item-value">
                            <div class="html styled storage camera-config" id="authorizeLinkHtml">
                                <a href="javascript:authorizeUpload()">Obtain Key</a>
                            </div>
                        </td>
                        <td><span class="help-mark" title="click here to obtain the service authorization key">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="uploadEnabled">
                        <td class="settings-item-label"><span class="settings-item-label"></span></td>
                        <td class="settings-item-value"><div class="button normal-button test-button" id="uploadTestButton">Test Service</div></td>
                        <td><span class="help-mark" title="click this button to test the upload service after you have filled in the required details">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td colspan="100"><div class="settings-item-separator"></div></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Call A Web Hook</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled storage camera-config" id="webHookStorageEnabledSwitch"></td>
                        <td><span class="help-mark" title="enable this if you want a URL to be requested after a media file is created">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" required="true" depends="webHookStorageEnabled" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Web Hook URL</span></td>
                        <td class="settings-item-value"><input type="text" class="styled storage camera-config" id="webHookStorageUrlEntry" placeholder="e.g. http://example.com/notify/"></td>
                        <td><span class="help-mark" title="a URL to be requested when motion is detected; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number, %f = file path">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="webHookStorageEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">HTTP Method</span></td>
                        <td class="settings-item-value">
                            <select class="styled storage camera-config" id="webHookStorageHttpMethodSelect">
                                <option value="GET">GET</option>
                                <option value="POST">POST (query)</option>
                                <option value="POSTf">POST (form)</option>
                                <option value="POSTj">POST (json)</option>
                            </select>
                        </td>
                        <td><span class="help-mark" title="the HTTP method to use when requesting the web hook URL (the given URL-encoded parameters will in fact be transmitted as indicated here)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td colspan="100"><div class="settings-item-separator"></div></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Run A Command</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled storage camera-config" id="commandStorageEnabledSwitch"></td>
                        <td><span class="help-mark" title="enable this if you want to execute a command after a media file is created">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" required="true" depends="commandStorageEnabled" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Command</span></td>
                        <td class="settings-item-value"><input type="text" class="styled storage camera-config" id="commandStorageEntry" placeholder="command..."></td>
                        <td><span class="help-mark" title="a command to be executed after a media file is created; multiple commands can be separated by a semicolon; don't use semicolons inside commands; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number, %f = file path">?</span></td>
                    </tr>
                    {% for config in camera_sections.get('storage', {}).get('configs', []) %}
                        {{config_item(config)}}
                    {% endfor %}
                </table>
                
                <!-- Text Overlay -->
                <div class="settings-section-title advanced-setting" id="textOverlaySectionDiv">
                    <input type="checkbox" class="styled section text-overlay camera-config" id="textOverlayEnabledSwitch">
                    <span class="help-mark" title="choose what information is displayed on the captured frames">?</span>
                    <a class="settings-section-title">Text Overlay</a>
                    <span class="minimize"></span>
                </div>
                <table class="settings advanced-setting">
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Left Text</span></td>
                        <td class="settings-item-value">
                            <select class="styled text-overlay camera-config" id="leftTextTypeSelect">
                                <option value="camera-name">Camera Name</option>
                                <option value="timestamp">Timestamp</option>
                                <option value="custom-text">Custom Text</option>
                                <option value="disabled">Disabled</option>
                            </select>
                        </td>
                        <td><span class="help-mark" title="sets the text displayed on the movies and images, on the lower left corner">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" required="true" depends="leftTextType=custom-text" strip="true">
                        <td class="settings-item-label"></td>
                        <td class="settings-item-value"><input type="text" class="styled text-overlay camera-config" id="leftTextEntry" placeholder="custom text..."></td>
                        <td><span class="help-mark" title="sets a custom left text; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number, %T = HH:MM:SS, \n = new line">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Right Text</span></td>
                        <td class="settings-item-value">
                            <select class="styled text-overlay camera-config" id="rightTextTypeSelect">
                                <option value="camera-name">Camera Name</option>
                                <option value="timestamp">Timestamp</option>
                                <option value="custom-text">Custom Text</option>
                                <option value="disabled">Disabled</option>
                            </select>
                        </td>
                        <td><span class="help-mark" title="sets the text displayed on the movies and images, on the lower right corner">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" required="true" depends="rightTextType=custom-text" strip="true">
                        <td class="settings-item-label"></td>
                        <td class="settings-item-value"><input type="text" class="styled text-overlay camera-config" id="rightTextEntry" placeholder="custom text..."></td>
                        <td><span class="help-mark" title="sets a custom right text; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number, %T = HH:MM:SS, \n = new line">?</span></td>
                    </tr>
                    {% for config in camera_sections.get('text-overlay', {}).get('configs', []) %}
                        {{config_item(config)}}
                    {% endfor %}
                </table>

                <!-- Video Streaming -->
                <div class="settings-section-title" minimize-switch-independent="true" id="streamingSectionDiv">
                    <input type="checkbox" class="styled section streaming camera-config" id="videoStreamingEnabledSwitch">
                    <span class="help-mark" title="enable this if you want video streaming for this camera">?</span>
                    <a class="settings-section-title">Video Streaming</a>
                    <span class="minimize"></span>
                </div>
                <table class="settings">
                    <tr class="settings-item advanced-setting" min="1" max="30" snap="0" ticks="1|5|10|15|20|25|30" decimals="0">
                        <td class="settings-item-label"><span class="settings-item-label">Streaming Frame Rate</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled streaming camera-config" id="streamingFramerateSlider"></td>
                        <td><span class="help-mark" title="sets the number of frames transmitted every second on the live streaming">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
                        <td class="settings-item-label"><span class="settings-item-label">Streaming Quality</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled streaming camera-config" id="streamingQualitySlider"></td>
                        <td><span class="help-mark" title="sets the live streaming quality (higher values produce a better video quality but require more bandwidth)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Streaming Image Resizing</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled streaming camera-config" id="streamingServerResizeSwitch"></td>
                        <td><span class="help-mark" title="when this is enabled, the images are resized before they are sent to the browser (disable when running on a slow CPU)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%" depends="streamingServerResize">
                        <td class="settings-item-label"><span class="settings-item-label">Streaming Resolution</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled streaming camera-config" id="streamingResolutionSlider"></td>
                        <td><span class="help-mark" title="the streaming resolution given as percent of the video device resolution (higher values produce better video quality but require more bandwidth)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="1024" max="65535" depends="videoStreamingEnabled" required="true">
                        <td class="settings-item-label"><span class="settings-item-label">Streaming Port</span></td>
                        <td class="settings-item-value"><input type="text" class="styled streaming camera-config" id="streamingPortEntry"></td>
                        <td><span class="help-mark" title="sets the TCP port on which the webcam streaming server listens">?</span></td>
                    </tr>
                    {% if has_streaming_auth %}
                    <tr class="settings-item advanced-setting" depends="videoStreamingEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Authentication Mode</span></td>
                        <td class="settings-item-value">
                            <select class="styled streaming camera-config" id="streamingAuthModeSelect">
                                <option value="disabled">Disabled</option>
                                <option value="basic">Basic</option>
                                <option value="digest">Digest</option>
                            </select>
                        </td>
                        <td><span class="help-mark" title="the authentication method used by the stream (choose Basic instead of Digest if you encounter issues with third party apps); surveillance credentials will be used">?</span></td>
                    </tr>
                    {% endif %}
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Motion Optimization</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled streaming camera-config" id="streamingMotion"></td>
                        <td><span class="help-mark" title="enable this if you want a lower frame rate for the live streaming when no motion is detected">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="videoStreamingEnabled">
                        <td colspan="100"><div class="settings-item-separator"></div></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Useful URLs</span></td>
                        <td class="settings-item-value">
                            <div class="html styled streaming camera-config" id="streamingSnapshotUrlHtml">
                                <a href="javascript:showSnapshotUrl()">Snapshot URL</a>
                            </div>
                        </td>
                        <td><span class="help-mark" title="a URL that provides a JPEG image with the most recent snapshot of the camera">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"></td>
                        <td class="settings-item-value">
                            <div class="html styled streaming camera-config" id="streamingMjpgUrlHtml">
                                <a href="javascript:showMjpgUrl()">Streaming URL</a>
                            </div>
                        </td>
                        <td><span class="help-mark" title="a URL that provides a MJPEG stream of the camera">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"></td>
                        <td class="settings-item-value">
                            <div class="html styled streaming camera-config" id="streamingEmbedUrlHtml">
                                <a href="javascript:showEmbedUrl()">Embed URL</a>
                            </div>
                        </td>
                        <td><span class="help-mark" title="a URL that provides a minimal HTML document containing the camera frame, ready to be embedded">?</span></td>
                    </tr>
                    {% for config in camera_sections.get('streaming', {}).get('configs', []) %}
                        {{config_item(config)}}
                    {% endfor %}
                </table>
                
                <!-- Still Images -->
                <div class="settings-section-title" id="stillImagesSectionDiv">
                    <input type="checkbox" class="styled section still-images camera-config" id="stillImagesEnabledSwitch">
                    <span class="help-mark" title="enable this if you want to capture still images (pictures)">?</span>
                    <a class="settings-section-title">Still Images</a>
                    <span class="minimize"></span>
                </div>
                <table class="settings">
                    <tr class="settings-item advanced-setting" required="true" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Image File Name</span></td>
                        <td class="settings-item-value"><input type="text" class="styled still-images camera-config" id="imageFileNameEntry" placeholder="file name pattern..."></td>
                        <td><span class="help-mark" title="sets the name pattern for the image (JPEG) files; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number, / = subfolder">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
                        <td class="settings-item-label"><span class="settings-item-label">Image Quality</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled still-images camera-config" id="imageQualitySlider"></td>
                        <td><span class="help-mark" title="sets the JPEG image quality (higher values produce a better image quality but require more storage space)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Capture Mode</span></td>
                        <td class="settings-item-value">
                            <select class="styled still-images camera-config" id="captureModeSelect">
                                <option value="motion-triggered">Motion Triggered</option>
                                <option value="motion-triggered-one">Motion Triggered (One Picture)</option>
                                <option value="interval-snapshots">Interval Snapshots</option>
                                <option value="all-frames">All Frames</option>
                                <option value="manual">Manual</option>
                            </select>
                        </td>
                        <td><span class="help-mark" title="sets the image capture mode:
                                Motion Triggered = an image captured whenever motion is detected,
                                Interval Snapshots = an image captured every x seconds,
                                All Frames = saves each frame to an image file,
                                Manual = manual snapshots using snapshot button">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="1" max="86400" required="true" depends="captureMode=interval-snapshots">
                        <td class="settings-item-label"><span class="settings-item-label">Snapshot Interval</span></td>
                        <td class="settings-item-value"><input type="text" class="styled number still-images camera-config" id="snapshotIntervalEntry"><span class="settings-item-unit">seconds</span></td>
                        <td><span class="help-mark" title="sets the interval (in seconds) for the snapshots">?</span></td>
                    </tr>
                    <tr class="settings-item">
                        <td class="settings-item-label"><span class="settings-item-label">Preserve Pictures</span></td>
                        <td class="settings-item-value">
                            <select class="styled still-images camera-config" id="preservePicturesSelect">
                                <option value="1">For One Day</option>
                                <option value="7">For One Week</option>
                                <option value="30">For One Month</option>
                                <option value="365">For One Year</option>
                                <option value="0">Forever</option>
                                <option value="-1">Custom</option>
                            </select>
                        </td>
                        <td><span class="help-mark" title="images older than the specified duration are automatically deleted to free up storage space">?</span></td>
                    </tr>
                    <tr class="settings-item" min="1" max="3650" depends="preservePictures=-1" required="true">
                        <td class="settings-item-label"><span class="settings-item-label">Pictures Lifetime</span></td>
                        <td class="settings-item-value"><input type="text" class="styled number still-images camera-config" id="picturesLifetimeEntry"><span class="settings-item-unit">days</span></td>
                        <td><span class="help-mark" title="sets the number of days after which the pictures will be deleted automatically">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Enable Manual Snapshots</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled still-images camera-config" id="manualSnapshotsSwitch"></td>
                        <td><span class="help-mark" title="when this is enabled, a button on the camera frame will allow you to manually take snapshots">?</span></td>
                    </tr>
                    {% for config in camera_sections.get('still-images', {}).get('configs', []) %}
                        {{config_item(config)}}
                    {% endfor %}
                </table>
                
                <!-- Movies -->
                <div class="settings-section-title" id="moviesSectionDiv">
                    <input type="checkbox" class="styled section movies camera-config" id="moviesEnabledSwitch">
                    <span class="help-mark" title="enable this if you want to record movies">?</span>
                    <a class="settings-section-title">Movies</a>
                    <span class="minimize"></span>
                </div>
                <table class="settings">
                    <tr class="settings-item advanced-setting" required="true" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Movie File Name</span></td>
                        <td class="settings-item-value"><input type="text" class="styled movies camera-config" id="movieFileNameEntry" placeholder="file name pattern..."></td>
                        <td><span class="help-mark" title="sets the name pattern for the movie files; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number, / = subfolder">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Movie Format</span></td>
                        <td class="settings-item-value">
                            <select class="styled movies camera-config" id="movieFormatSelect">
                                <option value="mpeg4">MPEG4 (.avi)</option>
                                <option value="msmpeg4">MSMPEG4v2 (.avi)</option>
                                <option value="swf">Small Web Format (.swf)</option>
                                <option value="flv">Flash Video (.flv)</option>
                                <option value="mov">QuickTime (.mov)</option>
                                {% if has_new_movie_format_support %}
                                <option value="mp4">H.264 (.mp4)</option>
                                {% if has_h264_omx_support %}
                                <option value="mp4:h264_omx">H.264/OMX (.mp4)</option>
                                {% endif %}
                                <option value="hevc">HEVC (.mp4)</option>
                                <option value="mkv">Matroska Video (.mkv)</option>
                                {% if has_h264_omx_support %}
                                <option value="mkv:h264_omx">Matroska Video/OMX (.mkv)</option>
                                {% endif %}
                                {% endif %}
                            </select>
                        </td>
                        <td><span class="help-mark" title="sets the movie file format; not all formats are guaranteed to work on all systems; if in doubt, test each format and select the one that works best with your video player">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
                        <td class="settings-item-label"><span class="settings-item-label">Movie Quality</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled movies camera-config" id="movieQualitySlider"></td>
                        <td><span class="help-mark" title="sets the MPEG video quality (higher values produce a better video quality but require more storage space)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Recording Mode</span></td>
                        <td class="settings-item-value">
                            <select class="styled movies camera-config" id="recordingModeSelect">
                                <option value="motion-triggered">Motion Triggered</option>
                                <option value="continuous">Continuous Recording</option>
                            </select>
                        </td>
                        <td><span class="help-mark" title="sets the recording mode: Motion Triggered = a new movie created whenever motion is detected, Continuous Recording = one big movie file">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="0" max="86400" required="true">
                        <td class="settings-item-label"><span class="settings-item-label">Maximum Movie Length</span></td>
                        <td class="settings-item-value"><input type="text" class="number styled movies camera-config" id="maxMovieLengthEntry"><span class="settings-item-unit">seconds</span></td>
                        <td><span class="help-mark" title="sets the maximum length of movies, in seconds; if the motion event lasts longer, a new movie file is created; use 0 for unlimited length">?</span></td>
                    </tr>
                    <tr class="settings-item">
                        <td class="settings-item-label"><span class="settings-item-label">Preserve Movies</span></td>
                        <td class="settings-item-value">
                            <select class="styled movies camera-config" id="preserveMoviesSelect">
                                <option value="1">For One Day</option>
                                <option value="7">For One Week</option>
                                <option value="30">For One Month</option>
                                <option value="365">For One Year</option>
                                <option value="0">Forever</option>
                                <option value="-1">Custom</option>
                            </select>
                        </td>
                        <td><span class="help-mark" title="movies older than the specified duration are automatically deleted to free up storage space">?</span></td>
                    </tr>
                    <tr class="settings-item" min="1" max="3650" depends="preserveMovies=-1" required="true">
                        <td class="settings-item-label"><span class="settings-item-label">Movies Lifetime</span></td>
                        <td class="settings-item-value"><input type="text" class="styled number movies camera-config" id="moviesLifetimeEntry"><span class="settings-item-unit">days</span></td>
                        <td><span class="help-mark" title="sets the number of days after which the movies will be deleted automatically">?</span></td>
                    </tr>
                    {% for config in camera_sections.get('movies', {}).get('configs', []) %}
                        {{config_item(config)}}
                    {% endfor %}
                </table>

                <!-- Motion Detection -->
                <div class="settings-section-title advanced-setting" id="motionDetectionSectionDiv">
                    <input type="checkbox" class="styled section motion-detection camera-config" id="motionDetectionEnabledSwitch">
                    <span class="help-mark" title="enable this to use and configure the motion detection mechanism">?</span>
                    <a class="settings-section-title">Motion Detection</a>
                    <span class="minimize"></span>
                </div>
                <table class="settings advanced-setting">
                    <tr class="settings-item advanced-setting" min="0" max="20" snap="0" ticksnum="5" decimals="1" unit="%">
                        <td class="settings-item-label"><span class="settings-item-label">Frame Change Threshold</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled motion-detection camera-config" id="frameChangeThresholdSlider"></td>
                        <td><span class="help-mark" title="indicates the minimal percent of the image that must change between two successive frames in order for motion to be detected (smaller values give a more sensitive detection, but are prone to false positives)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Auto Noise Detection</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled motion-detection camera-config" id="autoNoiseDetectSwitch"></td>
                        <td><span class="help-mark" title="enable this to automatically adjust the noise level">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="0" max="25" snap="0" ticksnum="6" decimals="0" unit="%" depends="!autoNoiseDetect">
                        <td class="settings-item-label"><span class="settings-item-label">Noise Level</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled motion-detection camera-config" id="noiseLevelSlider"></td>
                        <td><span class="help-mark" title="manually sets the noise level to a fixed value">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
                        <td class="settings-item-label"><span class="settings-item-label">Light Switch Detection</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled motion-detection camera-config" id="lightSwitchDetectSlider"></td>
                        <td><span class="help-mark" title="sets the percentage of the image that needs to change so that the event is treated as a sudden light change instead of motion (0% disables the function)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Despeckle Filter</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled motion-detection camera-config" id="despeckleFilterSwitch"></td>
                        <td><span class="help-mark" title="enable this to apply a despeckle filter to frames before detecting motion">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td colspan="100"><div class="settings-item-separator"></div></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="0" max="86400" required="true">
                        <td class="settings-item-label"><span class="settings-item-label">Motion Gap</span></td>
                        <td class="settings-item-value"><input type="text" class="number styled motion-detection camera-config" id="eventGapEntry"><span class="settings-item-unit">seconds</span></td>
                        <td><span class="help-mark" title="sets the number of seconds of silence (i.e. no motion) that mark the end of a motion event">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="0" max="1000" required="true">
                        <td class="settings-item-label"><span class="settings-item-label">Captured Before</span></td>
                        <td class="settings-item-value"><input type="text" class="number styled motion-detection camera-config" id="preCaptureEntry"><span class="settings-item-unit">frames</span></td>
                        <td><span class="help-mark" title="sets the number of frames to be captured (and included in the movie) before a motion event is detected">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="0" max="1000" required="true">
                        <td class="settings-item-label"><span class="settings-item-label">Captured After</span></td>
                        <td class="settings-item-value"><input type="text" class="number styled motion-detection camera-config" id="postCaptureEntry"><span class="settings-item-unit">frames</span></td>
                        <td><span class="help-mark" title="sets the number of frames to be captured (and included in the movie) after the end of a motion event">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="1" max="1000" required="true">
                        <td class="settings-item-label"><span class="settings-item-label">Minimum Motion Frames</span></td>
                        <td class="settings-item-value"><input type="text" class="number styled motion-detection camera-config" id="minimumMotionFramesEntry"><span class="settings-item-unit">frames</span></td>
                        <td><span class="help-mark" title="sets the minimum number of successive motion frames required to start a motion event">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td colspan="100"><div class="settings-item-separator"></div></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Mask</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled motion-detection camera-config" id="maskSwitch"></td>
                        <td><span class="help-mark" title="enables image masking for a more selective and precise motion detection">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="mask">
                        <td class="settings-item-label"><span class="settings-item-label">Mask Type</span></td>
                        <td class="settings-item-value">
                            <select class="styled motion-detection camera-config" id="maskTypeSelect">
                                <option value="smart">Smart</option>
                                <option value="editable">Editable</option>
                            </select>
                        </td>
                        <td><span class="help-mark" title="the smart option automatically detects regions with regular motion and dynamically builds an internal mask, while the editable mask allows you to manually build it yourself">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="1" max="10" snap="1" ticksnum="10" decimals="0" unit="" depends="mask maskType=smart">
                        <td class="settings-item-label"><span class="settings-item-label">Smart Mask Sluggishness</span></td>
                        <td class="settings-item-value"><input type="text" class="range styled motion-detection camera-config" id="smartMaskSluggishnessSlider"></td>
                        <td><span class="help-mark" title="lower values result in a longer-lasting smart mask with a slower building process">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="mask maskType=editable">
                        <td class="settings-item-label"><span class="settings-item-label"></span></td>
                        <td class="settings-item-value">
                            <div class="button normal-button edit-mask-button" id="editMaskButton">Edit Mask</div>
                            <div class="button normal-button save-mask-button" id="saveMaskButton">Save Mask</div>
                            <input type="text" class="motion-detection camera-config" id="maskLinesEntry">
                        </td>
                        <td><span class="help-mark" title="click this button to enable/disable the mask editor">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="mask maskType=editable">
                        <td class="settings-item-label"><span class="settings-item-label"></span></td>
                        <td class="settings-item-value"><div class="button normal-button clear-mask-button" id="clearMaskButton">Clear Mask</div></td>
                        <td><span class="help-mark" title="click this button to clear the current mask">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td colspan="100"><div class="settings-item-separator"></div></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Show Frame Changes</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled motion-detection camera-config" id="showFrameChangesSwitch"></td>
                        <td><span class="help-mark" title="if this is enabled, frame changes (number of pixels as well as the changed area) are shown on the video; temporarily enable this option to help adjust the motion detection parameters">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting">
                        <td class="settings-item-label"><span class="settings-item-label">Create Debug Media Files</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled motion-detection camera-config" id="createDebugMediaSwitch"></td>
                        <td><span class="help-mark" title="when enabled, creates special movies and pictures that help debugging motion detection problems">?</span></td>
                    </tr>
                    {% for config in camera_sections.get('motion-detection', {}).get('configs', []) %}
                        {{config_item(config)}}
                    {% endfor %}
                </table>
                
                <!-- Motion Notifications -->
                <div class="settings-section-title advanced-setting" id="notificationsSectionDiv">
                    <span class="help-mark" title="enable this if you want to be notified when motion is detected">?</span>
                    <a class="settings-section-title">Motion Notifications</a>
                    <span class="minimize"></span>
                </div>
                <table class="settings">
                    <tr class="settings-item advanced-setting" depends="motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Send An Email</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled notifications camera-config" id="emailNotificationsEnabledSwitch"></td>
                        <td><span class="help-mark" title="enable this if you want to receive an email whenever a motion event is detected">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" required="true" depends="emailNotificationsEnabled motionDetectionEnabled" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Email Addresses</span></td>
                        <td class="settings-item-value"><input type="text" class="styled notifications camera-config" id="emailAddressesEntry" placeholder="email addresses..."></td>
                        <td><span class="help-mark" title="email addresses (separated by comma) that are added here will receive notifications whenever a motion event is detected">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" required="true" depends="emailNotificationsEnabled motionDetectionEnabled" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">SMTP Server</span></td>
                        <td class="settings-item-value"><input type="text" class="styled notifications camera-config" id="smtpServerEntry" placeholder="e.g. smtp.gmail.com"></td>
                        <td><span class="help-mark" title="enter the hostname or IP address of your SMTP server (for Gmail use smtp.gmail.com)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="1" max="65535" depends="emailNotificationsEnabled motionDetectionEnabled" required="true">
                        <td class="settings-item-label"><span class="settings-item-label">SMTP Port</span></td>
                        <td class="settings-item-value"><input type="text" class="styled number notifications camera-config" id="smtpPortEntry" placeholder="e.g. 587"></td>
                        <td><span class="help-mark" title="enter the port used by your SMTP server (usually 465 for non-TLS connections and 587 for TLS connections)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="emailNotificationsEnabled motionDetectionEnabled" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">SMTP Account</span></td>
                        <td class="settings-item-value"><input type="text" class="styled notifications camera-config" id="smtpAccountEntry" placeholder="account@gmail.com..."></td>
                        <td><span class="help-mark" title="enter your SMTP account (normally your email address)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="emailNotificationsEnabled motionDetectionEnabled" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">SMTP Password</span></td>
                        <td class="settings-item-value"><input type="password" class="styled notifications camera-config" id="smtpPasswordEntry"></td>
                        <td><span class="help-mark" title="enter your SMTP account password (for Gmail use your Google password or an app-specific generated password)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="emailNotificationsEnabled motionDetectionEnabled" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">From Address</span></td>
                        <td class="settings-item-value"><input type="text" class="styled notifications camera-config" id="emailFromEntry" placeholder="email address..."></td>
                        <td><span class="help-mark" title="set a custom From address, if your SMTP service requires one (the first destination email address will be used if left blank)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="emailNotificationsEnabled motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Use TLS</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled notifications camera-config" id="smtpTlsSwitch"></td>
                        <td><span class="help-mark" title="enable this if your SMTP server requires TLS (Gmail needs this to be enabled)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" min="0" max="60" required="true" depends="emailNotificationsEnabled motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Attached Pictures Time Span</span></td>
                        <td class="settings-item-value"><input type="text" class="number styled notifications camera-config" id="emailPictureTimeSpanEntry"><span class="settings-item-unit">seconds</span></td>
                        <td><span class="help-mark" title="defines the picture search time interval to use when creating email attachments (higher values generate emails with more pictures at the cost of an increased notification delay); set to 0 to disable picture attachments; you must also enable Still Images for this to work">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="emailNotificationsEnabled motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label"></span></td>
                        <td class="settings-item-value"><div class="button normal-button test-button" id="emailTestButton">Test Email</div></td>
                        <td><span class="help-mark" title="click this button to test email notifications after you have filled in the required details">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="motionDetectionEnabled">
                        <td colspan="100"><div class="settings-item-separator"></div></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Call A Web Hook</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled notifications camera-config" id="webHookNotificationsEnabledSwitch"></td>
                        <td><span class="help-mark" title="enable this if you want a URL to be requested whenever a motion event is detected">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" required="true" depends="webHookNotificationsEnabled motionDetectionEnabled" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Web Hook URL</span></td>
                        <td class="settings-item-value"><input type="text" class="styled notifications camera-config" id="webHookNotificationsUrlEntry" placeholder="e.g. http://example.com/notify/"></td>
                        <td><span class="help-mark" title="a URL to be requested when motion is detected; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="webHookNotificationsEnabled motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">HTTP Method</span></td>
                        <td class="settings-item-value">
                            <select class="styled notifications camera-config" id="webHookNotificationsHttpMethodSelect">
                                <option value="GET">GET</option>
                                <option value="POST">POST (query)</option>
                                <option value="POSTf">POST (form)</option>
                                <option value="POSTj">POST (json)</option>
                            </select>
                        </td>
                        <td><span class="help-mark" title="the HTTP method to use when requesting the web hook URL (the given URL-encoded parameters will in fact be transmitted as indicated here)">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="motionDetectionEnabled">
                        <td colspan="100"><div class="settings-item-separator"></div></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Run A Command</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled notifications camera-config" id="commandNotificationsEnabledSwitch"></td>
                        <td><span class="help-mark" title="enable this if you want to execute a command whenever a motion event is detected">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" required="true" depends="commandNotificationsEnabled motionDetectionEnabled" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Command</span></td>
                        <td class="settings-item-value"><input type="text" class="styled notifications camera-config" id="commandNotificationsEntry" placeholder="command..."></td>
                        <td><span class="help-mark" title="a command to be executed when motion is detected; multiple commands can be separated by a semicolon; don't use semicolons inside commands; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="motionDetectionEnabled">
                        <td colspan="100"><div class="settings-item-separator"></div></td>
                    </tr>
                    <tr class="settings-item advanced-setting" depends="motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Run An End Command</span></td>
                        <td class="settings-item-value"><input type="checkbox" class="styled notifications camera-config" id="commandEndNotificationsEnabledSwitch"></td>
                        <td><span class="help-mark" title="enable this if you want to execute a command whenever a motion event ends">?</span></td>
                    </tr>
                    <tr class="settings-item advanced-setting" required="true" depends="commandEndNotificationsEnabled motionDetectionEnabled" strip="true">
                        <td class="settings-item-label"><span class="settings-item-label">Command</span></td>
                        <td class="settings-item-value"><input type="text" class="styled notifications camera-config" id="commandEndNotificationsEntry" placeholder="command..."></td>
                        <td><span class="help-mark" title="a command to be executed when motion event ends; multiple commands can be separated by a semicolon; don't use semicolons inside commands; the following special tokens are accepted: %Y = year, %m = month, %d = date, %H = hour, %M = minute, %S = second, %q = frame number">?</span></td>
                    </tr>
                    {% for config in camera_sections.get('notifications', {}).get('configs', []) %}
                        {{config_item(config, "motionDetectionEnabled")}}
                    {% endfor %}
                </table>

                <!-- Working Schedule -->
                <div class="settings-section-title" depends="motionDetectionEnabled" id="workingScheduleSectionDiv">
                    <input type="checkbox" class="styled section working-schedule camera-config" id="workingScheduleEnabledSwitch">
                    <span class="help-mark" title="enable this if you want to define a weekly working schedule for motion detection">?</span>
                    <a class="settings-section-title">Working Schedule</a>
                    <span class="minimize"></span>
                </div>
                <table class="settings">
                    <tr class="settings-item" depends="motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Monday</span></td>
                        <td class="settings-item-value">
                            <input type="checkbox" class="styled working-schedule camera-config" id="mondayEnabledSwitch">
                            <span class="settings-item-unit time">from</span><input type="text" class="styled working-schedule time camera-config" id="mondayFromEntry">
                            <span class="settings-item-unit time">to</span><input type="text" class="styled working-schedule time camera-config" id="mondayToEntry">
                        </td>
                        <td><span class="help-mark" title="sets the working schedule time interval for Mondays">?</span></td>
                    </tr>
                    <tr class="settings-item" depends="motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Tuesday</span></td>
                        <td class="settings-item-value">
                            <input type="checkbox" class="styled working-schedule camera-config" id="tuesdayEnabledSwitch">
                            <span class="settings-item-unit time">from</span><input type="text" class="styled working-schedule time camera-config" id="tuesdayFromEntry">
                            <span class="settings-item-unit time">to</span><input type="text" class="styled working-schedule time camera-config" id="tuesdayToEntry">
                        </td>
                        <td><span class="help-mark" title="sets the working schedule time interval for Tuesdays">?</span></td>
                    </tr>
                    <tr class="settings-item" depends="motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Wednesday</span></td>
                        <td class="settings-item-value">
                            <input type="checkbox" class="styled working-schedule camera-config" id="wednesdayEnabledSwitch">
                            <span class="settings-item-unit time">from</span><input type="text" class="styled working-schedule time camera-config" id="wednesdayFromEntry">
                            <span class="settings-item-unit time">to</span><input type="text" class="styled working-schedule time camera-config" id="wednesdayToEntry">
                        </td>
                        <td><span class="help-mark" title="sets the working schedule time interval for Wednesdays">?</span></td>
                    </tr>
                    <tr class="settings-item" depends="motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Thursday</span></td>
                        <td class="settings-item-value">
                            <input type="checkbox" class="styled working-schedule camera-config" id="thursdayEnabledSwitch">
                            <span class="settings-item-unit time">from</span><input type="text" class="styled working-schedule time camera-config" id="thursdayFromEntry">
                            <span class="settings-item-unit time">to</span><input type="text" class="styled working-schedule time camera-config" id="thursdayToEntry">
                        </td>
                        <td><span class="help-mark" title="sets the working schedule time interval for Thursdays">?</span></td>
                    </tr>
                    <tr class="settings-item" depends="motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Friday</span></td>
                        <td class="settings-item-value">
                            <input type="checkbox" class="styled working-schedule camera-config" id="fridayEnabledSwitch">
                            <span class="settings-item-unit time">from</span><input type="text" class="styled working-schedule time camera-config" id="fridayFromEntry">
                            <span class="settings-item-unit time">to</span><input type="text" class="styled working-schedule time camera-config" id="fridayToEntry">
                        </td>
                        <td><span class="help-mark" title="sets the working schedule time interval for Friday">?</span></td>
                    </tr>
                    <tr class="settings-item" depends="motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Saturday</span></td>
                        <td class="settings-item-value">
                            <input type="checkbox" class="styled working-schedule camera-config" id="saturdayEnabledSwitch">
                            <span class="settings-item-unit time">from</span><input type="text" class="styled working-schedule time camera-config" id="saturdayFromEntry">
                            <span class="settings-item-unit time">to</span><input type="text" class="styled working-schedule time camera-config" id="saturdayToEntry">
                        </td>
                        <td><span class="help-mark" title="sets the working schedule time interval for Saturday">?</span></td>
                    </tr>
                    <tr class="settings-item" depends="motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Sunday</span></td>
                        <td class="settings-item-value">
                            <input type="checkbox" class="styled working-schedule camera-config" id="sundayEnabledSwitch">
                            <span class="settings-item-unit time">from</span><input type="text" class="styled working-schedule time camera-config" id="sundayFromEntry">
                            <span class="settings-item-unit time">to</span><input type="text" class="styled working-schedule time camera-config" id="sundayToEntry">
                        </td>
                        <td><span class="help-mark" title="sets the working schedule time interval for Sunday">?</span></td>
                    </tr>
                    <tr class="settings-item" depends="motionDetectionEnabled">
                        <td class="settings-item-label"><span class="settings-item-label">Detect Motion</span></td>
                        <td class="settings-item-value">
                            <select class="styled working-schedule camera-config" id="workingScheduleTypeSelect">
                                <option value="during">During Working Schedule</option>
                                <option value="outside">Outside Working Schedule</option>
                            </select>
                        </td>
                        <td><span class="help-mark" title="sets whether motion detection should be active during or outside the working schedule">?</span></td>
                    </tr>
                    {% for config in camera_sections.get('working-schedule', {}).get('configs', []) %}
                        {{config_item(config, "motionDetectionEnabled")}}
                    {% endfor %}
                </table>

                <!-- Additional Camera Sections -->
                {% for section in camera_sections.values() %}
                {% if section.get('label') and section.get('configs') %}
                <div class="settings-section-title {% if section['advanced'] %}advanced-setting{% endif %}">
                    {% if section.get('onoff') %}<input type="checkbox" class="styled section additional-section {{section['name']}} camera-config" id="{{section['name']}}Switch">{% endif %}
                    {% if section.get('description') %}<span class="help-mark" title="{{section['description']}}">?</span>{% endif %}
                    <a class="settings-section-title">{{section['label']}}</a>
                    <span class="minimize {% if section.get('open') %}open{% endif %}"></span>
                </div>
                <table class="settings">
                    {% for config in section['configs'] %}
                        {{config_item(config)}}
                    {% endfor %}
                </table>
                {% endif %}                    
                {% endfor %}

                <div class="settings-progress"></div>
            </div>
        </div>
        <img class="background-logo" src="{{static_path}}img/motioneye-logo.svg" onmousedown="return false;">
        <div class="page-container"></div>
        <div class="footer">
            <div class="copyright-note">copyright &copy; Calin Crisan</div>
        </div> 
    </div>
    {% else %}
        <div class="camera-frame" id="camera{{camera_id}}"
                streaming_framerate="{{camera_config['stream_maxrate']}}" streaming_server_resize="{{camera_config['@webcam_server_resize']|string|lower}}"
                proto="{{camera_config['@proto']}}" url="{{camera_config['@url']}}">
            
            <div class="camera-container">
                <div class="camera-placeholder"><img class="no-camera" src="{{static_path}}img/no-camera.svg"></div><img
                    class="camera"><div class="camera-progress"><img class="camera-progress"></div>
            </div>
        </div>
    {% endif %}
    <div class="modal-glass"></div>
    <div class="modal-container"></div>
    <div class="popup-message-container"></div>
{% endblock %}
