{% extends 'admin/admin_base_new.html.twig' %}

{% 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 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="{{ asset('bundles/datatables/js/datatables.js') }}"></script>

    <script>
        $(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 %}

{% block breadcrumb %}
    <!--begin::Page title-->
    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
        <!--begin::Title-->
        <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Ürünler</h1>
        <!--end::Title-->
        <!--begin::Breadcrumb-->
        <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
            <!--begin::Item-->
            <li class="breadcrumb-item text-muted">
                <a href="#" class="text-muted text-hover-primary">Anasayfa</a>
            </li>
            <!--end::Item-->
            <!--begin::Item-->
            <li class="breadcrumb-item">
                <span class="bullet bg-gray-500 w-5px h-2px"></span>
            </li>
            <!--end::Item-->
            <!--begin::Item-->
            <li class="breadcrumb-item text-muted">Ürünler</li>
            <!--end::Item-->
        </ul>
        <!--end::Breadcrumb-->
    </div>
    <!--end::Page title-->
    <!--begin::Actions-->
    <div class="d-flex align-items-center gap-2 gap-lg-3">
        <!--begin::Secondary button-->
        <a href="#" class="btn btn-sm fw-bold btn-secondary" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">Sırala</a>
        <!--end::Secondary button-->
        <!--begin::Primary button-->
        <a href="#" class="btn btn-sm fw-bold btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_new_target">Ürün Ekle</a>
        <!--end::Primary button-->
    </div>
    <!--end::Actions-->
{% 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 %}