<script type="text/javascript">
    jQuery(document).ready(function ($) {

        let quarantine_ajax = (action, path) => {
            jQuery('.antivirus-quarantine__items-container').addClass('wtotem_loader_spinner');
            jQuery.post(
                ajaxurl,
                {
                    action: 'wtotem_ajax',
                    ajax_action: 'quarantine',
                    wtotem_page_nonce: '{{ page_nonce }}',
                    quarantine_action: action,
                    path: path,
                },
                function (data) {
                    if(data.success){
                        jQuery('#infected_files').html(data.infected_files);
                        jQuery('#quarantine_files').html(data.quarantine_files);
                        jQuery('.infected_files__pagination').html(data.pagination_infected_files);
                        jQuery('.quarantine_files__pagination').html(data.pagination_quarantine);
                        jQuery('#infected_files_total').text(data.infected_files_total);
                        jQuery('#quarantine_files_total').text(data.quarantine_files_total);
                    }
                    jQuery('.antivirus-quarantine__items-container').removeClass('wtotem_loader_spinner')
                    jQuery('#wtotem_notifications').html(data.notifications);
                }
            );
        };

        jQuery('.infected_files__pagination').on('click', 'a.wtotem_pagination__number', function (e) {
            e.preventDefault();
            jQuery('#infected_files').addClass('wtotem_loader_spinner');
            jQuery.post(ajaxurl, {
                action: 'wtotem_ajax',
                ajax_action: 'pagination',
                wtotem_page_nonce: '{{ page_nonce }}',
                service: 'infected_files',
                current_page: jQuery(this).attr('data-page'),
            }, function (data) {
                jQuery('#infected_files').removeClass('wtotem_loader_spinner').html(data.content);
                jQuery('.infected_files__pagination').html(data.pagination);
                jQuery('#wtotem_notifications').html(data.notifications);
            });
        });

        jQuery('.quarantine_files__pagination').on('click', 'a.wtotem_pagination__number', function (e) {
            e.preventDefault();
            jQuery('#quarantine_files').addClass('wtotem_loader_spinner');
            jQuery.post(ajaxurl, {
                action: 'wtotem_ajax',
                ajax_action: 'pagination',
                wtotem_page_nonce: '{{ page_nonce }}',
                service: 'quarantine',
                current_page: jQuery(this).attr('data-page'),
            }, function (data) {
                jQuery('#quarantine_files').removeClass('wtotem_loader_spinner').html(data.content);
                jQuery('.quarantine_files__pagination').html(data.pagination);
                jQuery('#wtotem_notifications').html(data.notifications);
            });
        });

        jQuery('.wtotem_body').on('click', '.wt_infected__item', function (e) {
            let wrap = jQuery(this);
            wrap.toggleClass('antivirus-quarantine__item--open')
                .find('.antivirus-quarantine__item-chevron').toggleClass('antivirus-quarantine__item-chevron--open');
            wrap.find('.antivirus-quarantine__item-full').toggleClass('visually-hidden');
        }).on('click', '.antivirus-quarantine__tab', function (e) {
            jQuery('.antivirus-quarantine__tab').toggleClass('antivirus-quarantine__tab--active');
            jQuery('.antivirus-quarantine').find('.antivirus-quarantine__items-container').toggleClass('antivirus-quarantine__items-container--active');
        }).on('click', '.remove_from_quarantine', function (e) {
            quarantine_ajax('remove', jQuery(this).attr('data-path'));
        }).on('click', '.add_to_quarantine', function (e) {
            quarantine_ajax('add', jQuery(this).attr('data-path'));
        });

    });
</script>

<div class="wt_card antivirus-quarantine">
    <div class="wt-flex-between">
        <div class="wt-card-title wt-flex-1 wt-flex-middle wt-gap-row-4">
            <button class="antivirus-quarantine__tab antivirus-quarantine__tab--active">
                {{ 'Infected'|trans }} <span class="num" id="infected_files_total">{{ infected_files_total }}</span>
            </button>
            <button class="antivirus-quarantine__tab" style="margin-left: 15px;">
                {{ 'Quarantine'|trans }} <span class="num" id="quarantine_files_total">{{ quarantine_files_total }}</span>
            </button>
        </div>
    </div>
    <div class="antivirus-quarantine__items-container antivirus-quarantine__items-container--active">
        <div id="infected_files">
            {% include 'quarantine_logs.html.twig' with {'logs': infected_files, 'type': 'infected'} %}
        </div>

        <div class="infected_files__pagination">{{ infected_files_pagination | raw }}</div>
    </div>
    <div class="antivirus-quarantine__items-container">
        <div id="quarantine_files">
            {% include 'quarantine_logs.html.twig' with {'logs': quarantine_files, 'type': 'quarantine'} %}
        </div>
        <div class="quarantine_files__pagination">{{ quarantine_files_pagination | raw }}</div>
    </div>
</div>