<div id="settings_dialog" class="modal hide fade large" tabindex="-1" role="dialog" aria-labelledby="settings_dialog_label" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3 id="settings_dialog_label">{{ _('OctoPrint Settings') }} <i class="fa fa-spinner fa-spin" data-bind="visible: receiving"></i></h3>
    </div>
    <div class="modal-body">
        <div class="full-sized-box">
            <div class="tabbable row-fluid">
                <div class="span3 scrollable" id="settings_dialog_menu">
                    <ul class="nav nav-list" id="settingsTabs">
                        {% set mark_active = True %}
                        {% for key in templates.settings.order %}
                            {% set entry, data = templates.settings.entries[key] %}
                            {% if data is none %}
                                <li class="nav-header">{{ entry }}</li>
                            {% else %}
                                {% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- ko allowBindings: false -->{% endif %}
                                <li id="{{ data._div }}_link"
                                    {% if "data_bind" in data %}data-bind="{{ data.data_bind }}"{% endif %}
                                    class="{% if mark_active %}active{% set mark_active = False %}{% endif %} {% if "classes_link" in data %}{{ data.classes_link|join(' ') }}{% elif "classes" in data %}{{ data.classes|join(' ') }}{% endif %}"
                                    {% if "styles_link" in data %} style="{{ data.styles_link|join(', ') }}" {% elif "styles" in data %} style="{{ data.styles|join(', ') }}" {% endif %}
                                        >
                                    <a href="#{{ data._div }}" data-toggle="tab">{{ entry|e }}</a>
                                </li>
                                {% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- /ko -->{% endif %}
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
                <div class="tab-content span9 scrollable" id="settings_dialog_content">
                    {% set mark_active = True %}
                    {% for key in templates.settings.order %}
                        {% set entry, data = templates.settings.entries[key] %}
                        {% if data is not none %}
                            {% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- ko allowBindings: false -->{% endif %}
                            <div id="{{ data._div }}"
                                 {% if "data_bind" in data %}data-bind="{{ data.data_bind }}"{% endif %}
                                 class="tab-pane {% if mark_active %}active{% set mark_active = False %}{% endif %} {% if classes_content in data %}{{ data.classes_content|join(' ') }}{% elif classes in data %}{{ data.classes|join(' ') }}{% endif %}"
                                 {% if "styles_content" in data %} style="{{ data.styles_content|join(', ') }}" {% elif styles in data %} style="{{ data.styles|join(', ') }}" {% endif %}
                                    >
                                {% try "There was an error with the template {filename} at line number {lineno}: {exception}" %}{% include data.template ignore missing %}{% endtry %}
                            </div>
                            {% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- /ko -->{% endif %}
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn aboutlink" data-bind="click: about.show"><i class="fa fa-info-circle"></i> {{ _('About OctoPrint') }}</button>
        <button class="btn" data-bind="click: function() { cancelData() }" aria-hidden="true">{{ _('Close') }}</button>
        <button class="btn btn-primary" data-bind="click: function() { saveData(undefined, $root.hide) }, enable: !exchanging(), css: {disabled: exchanging()}"><i class="fa fa-spinner fa-spin" data-bind="visible: sending"></i> {{ _('Save') }}</button>
    </div>
</div>

<div id="settings_dialog_update_detected" class="modal hide fade" data-keyboard="false">
    <div class="modal-header">
        <h3>{{ _('Settings update detected') }}</h3>
    </div>
    <div class="modal-body">
        <p>{% trans %}
            The settings have been updated on the server. You may reload all settings,
            overwriting any changes you might have done locally, or alternatively
            only reload those settings you haven't changed locally.
        {% endtrans %}</p>
        <p>{% trans %}
            How do you want to proceed?
        {% endtrans %}</p>
    </div>
    <div class="modal-footer">
        <div class="row-fluid">
            <a href="#" class="btn btn-danger span6 reload_all">{{ _('Reload all') }}</a>
            <a href="#" class="btn btn-primary span6 reload_nonconflicts">{{ _('Reload only non-conflicting changes') }}</a>
        </div>
    </div>
</div>
