<!DOCTYPE html>
<html lang="en">
  {{> head}}

  <body>
    <div id="app">
      {{> header-banner}} {{> header}}
      <main class="main">
        {{> breadcrumbs title='Поиск'}}
        <div class="container">
          <div class="content content__search">
            <div class="content-left"></div>
            <div class="content-middle articles-wrapper">
              <div class="section-title">
                <h1 class="section-title__title">Поиск</h1>
              </div>
              <div class="search-form">
                <div class="search-form__wrapper">
                  <div class="search-form__input-wrapper">
                    <input
                      type="text"
                      class="input search-form__input"
                      placeholder="Введите ваш запрос"
                      value="Растения"
                    />
                    <div class="search-form__clear">
                      <svg
                        width="18"
                        height="18"
                        viewBox="0 0 18 18"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <rect
                          x="2.00391"
                          y="15.1746"
                          width="18.6256"
                          height="1.1641"
                          rx="0.582051"
                          transform="rotate(-45 2.00391 15.1746)"
                          fill="#2F2F2F"
                        />
                        <rect
                          x="2.82812"
                          y="2.00339"
                          width="18.6256"
                          height="1.1641"
                          rx="0.582051"
                          transform="rotate(45 2.82812 2.00339)"
                          fill="#2F2F2F"
                        />
                      </svg>
                    </div>
                  </div>
                  <button class="button search-form__button desktop">
                    Найти
                  </button>
                </div>
                <p class="search-form__text">
                  По запросу «растения» найдено 294 результатов
                </p>
                <div class="search-form__selects">
                  <select id="selectSort">
                    <option
                      value="date"
                      data-html="По дате <img src='/icons/sort_bottom.svg' alt />"
                    >
                      По дате
                    </option>
                    <option
                      value="date2"
                      data-html="По дате <img src='/icons/sort_top.svg' alt />"
                    >
                      По дате
                    </option>
                    <option value="rel">По релевантности</option>
                  </select>
                  <select id="selectDate">
                    <option value="date">За все время</option>
                    <option
                      value="date2"
                      data-html="По дате <img src='/icons/sort_top.svg' alt />"
                    >
                      По дате
                    </option>
                    <option value="rel">По релевантности</option>
                  </select>
                  <select id="selectCategory">
                    <option value="date">Все</option>
                    <option
                      value="date2"
                      data-html="По дате <img src='/icons/sort_top.svg' alt />"
                    >
                      По дате
                    </option>
                    <option value="rel">По релевантности</option>
                  </select>
                </div>
                <button class="button search-form__button mobile">Найти</button>
              </div>
              <div class="articles-preview search-preview">
                {{> article-item-horizontal}}{{> article-item-inline}}{{>
                article-item-horizontal}}{{> article-item-inline}}{{>
                article-item-inline}}{{> article-item-horizontal}}{{>
                article-item-horizontal}}{{> article-item-horizontal}}{{>
                article-item-horizontal}}{{> article-item-inline}}
              </div>
              {{> pagination}}
              <div class="articles__spacer-container">
                <div class="articles__spacer"></div>
                <div class="articles__spacer"></div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <footer class="footer">
        <div class="footer-top">
          <div class="container footer__conatiner">
            <div class="footer-top__inner">
              <a href="#" class="logo footer__logo">
                <img src="/images/logo.svg" alt="Агроэксперт" />
              </a>
              <nav class="nav footer__nav">
                <li class="menu-item">
                  <a href="#">Интервью</a>
                </li>
                <li class="menu-item">
                  <a href="#">Партнеры</a>
                </li>
                <li class="menu-item">
                  <a href="#">Рекламодатели</a>
                </li>
                <li class="menu-item">
                  <a href="#">О проекте</a>
                </li>
                <li class="menu-item">
                  <a href="#">Контакты</a>
                </li>
              </nav>
              <div class="footer-top__right">
                <a href="#" class="to-top">
                  <span>Наверх</span>
                  <svg
                    width="9"
                    height="6"
                    viewBox="0 0 9 6"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <rect
                      x="3.69409"
                      y="1.05029"
                      width="1"
                      height="5.22423"
                      transform="rotate(45 3.69409 1.05029)"
                      fill="black"
                    />
                    <rect
                      width="1"
                      height="6"
                      transform="matrix(-0.707107 0.707107 0.707107 0.707107 4.1333 0.525146)"
                      fill="black"
                    />
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <div class="container">
            <div class="footer-bottom__inner">
              <div class="footer-bottom__text desktop">© 2024 АгроЭксперт</div>
              <a href="#" class="footer-bottom__text footer-bottom__link">
                Политика конфиденциальности
              </a>
              <a href="#" class="footer-bottom__text footer-bottom__link">
                Свидетельство о регистрации электронного СМИ
              </a>
              <div class="socials footer__socials">
                <a href="#" class="social-link">
                  <img src="/images/socials_yt.svg" alt="" />
                </a>
                <a href="#" class="social-link">
                  <img src="/images/socials_vk.svg" alt="" />
                </a>
                <a href="#" class="social-link">
                  <img src="/images/socials_tg.svg" alt="" />
                </a>
              </div>

              <div class="footer-bottom__text mobile">© 2024 АгроЭксперт</div>
            </div>
          </div>
        </div>
      </footer>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
