<!DOCTYPE html>
<html>
<head>
    <title>Template design settings</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="css/design.css?v=1505368208574" rel="stylesheet" />
    <script src="../api.js?v=1505368208574"></script>

    <script src="js/vendor.min.js?v=1505368208574"></script>
    <script src="js/design.min.js?v=1505368208574"></script>
</head>
<body>
    <main class="settings-container" data-bind="template: { afterRender: egApi.showSettings }">
        <!-- ko ifnot: isError -->
        <article class="flex direction-column settings-item-container">
            <header class="settings-item-title" data-bind="localize:'Choose section style:'">
                Choose section style:
            </header>
            <section class="settings-item-content flex direction-row flex-wrap" data-bind="with: sectionsLayout">
                <!-- ko foreach: list -->
                <div class="flex direction-column choose-layout-container" data-bind="click: $parent.select, css: { selected: isSelected }">
                    <div class="flex direction-column choose-layout-wrapper" data-bind="css: name">
                        <div class="choose-layout-title" data-bind="text: name">
                        </div>
                        <div class="choose-layout-preview-image"></div>
                    </div>
                </div>
                <!-- /ko -->
            </section>
        </article>
        <hr/>
        <article class="flex direction-column settings-item-container">
            <header class="settings-item-title" data-bind="localize:'Display table of content:'">
                Display table of content:
            </header>
            <section class="settings-item-content flex direction-row flex-wrap" data-bind="with: treeOfContent">
                <div class="switcher">
                    <div class="switcher-text" data-bind="css: { disabled: enabled() }, localize: 'Dont show'"></div>
                    <div class="switch-toggle-slider" data-bind="switchToggle: { value: enabled }">
                        <div class="switch-toggle-wrapper">
                            <div class="switch-toggle-on"></div>
                            <div class="switch-toogle-blob"></div>
                            <div class="switch-toggle-off"></div>
                        </div>
                    </div>
                    <div class="switcher-text" data-bind="css: { disabled: !enabled() }, localize: 'Show'"></div>
                </div>
            </section>
        </article>
        <!-- /ko -->
        <!-- ko if: isError -->
        <div class="settings-tab-wrapper" data-bind="localize: 'settings are not initialized'"></div>
        <!-- /ko -->
    </main>
</body>
</html>
