<?php
if (
    !class_exists(\Tangibledesign\Framework\Core\App::class)
    || !class_exists(\Elementor\Plugin::class)
    || !tdf_app('current_template')
) :
    get_template_part('templates/blog/header');
endif;

if (!is_front_page()) : ?>
    <?php if (is_search()) : ?>
        <h1 class="myhome-blog-title">
            <?php echo sprintf(esc_html__('Search: %s', 'myhome'), get_query_var('s')); ?>
        </h1>
    <?php else : ?>
        <h1 class="myhome-blog-title">
            <?php the_archive_title(); ?>
        </h1>
    <?php endif; ?>
<?php endif; ?>

    <div class="myhome-wrapper">
        <div class="myhome-layout <?php if (!is_active_sidebar('myhome-sidebar')) : ?> myhome-layout--no-sidebar<?php endif; ?>">

            <div class="myhome-layout__content">
                <?php if (have_posts()) : ?>
                    <div class="myhome-posts myhome-grid myhome-posts--archive">
                        <?php while (have_posts()) :the_post(); ?>
                            <div class="myhome-blog-card-wrapper">
                                <article <?php post_class('myhome-blog-card'); ?>>
                                    <?php if (has_post_thumbnail()) : ?>
                                        <a
                                                href="<?php echo esc_url(get_the_permalink()); ?>"
                                                title="<?php the_title_attribute(); ?>"
                                                class="myhome-blog-card__image-static"
                                        >
                                            <img
                                                    src="<?php the_post_thumbnail_url('large'); ?>"
                                                    alt="<?php the_title_attribute(); ?>"
                                            >
                                        </a>
                                    <?php endif; ?>

                                    <div class="myhome-blog-card__content">
                                        <?php if (!empty(get_the_title())) : ?>
                                            <h3 class="myhome-blog-card__title">
                                                <a
                                                        href="<?php echo esc_url(get_the_permalink()); ?>"
                                                        title="<?php the_title_attribute() ?>"
                                                >
                                                    <?php the_title(); ?>
                                                </a>
                                            </h3>
                                        <?php endif; ?>

                                        <div class="myhome-blog-card__meta myhome-blog-card__meta--top">
                                            <div class="myhome-blog-card__author">
                                                <span
                                                        title="<?php echo esc_attr(get_the_author()); ?>"
                                                        class="myhome-blog-card__author-avatar-link"
                                                >
                                                    <img
                                                            src="<?php echo esc_url(get_avatar_url(get_the_ID())); ?>"
                                                            alt="<?php echo esc_attr(get_the_author()); ?>"
                                                    >
                                                </span>

                                                <span><?php echo esc_html(get_the_author()); ?></span>
                                            </div>

                                            <div class="myhome-blog-card__date">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63 72">
                                                    <path class="cls-1"
                                                          d="M326.5,907v-7.312A1.491,1.491,0,0,0,324.812,898h-1.124A1.491,1.491,0,0,0,322,899.688V907H295v-7.312A1.491,1.491,0,0,0,293.312,898h-1.124a1.491,1.491,0,0,0-1.688,1.688V907h-6.75a6.723,6.723,0,0,0-6.75,6.75v49.5a6.723,6.723,0,0,0,6.75,6.75h49.5a6.723,6.723,0,0,0,6.75-6.75v-49.5a6.723,6.723,0,0,0-6.75-6.75H326.5Zm6.75,4.5a2.167,2.167,0,0,1,2.25,2.25v6.75h-54v-6.75a2.167,2.167,0,0,1,2.25-2.25h49.5Zm-49.5,54a2.167,2.167,0,0,1-2.25-2.25V925h54v38.25a2.167,2.167,0,0,1-2.25,2.25h-49.5Zm15.75-24.188v-5.624A1.491,1.491,0,0,0,297.812,934h-5.624a1.491,1.491,0,0,0-1.688,1.688v5.624A1.491,1.491,0,0,0,292.188,943h5.624a1.491,1.491,0,0,0,1.688-1.688h0Zm13.5,0v-5.624A1.491,1.491,0,0,0,311.312,934h-5.624A1.491,1.491,0,0,0,304,935.688v5.624A1.491,1.491,0,0,0,305.688,943h5.624A1.491,1.491,0,0,0,313,941.312h0Zm13.5,0v-5.624A1.491,1.491,0,0,0,324.812,934h-5.624a1.491,1.491,0,0,0-1.688,1.688v5.624A1.491,1.491,0,0,0,319.188,943h5.624a1.491,1.491,0,0,0,1.688-1.688h0Zm-13.5,13.5v-5.624a1.491,1.491,0,0,0-1.688-1.688h-5.624A1.491,1.491,0,0,0,304,949.188v5.624a1.491,1.491,0,0,0,1.688,1.688h5.624A1.491,1.491,0,0,0,313,954.812h0Zm-13.5,0v-5.624a1.491,1.491,0,0,0-1.688-1.688h-5.624a1.491,1.491,0,0,0-1.688,1.688v5.624a1.491,1.491,0,0,0,1.688,1.688h5.624a1.491,1.491,0,0,0,1.688-1.688h0Zm27,0v-5.624a1.491,1.491,0,0,0-1.688-1.688h-5.624a1.491,1.491,0,0,0-1.688,1.688v5.624a1.491,1.491,0,0,0,1.688,1.688h5.624a1.491,1.491,0,0,0,1.688-1.688h0Z"
                                                          transform="translate(-277 -898)"/>
                                                </svg>

                                                <span>
                                                    <?php echo esc_html(get_the_date()); ?>
                                                </span>
                                            </div>
                                        </div>

                                        <?php if (!empty(get_the_excerpt())) : ?>
                                            <div class="myhome-blog-card__excerpt">
                                                <?php the_excerpt(); ?>
                                            </div>
                                        <?php endif; ?>

                                        <div class="myhome-blog-card__bottom">
                                            <div class="myhome-blog-card__meta myhome-blog-card__meta--bottom">
                                                <div class="myhome-blog-card__author">
                                                    <span
                                                            class="myhome-post-author-image"
                                                            title="<?php echo esc_attr(get_the_author()); ?>"
                                                    >
                                                        <img
                                                                src="<?php echo esc_url(get_avatar_url(get_the_ID())); ?>"
                                                                alt="<?php echo esc_attr(get_the_author()); ?>"
                                                        >
                                                    </span>

                                                    <span><?php echo esc_html(get_the_author()); ?></span>
                                                </div>

                                                <span class="myhome-blog-card__dot"></span>

                                                <div class="myhome-blog-card__date">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63 72">
                                                        <path class="cls-1"
                                                              d="M326.5,907v-7.312A1.491,1.491,0,0,0,324.812,898h-1.124A1.491,1.491,0,0,0,322,899.688V907H295v-7.312A1.491,1.491,0,0,0,293.312,898h-1.124a1.491,1.491,0,0,0-1.688,1.688V907h-6.75a6.723,6.723,0,0,0-6.75,6.75v49.5a6.723,6.723,0,0,0,6.75,6.75h49.5a6.723,6.723,0,0,0,6.75-6.75v-49.5a6.723,6.723,0,0,0-6.75-6.75H326.5Zm6.75,4.5a2.167,2.167,0,0,1,2.25,2.25v6.75h-54v-6.75a2.167,2.167,0,0,1,2.25-2.25h49.5Zm-49.5,54a2.167,2.167,0,0,1-2.25-2.25V925h54v38.25a2.167,2.167,0,0,1-2.25,2.25h-49.5Zm15.75-24.188v-5.624A1.491,1.491,0,0,0,297.812,934h-5.624a1.491,1.491,0,0,0-1.688,1.688v5.624A1.491,1.491,0,0,0,292.188,943h5.624a1.491,1.491,0,0,0,1.688-1.688h0Zm13.5,0v-5.624A1.491,1.491,0,0,0,311.312,934h-5.624A1.491,1.491,0,0,0,304,935.688v5.624A1.491,1.491,0,0,0,305.688,943h5.624A1.491,1.491,0,0,0,313,941.312h0Zm13.5,0v-5.624A1.491,1.491,0,0,0,324.812,934h-5.624a1.491,1.491,0,0,0-1.688,1.688v5.624A1.491,1.491,0,0,0,319.188,943h5.624a1.491,1.491,0,0,0,1.688-1.688h0Zm-13.5,13.5v-5.624a1.491,1.491,0,0,0-1.688-1.688h-5.624A1.491,1.491,0,0,0,304,949.188v5.624a1.491,1.491,0,0,0,1.688,1.688h5.624A1.491,1.491,0,0,0,313,954.812h0Zm-13.5,0v-5.624a1.491,1.491,0,0,0-1.688-1.688h-5.624a1.491,1.491,0,0,0-1.688,1.688v5.624a1.491,1.491,0,0,0,1.688,1.688h5.624a1.491,1.491,0,0,0,1.688-1.688h0Zm27,0v-5.624a1.491,1.491,0,0,0-1.688-1.688h-5.624a1.491,1.491,0,0,0-1.688,1.688v5.624a1.491,1.491,0,0,0,1.688,1.688h5.624a1.491,1.491,0,0,0,1.688-1.688h0Z"
                                                              transform="translate(-277 -898)"/>
                                                    </svg>

                                                    <span>
                                                        <?php echo esc_html(get_the_date()); ?>
                                                    </span>
                                                </div>
                                            </div>

                                            <div class="myhome-blog-card__bottom-button">
                                                <a
                                                        class="myhome-button-outline myhome-button-outline--v3"
                                                        href="<?php echo esc_url(get_the_permalink()); ?>"
                                                        title="<?php the_title_attribute(); ?>"
                                                >
                                                    <?php esc_html_e('Read More', 'myhome'); ?>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            </div>
                        <?php endwhile; ?>
                    </div>

                    <?php
                    global $wp_query;

                    if ($wp_query->max_num_pages > 1) :
                        $myhomeCurrentPage = (get_query_var('paged')) ? get_query_var('paged') : 1;
                        ?>
                        <div class="myhome-pagination myhome-pagination--blog">
                            <div class="myhome-pagination-mobile">
                                <a
                                        href="<?php echo esc_url(get_pagenum_link($myhomeCurrentPage - 1)); ?>"
                                    <?php if ($myhomeCurrentPage > 1) : ?>
                                        class="myhome-pagination-mobile__arrow myhome-pagination-mobile__arrow--left"
                                    <?php else : ?>
                                        class="myhome-pagination___mobile__arrow myhome-pagination-mobile__arrow--disabled myhome-pagination-mobile__arrow--left"
                                    <?php endif; ?>
                                >
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                         viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                         class="feather feather-chevron-left" aria-hidden="true" focusable="false">
                                        <polyline points="15 18 9 12 15 6"></polyline>
                                    </svg>
                                </a>

                                <span class="myhome-pagination-mobile__start"><?php echo esc_html($myhomeCurrentPage); ?></span>

                                <span class="myhome-pagination-mobile__middle">/</span>

                                <span class="myhome-pagination-mobile__end"><?php echo esc_html($wp_query->max_num_pages); ?></span>

                                <a
                                        href="<?php echo esc_url(get_pagenum_link($myhomeCurrentPage + 1)); ?>"
                                    <?php if ($myhomeCurrentPage < $wp_query->max_num_pages) : ?>
                                        class="myhome-pagination-mobile__arrow myhome-pagination-mobile__arrow--right"
                                    <?php else : ?>
                                        class="myhome-pagination-mobile__arrow myhome-pagination-mobile__arrow--disabled myhome-pagination-mobile__arrow--right"
                                    <?php endif; ?>
                                >
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                         viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                         class="feather feather-chevron-right" aria-hidden="true" focusable="false">
                                        <polyline points="9 18 15 12 9 6"></polyline>
                                    </svg>
                                </a>
                            </div>

                            <div class="myhome-pagination-desktop">
                                <div class="myhome-pagination-desktop__inner">
                                    <?php if ($myhomeCurrentPage > 1) : ?>
                                        <a href="<?php echo esc_url(get_pagenum_link($myhomeCurrentPage - 1)); ?>">
                                            <span class="myhome-pagination-desktop__arrow myhome-pagination-desktop__arrow--left">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                     viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                     class="feather feather-chevron-left" aria-hidden="true" focusable="false">
                                                    <polyline points="15 18 9 12 15 6"></polyline>
                                                </svg>
                                            </span>
                                        </a>
                                    <?php endif; ?>

                                    <?php
                                    $mhDots = false;
                                    $mhEndsCount = 1;
                                    $mhMidCount = 3;

                                    for ($i = 1; $i <= $wp_query->max_num_pages; $i++) :
                                        if ($i === $myhomeCurrentPage) : ?>
                                        <a
                                                class="myhome-pagination-desktop__page myhome-pagination-desktop__page--active"
                                                href="<?php echo esc_url(get_pagenum_link($i)); ?>"
                                        >
                                            <?php echo esc_html($i); ?>
                                            </a><?php
                                            $mhDots = true;
                                        else :
                                            if ($i <= $mhEndsCount || ($myhomeCurrentPage && $i >= $myhomeCurrentPage - $mhMidCount && $i <= $myhomeCurrentPage + $mhMidCount) || $i > $wp_query->max_num_pages - $mhEndsCount) : ?>
                                                <a
                                                        class="myhome-pagination-desktop__page"
                                                        href="<?php echo esc_url(get_pagenum_link($i)); ?>"
                                                >
                                                    <?php echo esc_html($i); ?>
                                                </a>
                                                <?php
                                                $mhDots = true;
                                            elseif ($mhDots) :?>
                                                <div class="myhome-pagination-desktop__page myhome-pagination-desktop__page--dots">...</div><?php
                                                $mhDots = false;
                                            endif;
                                        endif;
                                        ?>
                                    <?php endfor; ?>

                                    <?php if ($myhomeCurrentPage < $wp_query->max_num_pages) : ?>
                                        <a href="<?php echo esc_url(get_pagenum_link($myhomeCurrentPage + 1)); ?>">
                                            <span class="myhome-pagination-desktop__arrow myhome-pagination-desktop__arrow--right">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                     viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                     class="feather feather-chevron-right" aria-hidden="true" focusable="false">
                                                    <polyline points="9 18 15 12 9 6"></polyline>
                                                </svg>
                                            </span>
                                        </a>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>
                <?php else : ?>
                    <div class="myhome-blog-search-no-results">
                        <h3><?php esc_html_e("Couldn't find what you're looking for!", 'myhome'); ?></h3>

                        <h4><?php esc_html_e('If you want to rephrase your query, here is your chance:', 'myhome'); ?></h4>

                        <?php get_search_form(); ?>
                    </div>
                <?php
                endif; ?>
            </div>

            <?php if (is_active_sidebar('myhome-sidebar')) : ?>
                <div class="myhome-layout__sidebar">
                    <?php dynamic_sidebar('myhome-sidebar'); ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

<?php
get_template_part('templates/blog/footer'); ?>
