{% extends 'admin/admin_base_new.html.twig' %}
{% import "admin/Macros/Buttons/_button.html.twig" as button %}

{% set page_title = "Projeler" %}
{% block metaTitle %}{{ page_title }}{% endblock %}

{% block breadcrumb %}
    {{ include('admin/Common/_breadcrumb.html.twig', {
        title: page_title,
        indexPath: path('admin_projects_index'),
        paths: [
            {title: page_title, path: path('admin_projects_index')}
        ]
    }) }}
    {% block page_buttons %}
        <div class="d-flex align-items-center gap-2 gap-lg-3">
            <a href="{{ path('admin_projects_new') }}" class="btn btn-sm fw-bold btn-primary">Proje Ekle</a>
        </div>
    {% endblock %}
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('assets/theme/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
    <style>
        .form-check.form-check-solid .form-check-input:not(:checked) {
            background-color: var(--bs-gray-300);
        }
    </style>
{% endblock %}

{% block body %}
    <div class="card">
        <div class="card-body">
            <div class="table-responsive" id="datatable">
                <i class="fa-solid fa-spinner fa-spin fs-2 me-2"></i> Tablo Yükleniyor...
            </div>
        </div>
    </div>
{% endblock %}


{% block javascripts %}
{#    <script src="{{ asset('assets/theme/plugins/custom/fslightbox/fslightbox.bundle.js') }}"></script>#}
{#    <script src="{{ asset('assets/theme/plugins/custom/datatables/datatables.bundle.js') }}"></script>#}
{#    <script src="{{ bundles_url ~ 'datatables/js/datatables.js' }}"></script>#}
    <script>
        Promise.all([
            new Promise(resolve => {
                const script1 = document.createElement("script");
                script1.src = "{{ asset('assets/theme/plugins/custom/fslightbox/fslightbox.bundle.js') }}";
                script1.onload = resolve;
                document.body.appendChild(script1);
            }),
            new Promise(resolve => {
                const script2 = document.createElement("script");
                script2.src = "{{ asset('assets/theme/plugins/custom/datatables/datatables.bundle.js') }}";
                script2.onload = resolve;
                document.body.appendChild(script2);
            }),
            new Promise(resolve => {
                const script3 = document.createElement("script");
                script3.src = "{{ asset('bundles/datatables/js/datatables.js') }}";
                script3.onload = resolve;
                document.body.appendChild(script3);
            })
        ]).then(() => {
            $(function () {
                $('#datatable').initDataTables({{ datatable_settings(datatable) }}, {
                    language: {
                        emptyTable: "Sonuç bulunamadı",
                        info: "_TOTAL_ kayıttan _START_ - _END_ arası listeleniyor",
                        lengthMenu: "_MENU_ Kayıt Göster",
                        loadingRecords: "Yükleniyor...",
                        search: "Ara:",
                        zeroRecords: "Arama eşleşmesi bulunamadı",
                        paginate: {
                            first: "İlk",
                            last: "Son",
                            next: "İleri",
                            previous: "Geri"
                        }
                    },
                    drawCallback: function () {
                        const table = this.get(0);
                        const tableToolTips = table.querySelectorAll('[data-bs-toggle="tooltip"]');
                        for (const el of tableToolTips) {new bootstrap.Tooltip(el)}
                        refreshFsLightbox();
                    }
                });
            });
        })

    </script>
{% endblock %}