{% from 'bootstrap4/form.html' import render_form %}

{% extends 'admin-layout.html' %}

{% block body %}
{{super()}}
<style>
    @keyframes blink {
        50% {
            border-color: #0000ff;
            border-width: 2px;
        }
    }

    #search_settings {

        animation: blink 1s;
        animation-iteration-count: 3;
        transition: border-width 0.6s linear;
    }

    #search_settings:hover {
        border-width: 2px;
    }
</style>


<div class="card">
    <div class="card-header"><input id="search_settings" type="text" class="form-control" placeholder="{{_(" Search
            Settings")}}">
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-12 global-form">
                {{render_form(form,form_type="",extra_classes="card-columns")}}
            </div>
        </div>
    </div>
</div>

<style>
    fieldset {
        background-color: initial;
        background-clip: border-box;
        border: 1 solid rgba(0, 0, 0, 0.125);
        border-radius: 0.25rem;
        box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
        margin-bottom: 1rem;
        padding: 10px;
        display: inline-block;
        width: 100%;
    }

    legend {
        background-color: initial;
        margin: 0px;
    }

    legend+div>label {
        display: none;
    }

    @media (min-width: 576px) {
        .card-columns {
            column-count: 1;
        }
    }

    @media (min-width: 768px) {
        .card-columns {
            column-count: 2;
        }
    }

    fieldset {
        box-shadow: none;
        margin-bottom: 0px;
    }
</style>

{% endblock %}

{% block tail %}
{{super()}}
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/42.0.2/ckeditor5.css">
<style>
    .ck.ck-editor {
        color: black !important;
    }
</style>
<script src="https://cdn.ckeditor.com/ckeditor5/42.0.2/ckeditor5.js"></script>

<script type="importmap">
    {
        "imports": {
            "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/42.0.2/ckeditor5.js",
            "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/42.0.2/"
        }
    }
</script>
<script type="module">
    import {
        ClassicEditor,
        AccessibilityHelp,
        Autosave,
        BalloonToolbar,
        Bold,
        Code,
        Essentials,
        FontBackgroundColor,
        FontColor,
        FontFamily,
        FontSize,
        FullPage,
        GeneralHtmlSupport,
        Highlight,
        HtmlComment,
        HtmlEmbed,
        Italic,
        Paragraph,
        SelectAll,
        ShowBlocks,
        SourceEditing,
        SpecialCharacters,
        Strikethrough,
        ImageBlock,
        ImageInsert,
        ImageInsertViaUrl,
        ImageToolbar,

        Underline,
        Undo
    } from 'ckeditor5';

    const editorConfig = {
        toolbar: {
            items: [
                'undo',
                'redo',
                '|',
                'bold',
                'italic',
                'underline',
                'strikethrough',
                'code',
                'insertImage',
                '|',
                'fontSize',
                'fontColor',
                'fontBackgroundColor',
                '|',
                'sourceEditing',

            ],
            shouldNotGroupWhenFull: false
        },
        plugins: [
            AccessibilityHelp,
            Autosave,
            BalloonToolbar,
            Bold,
            Code,
            Essentials,
            FontBackgroundColor,
            FontColor,
            FontFamily,
            FontSize,
            FullPage,
            GeneralHtmlSupport,
            Highlight,
            HtmlComment,
            HtmlEmbed,
            Italic,
            Paragraph,
            SelectAll,
            ShowBlocks,
            SourceEditing,
            ImageBlock,
            ImageInsertViaUrl,

            Strikethrough,
            Underline,
            Undo
        ],
        balloonToolbar: ['bold', 'italic'],
        fontFamily: {
            supportAllValues: true
        },
        fontSize: {
            options: [10, 12, 14, 'default', 18, 20, 22],
            supportAllValues: true
        },
        htmlSupport: {
            allow: [
                {
                    name: /^.*$/,
                    styles: true,
                    attributes: true,
                    classes: true
                }
            ]
        },

        placeholder: 'Type or paste your content here!'
    };

    ClassicEditor.create(document.querySelector('.ckeditor'), editorConfig);


</script>

<script>
    // $("fieldset .form-group").hide()

    if ($('.form-group').length > 20 || $('.invalid-feedback').length > 0)
        $("fieldset").filter(function () { return !($(this).children().children().is('.invalid-feedback')); }).find('.form-group').hide()

    $("fieldset legend").click(function (e) {
        var has_hidden = $(this.parentNode).find('.form-group:hidden')
        if (has_hidden.length > 0)
            $(this.parentNode).find('.form-group').show('fade')
        else
            $(this.parentNode).find('.form-group').hide('fade')


    })

    $(document).ready(function () {
        $('#search_settings').on('input', function () {
            var searchString = $(this).val().toLowerCase();

            $('fieldset').each(function () {
                field = $(this)
                var fieldfoundMatch = false;
                field.find('.form-group').each(function () {
                    var $labels = $(this).find('label');
                    var foundMatch = false;
                    $labels.each(function () {
                        var labelText = $(this).text().toLowerCase();
                        if (labelText.indexOf(searchString) !== -1) {
                            foundMatch = true;
                            fieldfoundMatch = true;
                            return false; // break out of loop early
                        }
                    });
                    var $inputs = $(this).find('input');
                    $inputs.each(function () {
                        var labelText = $(this).attr('id').toLowerCase();
                        if (labelText.indexOf(searchString) !== -1) {
                            foundMatch = true;
                            fieldfoundMatch = true;
                            return false; // break out of loop early
                        }
                    });
                    if (foundMatch) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }

                });
                if (fieldfoundMatch) {
                    $(this).show();
                    $(this).find(".form-group").first().show();
                } else {
                    $(this).hide();
                }
                if (searchString == "")
                    $("fieldset").filter(function () { return !($(this).children().children().is('.invalid-feedback')); }).find('.form-group').hide()
            });

        });
    });


</script>
{% endblock %}