{% 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" autocomplete="new-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">
                <form autocomplete="new-password">
                    <!-- 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" autocapitalize="none" 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" autocomplete="new-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" autocapitalize="none" 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" autocomplete="new-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">
                            <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" depends="storageDevice=network-share">
                            <td class="settings-item-label"><span class="settings-item-label">SMB Protocol Version</span></td>
                            <td class="settings-item-value">
                                <select class="styled storage camera-config" id="networkSMBVerSelect">
                                    <option value="1.0">1.0</option>
                                    <option value="2.0">2.0</option>
                                    <option value="2.1">2.1</option>
                                    <option value="3.0">3.0</option>
                                    <option value="3.1.1">3.1.1</option>
                                </select>
                            </td>
                            <td><span class="help-mark" title="selects the SMB version to be used (test the various options and see which one works best with your NAS)">?</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" autocapitalize="none" 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" autocomplete="new-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=(gdrive)">
                            <td class="settings-item-label"><span class="settings-item-label">Clean Cloud</span></td>
                            <td class="settings-item-value"><input type="checkbox" class="styled storage camera-config" id="cleanCloudEnabledSwitch"></td>
                            <td><span class="help-mark" title="enable this to delete the uploaded media files on cloud as well when the local media files get deleted according to file persistence setting, currently this option is available only for gdrive">?</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" autocapitalize="none" 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" autocomplete="new-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" autocomplete="new-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>
                        <tr class="settings-item" min="1" max="10" snap="1" ticksnum="10" decimals="0">
                            <td class="settings-item-label"><span class="settings-item-label">Text Scale</span></td>
                            <td class="settings-item-value"><input type="text" class="range styled text-overlay camera-config" id="textScaleSlider"></td>
                            <td><span class="help-mark" title="sets the size of the overlay text">?</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>
                        <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>
                        <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>
                                    <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 %}
                                </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" autocomplete="new-password" 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" autocomplete="new-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>
                </form>
            </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 %}