//- КАРТОЧКА НЕДВИЖИМОСТИ

mixin card(src, title, complex, station, style, address, area, price1, price2, period, btn)

    .card

        .card__top
            img(src=src, alt="Фото недвижимости" loading="lazy")
            h3.card__title=title
            .card__labels
                span.card__label.card__label-favorites.js_card_favorites
                    svg(width='18' height='18')
                        use(xlink:href='images/sprite.svg#card-favorites-empty')
                    svg(width='18' height='18')
                        use(xlink:href='images/sprite.svg#card-favorites')
                a(href="#").card__label.card__label-messenger
                    svg(width='25' height='25')
                        use(xlink:href='images/sprite.svg#card-messenger')

        .card__cnt
            .card__info
                address.card__line.card__line-complex=complex
                address.card__line=station
                    span(style=style)
                address.card__line=address
                .card__line Площадь: 
                    b=area
                .card__line Цена за м<sup>2</sup>: 
                    b=price1
            .card__price
                span=price2

                if (period)
                    span в месяц
                    
            a(href="#").card__btn.btn.btn--bordered=btn

//- КАРТОЧКА НОВОСТИ

mixin card-news(cls, src, date1, date2, descr)
    
    .card-news(class=cls)

        .card-news__top
            img(src=src, alt="Превью к новости" loading="lazy")
            .card-news__date
                span=date1
                span=date2
        
        .card-news__cnt
            p.card-news__descr=descr
            a(href="#").card-news__link Подробнее
                svg(width='17' height='12')
                    use(xlink:href='images/sprite.svg#card-news-link-arrow')

//- ПАГИНАЦИЯ

mixin pagination

    .pagination
        .pagination__inner
            a(href="#").pagination__btn.pagination__btn-prev.disabled
                svg(width='10' height='17')
                    use(xlink:href='images/sprite.svg#slider-arrow')
            ul.pagination__list    
                li.pagination__item
                    a(href="#").pagination__link.active 1
                li.pagination__item
                    a(href="#").pagination__link 2
                li.pagination__item
                    a(href="#").pagination__link 3
                li.pagination__item
                    a(href="#").pagination__link.more ...
                li.pagination__item
                    a(href="#").pagination__link 8
            a(href="#").pagination__btn.pagination__btn-next
                svg(width='10' height='17')
                    use(xlink:href='images/sprite.svg#slider-arrow')

//- ПОПАПЫ

mixin popups

    //- поп-ап 'обратная связь'
    .popup.popup-feedback(data-popup="feedback")
        .popup__wrap
            button(type="button").popup__close.js_popup_close
                svg(width="20" height="20")
                    use(xlink:href='images/sprite.svg#popup-close')
            form.popup-feedback__form.js_popup_feedback_form
                .popup-feedback__title Как с вами связаться
                .popup-feedback__fields
                    label.popup-feedback__field.field
                        input(type="text" placeholder="Имя" name="Имя")
                    label.popup-feedback__field.field
                        input(type="text" placeholder="Телефон" name="Телефон").js_input_phone
                button.popup-feedback__btn.btn.btn--main.js_form_btn Отправить
                p.popup-feedback__confirm Нажимая на кнопку «Отправить», Вы даете согласие на обработку персональных данных в соответствии с <a href="#">Политикой конфиденциальности</a>.
    
    //- поп-ап 'записаться на просмотр'
    .popup.popup-feedback(data-popup="viewing")
        .popup__wrap
            button(type="button").popup__close.js_popup_close
                svg(width="20" height="20")
                    use(xlink:href='images/sprite.svg#popup-close')
            form.popup-feedback__form.js_popup_viewing_form
                .popup-feedback__title Записаться на просмотр
                .popup-feedback__fields
                    label.popup-feedback__field.field
                            input(type="text" placeholder="Имя" name="Имя")
                    label.popup-feedback__field.field
                        input(type="text" placeholder="Телефон" name="Телефон").js_input_phone
                button.popup-feedback__btn.btn.btn--main.js_form_btn Отправить
                p.popup-feedback__confirm Нажимая на кнопку «Отправить», Вы даете согласие на обработку персональных данных в соответствии с <a href="#">Политикой конфиденциальности</a>.
    
    //- поп-ап 'обратная связь (успех)'
    .popup.popup-success(data-popup="success")
        .popup__wrap
            button(type="button").popup__close.js_popup_close
                svg(width="20" height="20")
                    use(xlink:href='images/sprite.svg#popup-close')
            .popup-success__inner
                .popup-success__logo
                    svg(width="48" height="39")
                        use(xlink:href='images/sprite.svg#popup-success-logo')
                .popup-success__title Спасибо за заявку
                p.popup-success__descr В ближайшее время с вами свяжется наш специалист для уточнения деталей вашей задачи.
    
    //- поп-ап 'отправить предложение по e-mail'
    .popup.popup-feedback(data-popup="sending")
        .popup__wrap
            button(type="button").popup__close.js_popup_close
                svg(width="20" height="20")
                    use(xlink:href='images/sprite.svg#popup-close')
            form.popup-feedback__form.js_popup_sending_form
                .popup-feedback__title Отправить на почту
                .popup-feedback__fields
                    label.popup-feedback__field.field
                        input(type="text" placeholder="Электронная почта" name="Электронная почта").js_input_email
                button.popup-feedback__btn.btn.btn--main.js_form_btn Отправить
                p.popup-feedback__confirm Нажимая на кнопку «Отправить», Вы даете согласие на обработку персональных данных в соответствии с <a href="#">Политикой конфиденциальности</a>.
    
    //- поп-ап 'обратный звонок'
    .contact-us.js_contact_us

        .contact-us__top

            button(type="button").contact-us__close.js_contact_us_close
                svg(width="20" height="20")
                    use(xlink:href='images/sprite.svg#popup-close')

            .contact-us__title Свяжитесь с нами
        
        .contact-us__body

            .contact-us__items

                a(href="#").contact-us-item.js_contact_us_close
                    .contact-us-item__icon
                        svg(width="34" height="34")
                            use(xlink:href='images/sprite.svg#contact-us-phone')
                    .contact-us-item__name Позвонить

                a(href="#").contact-us-item.js_contact_us_close
                    .contact-us-item__icon
                        svg(width="44" height="44")
                            use(xlink:href='images/sprite.svg#contact-us-email')
                    .contact-us-item__name Написать

                a(href="#").contact-us-item.js_contact_us_close
                    .contact-us-item__icon
                        svg(width="34" height="34")
                            use(xlink:href='images/sprite.svg#contact-us-chat')
                    .contact-us-item__name Онлайн-чат
            
            .contact-us__socials

                a(href="#" target="_blank").contact-us-social.js_contact_us_close
                    .contact-us-social__icon.contact-us-social__icon-tg
                        img(src="images/contact-us-tg.svg", alt="")
                    .contact-us-social__name Telegram

                a(href="#" target="_blank").contact-us-social.js_contact_us_close
                    .contact-us-social__icon.contact-us-social__icon-wa
                        svg(width='31' height='31')
                            use(xlink:href='images/sprite.svg#contact-us-wa')
                    .contact-us-social__name WhatsApp
    
    //- поп-ап 'развёрнутый план'
    .offer-side-popup(data-popup="offer-side-popup")
        .offer-side-popup__wrap

            button(type="button").offer-side-popup__close.js_popup_close
                svg(width="20" height="20")
                    use(xlink:href='images/sprite.svg#popup-close')
            
            .offer-side-popup__cnt

                .offer-side-popup__item(data-item="1").js_offer_side_popup_item.active
                    img(src="images/offer-side-item-img-1.jpg", alt="План объекта")
                        
                .offer-side-popup__item(data-item="2").js_offer_side_popup_item
                    img(src="images/offer-side-item-img-2.jpg", alt="План этажа")

            .offer-side-popup__tabs
                button(type="button" data-tab="1").offer-side-popup__tab.js_offer_side_popup_tab.active План объекта
                button(type="button" data-tab="2").offer-side-popup__tab.js_offer_side_popup_tab План этажа
            
            button(type="button").offer-side-popup__sizeoff.js_popup_close
                svg(width="18" height="18")
                    use(xlink:href='images/sprite.svg#popup-sizeoff')
    
    //- поп-ап 'просомтр фото'
    .img-viewer.js_img_viewer

        .img-viewer__wrap

            button(type="button").img-viewer__close.js_img_viewer_close
                svg(width="20" height="20")
                    use(xlink:href='images/sprite.svg#popup-close')
            
            .img-viewer__thumbs.js_img_viewer_thumbs

                .img-viewer__thumbs-swiper.js_img_viewer_thumbs_swiper.swiper
                    .swiper-wrapper
                        //- сюда будут динамически загругружаться слайды
                        
                        
            .img-viewer__slider

                .img-viewer__slider-swiper.js_img_viewer_slider_swiper.swiper
                    .swiper-wrapper
                        //- сюда будут динамически загругружаться слайды

                .swiper-button-prev
                    svg(width='10' height='17')
                        use(xlink:href='images/sprite.svg#slider-arrow')
                .swiper-button-next
                    svg(width='10' height='17')
                        use(xlink:href='images/sprite.svg#slider-arrow')
            
            .img-viewer__caption.js_img_viewer_caption

            button(type="button").img-viewer__sizeoff.js_img_viewer_close
                svg(width="18" height="18")
                    use(xlink:href='images/sprite.svg#popup-sizeoff')
    
    //- поп-ап 'cookies'
    .cookies.js_cookies
        .container
            .cookies__wrap
                .cookies__top
                    .cookies__img
                        img(src="images/cookies.svg", alt="cookies")
                    .cookies__title Cookies
                p.cookies__descr Мы используем cookie-файлы для наилучшего представления нашего сайта.<br>Продолжая использовать сайт, вы даете согласие с использованием cookie-файлов.
                .cookies__buttons
                    button(type="button").cookies__btn.btn.btn--main.js_cookies_confirm Принять
                    a(href="page-cookies.html").cookies__link Подробнее