{% extends 'system_base.html.twig' %}
{% block title %}Anasayfa Yazı{% endblock %}

{% block body %}
    <div class="card shadow-sm">
        <form method="post">
            <div class="card-header">
                <h3 class="card-title">Yazı Güncelle</h3>
                <div class="card-toolbar me-auto">
                    <div class="w-2px h-20px ms-5 bg-primary"></div>
                    <ul class="nav">
                        {% for dil in diller|filter(e => e.Enabled == 1) %}
                            <li class="nav-item">
                                <a class="nav-link text-uppercase text-muted text-active-primary {% if loop.index == 1 %}active{% endif %}"
                                   data-bs-toggle="tab" href="#tab_dil_{{ loop.index }}">{{ dil.kisaBaslik }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="card-toolbar">
                    <div class="btn-group">
                        <a href="{{ path('app_anasayfa_index') }}" class="btn btn-sm btn-icon btn-light-success"
                           rel="tooltip" title="Listeye Dön">
                            <i class="fa fa-list"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="tab-content">
                    {% for dil in entityDiller %}
                        <div class="tab-pane fade {% if loop.index == 1 %}show active{% endif %}" id="tab_dil_{{ loop.index }}">
                            <div class="row">
                                <div class="col-12">
                                    <label for="metin_{{ loop.index }}" class="form-label required">Metin</label>
                                    <textarea name="diller[{{ dil.dil.kisaBaslik }}][metin]" class="form-control tinymce_metin mb-5" id="metin_{{ loop.index }}">{{ dil.metin|default|raw }}</textarea>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-sm btn-success">
                    <i class="fa fa-check"></i> Kaydet
                </button>
            </div>
        </form>
    </div>
{% endblock %}

{% block js %}
    <script>
        tinymce.init({
            language: 'tr',
            selector: '.tinymce_metin',
            plugins: 'print preview importcss searchreplace autolink autosave save directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars',
            menubar: 'file edit view insert format tools table tc help',
            toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | forecolor backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media pageembed template link anchor codesample | a11ycheck ltr rtl | showcomments addcomment',
            quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
            toolbar_mode: 'sliding',
            setup: function(editor) {
                editor.on('init', function() {
                    editor.dom.addClass(headCollection(editor), 'sss-text-area-title')
                });
                editor.on('blur', function() {
                    editor.dom.addClass(headCollection(editor), 'sss-text-area-title')
                });
            }
        });

        function headCollection(editor) {
            let collection = [];
            for (let i = 1; i <= 6; i++) {
                for (const head of editor.dom.select('h'+i)) {
                    collection.push(head);
                }
            }
            return collection;
        }
    </script>
{% endblock %}