{% from 'global_macros.html' import button, input %}
{% macro ConfigEditor() %}
    <link rel="stylesheet" href="static/vendors/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="static/vendors/codemirror/theme/dashmachine.css">

    <style>
        #config-card-title {
            font-size: 2rem;
            position: relative;
            top: 8px;
        }
        @media (max-width: 990px)
        {
            #config-card-title-col {
                margin-bottom: 10px;
            }
        }
        .CodeMirror {
            height: auto;
        }
        #config-card-title-row {
            position: sticky;
            top: 0;
            padding-top: 10px;
            z-index: 1100;
            background: var(--theme-background);
        }
    </style>

    <div class="row">
        <div class="col s12">
            <div id="config-card-title-row" class="row">
                <div id="config-card-title-col" class="col s12 m4">
                    <span id="config-card-title">Config.ini</span>
                </div>
                <div class="col s12 m8">
                    <span>

                        {{ button(
                        icon="save",
                        id="save-config-btn",
                        float="right",
                        class="ml-0 mt-1 mb-1",
                        data={'url': url_for('settings_system.save_config')},
                        text="save"
                        ) }}

                        {{ button(
                        icon="save",
                        id="save-editing-wiki-btn",
                        float="right",
                        class="ml-0 mt-1 mb-1 hide",
                        data={'url': url_for('docs_system.save_wiki')},
                        text="save"
                        ) }}

                        {{ button(
                        id="close-config-editor-sidenav",
                        icon="close",
                        float="right",
                        class="ml-0 mt-1 mb-1 sidenav-close theme-secondary ",
                        text="close"
                        ) }}

                    </span>
                </div>
                <div class="col s12 hide">
                    <div class="card theme-failure white-text">
                        <div id="config-editor-error-div" class="card-content selectable">
                        </div>
                    </div>
                </div>
            </div>
            <form id="config-form">
                <div id="wiki-config-form" class="hide">
                    <input id="wiki-config-form-permalink" class="hide" name="wiki_permalink">

                    {{ input(
                    id="wiki-config-form-permalink-new",
                    size="s12",
                    label="Wiki permalink",
                    form_obj=config_form.wiki_permalink_new
                    ) }}

                    {{ input(
                    id="wiki-config-form-name",
                    size="s12",
                    label="Wiki name",
                    form_obj=config_form.wiki_name
                    ) }}

                    {{ input(
                    id="wiki-config-form-author",
                    size="s12",
                    label="Wiki author",
                    form_obj=config_form.wiki_author
                    ) }}

                    {{ input(
                    id="wiki-config-form-description",
                    size="s12",
                    class="materialize-textarea",
                    label="Wiki description",
                    form_obj=config_form.wiki_description
                    ) }}

                    {{ input(
                    id="wiki-config-form-tags",
                    size="s12",
                    label="Wiki tags",
                    form_obj=config_form.wiki_tags
                    ) }}
                </div>

                {{ input(
                size="s12",
                col_class="config-textarea-col",
                class="materialize-textarea",
                form_obj=config_form.config,
                id="config-textarea"
                ) }}
            </form>
            <textarea id="config-editor-config-data" class="hide">{{ config_form.config.data }}</textarea>
        </div>
    </div>

    <script src="static/vendors/codemirror/lib/codemirror.js"></script>
    <script src="static/vendors/codemirror/mode/properties/properties.js"></script>
    <script src="static/vendors/codemirror/mode/markdown/markdown.js"></script>
    {{ process_js_sources(src="main/config-editor.js")|safe }}
{% endmacro %}