<?php
    /**
     * Page: Blog
     */

    get_header();

    $paged = 1;
    $args = [
        'post_type'      => 'post',
        'posts_per_page' => get_option('posts_per_page'),
        'paged'          => $paged,
        'orderby'        => 'date',
        'order'          => 'DESC',
    ];
    $query = new WP_Query($args);
?>
	<main id="primary" class="site-main blog-page">
        <?php
        if ($query->have_posts()) :
            $query->the_post();
            $banner_image = get_the_post_thumbnail_url(get_the_ID(), 'large');
            $banner_title = get_the_title();
            $banner_link  = get_permalink();
        ?>
            <div class="box-1">
                <div class="container">
                    <div class="box--wrapper">
                        <div class="box-bg">
                            <img src="<?php echo $banner_image; ?>" alt="">
                        </div>
                        <div class="row">
                            <div class="col col-1">
                                <?php get_template_part('inc/breadcrumb');?>
                            </div>
                            <div class="col col-2">
                                <div class="box-head">
                                    <h2><?php echo $banner_title; ?></h2>
                                </div>
                                <a class="btn_4" href="<?php echo $banner_link; ?>">Czytaj więcej</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php
        endif;
        ?>

        <div class="box-2">
            <div class="container">
                <div id="box-posts-list" class="posts-list">
                    <?php
                        if ($query->have_posts()) :
                            while ($query->have_posts()) : $query->the_post();
                                $image = get_the_post_thumbnail_url(get_the_ID(), 'medium');
                                $title = get_the_title();
                                $link  = get_permalink();

                                get_template_part(
                                    'inc/template-article-card', null, [
                                        'image' => $image,
                                        'title' => $title,
                                        'link'  => $link
                                    ]
                                );
                            endwhile;
                            wp_reset_postdata();
                        endif;
                    ?>
                </div>
                <?php
                if ($query->found_posts > get_option('posts_per_page')) : ?>
                    <div class="posts-more">
                        <a class="btn_3" href="#" id="load-more-posts" data-page="1">
                            Więcej artykułów
                            <span class="loader"></span>
                        </a>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </main>

    <script>
        jQuery(function ($) {
            $('#load-more-posts').on('click', function (e) {
                e.preventDefault()
                var button = $(this)
                var page = button.data('page')

                $.ajax({
                    url: '<?php echo admin_url("admin-ajax.php"); ?>',
                    type: 'POST',
                    data: {
                        action: 'load_more_posts',
                        page: page,
                    },
                    beforeSend: function () {
                        button.prop('disabled', true)
                        button.find('.loader').show()
                    },
                    complete: function () {
                        button.prop('disabled', false)
                        button.find('.loader').hide()
                    },
                    success: function (response) {
                        if (response) {
                            $('#box-posts-list').append(response)
                            button.data('page', page + 1)
                        } else {
                            button.text('Brak więcej artykułów').prop('disabled', true)
                        }
                    },
                })
            })
        })
    </script>
<?php
    get_footer();
?>