{% extends "layouts/base.njk" %}
{% set title = "Врачи клиники Доктор Смайл" %}
{% set description = "Опытные стоматологи клиники Dr Smile. Запишитесь на приём онлайн." %}
{% set activePage = "doctors" %}

{% block extraHead %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "MedicalClinic",
  "name": "Dr Smile",
  "url": "{{ siteUrl | default('https://dr-smile.ru') }}",
  "department": [
    {
      "@type": "Physician",
      "name": "{{ doctorName | default('Имя врача') }}",
      "medicalSpecialty": "{{ doctorSpecialty | default('Стоматология') }}"
    }
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "name": "Врачи клиники Dr Smile",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "url": "{{ firstDoctorUrl | default('https://dr-smile.ru/vrachi/') }}",
      "name": "{{ firstDoctorName | default('Имя врача') }}"
    }
  ]
}
</script>
{% endblock %}

{% block breadcrumbs %}
    <div class="breadcrumbs-wrapper">
      <nav class="breadcrumbs container" aria-label="Хлебные крошки">
        <a href="/">Главная</a>
        <span>/</span>
        <span>Врачи</span>
      </nav>
    </div>
{% endblock %}

{% block content %}
<section class="page-doctors">
  <div class="container page-doctors__inner">

    {# H1 #}
    <h1 class="page-title">Врачи клиники Доктор Смайл</h1>

    {# БИТРИКС: форма фильтра → умный фильтр bitrix:catalog.smart.filter или кастомный компонент.
       Поля: name (text); speciality / clinic — чекбоксы в выпадающей панели (как Figma 123:1279, триггер 117:1067);
       для GET: name="speciality[]", "clinic[]"; «Все» без name — только сброс выбора в UI. #}
    {# Фильтр поиска врачей #}
    <form class="doctors-filter" method="get" aria-label="Фильтр врачей">
      <div class="doctors-filter__field doctors-filter__field--search">
        <label for="doctor-filter-name" class="visually-hidden">Фамилия или имя врача</label>
        <input type="text" id="doctor-filter-name" name="name" placeholder="Фамилия или имя..." autocomplete="name">
        <button type="submit" class="btn-search" aria-label="Поиск">
          {# Иконка как vuesax/linear/search-normal в Figma (node 22-771): линза + рукоятка, viewBox 24 #}
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#919191" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M21 21L16.65 16.65" stroke="#919191" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>
      <div
        class="doctors-filter__field doctors-filter__field--multi"
        x-data="doctorsFilterMulti()"
        @click.outside="open = false"
        role="group"
        aria-labelledby="doctor-filter-speciality-trigger"
      >
        <button
          type="button"
          class="doctors-filter__trigger"
          id="doctor-filter-speciality-trigger"
          @click="toggle()"
          :aria-expanded="open.toString()"
          aria-controls="doctor-filter-speciality-panel"
        >
          <span class="doctors-filter__trigger-main">
            <span class="doctors-filter__trigger-label">Специализация</span>
            <span class="doctors-filter__trigger-count" x-show="count > 0" x-text="'(' + count + ')'">(0)</span>
          </span>
          <span class="doctors-filter__chevron" :class="{ 'is-open': open }" aria-hidden="true">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </span>
        </button>
        <div
          class="doctors-filter__panel"
          id="doctor-filter-speciality-panel"
          x-show="open"
          x-cloak
        >
          {# БИТРИКС: цикл по свойству специализаций ИБ; value — символьный код или ID #}
          <label class="doctors-filter__option">
            <input type="checkbox" class="doctors-filter__native-check" data-doctors-filter-all checked @change="onAllChange($event)">
            <span class="doctors-filter__check" aria-hidden="true"></span>
            <span class="doctors-filter__option-text">Все</span>
          </label>
          <label class="doctors-filter__option">
            <input type="checkbox" class="doctors-filter__native-check" name="speciality[]" value="chief_doctor" @change="onOptionChange()">
            <span class="doctors-filter__check" aria-hidden="true"></span>
            <span class="doctors-filter__option-text">Главный врач</span>
          </label>
          <label class="doctors-filter__option">
            <input type="checkbox" class="doctors-filter__native-check" name="speciality[]" value="ceo" @change="onOptionChange()">
            <span class="doctors-filter__check" aria-hidden="true"></span>
            <span class="doctors-filter__option-text">Генеральный директор</span>
          </label>
          <label class="doctors-filter__option">
            <input type="checkbox" class="doctors-filter__native-check" name="speciality[]" value="orthopedist" @change="onOptionChange()">
            <span class="doctors-filter__check" aria-hidden="true"></span>
            <span class="doctors-filter__option-text">Стоматолог-ортопед</span>
          </label>
          <label class="doctors-filter__option">
            <input type="checkbox" class="doctors-filter__native-check" name="speciality[]" value="surgeon" @change="onOptionChange()">
            <span class="doctors-filter__check" aria-hidden="true"></span>
            <span class="doctors-filter__option-text">Стоматолог-хирург</span>
          </label>
          <label class="doctors-filter__option">
            <input type="checkbox" class="doctors-filter__native-check" name="speciality[]" value="implantologist" @change="onOptionChange()">
            <span class="doctors-filter__check" aria-hidden="true"></span>
            <span class="doctors-filter__option-text">Стоматолог-имплантолог</span>
          </label>
          <label class="doctors-filter__option">
            <input type="checkbox" class="doctors-filter__native-check" name="speciality[]" value="pediatric" @change="onOptionChange()">
            <span class="doctors-filter__check" aria-hidden="true"></span>
            <span class="doctors-filter__option-text">Врач-стоматолог детский</span>
          </label>
          <label class="doctors-filter__option">
            <input type="checkbox" class="doctors-filter__native-check" name="speciality[]" value="dentist" @change="onOptionChange()">
            <span class="doctors-filter__check" aria-hidden="true"></span>
            <span class="doctors-filter__option-text">Врач-стоматолог</span>
          </label>
          <label class="doctors-filter__option">
            <input type="checkbox" class="doctors-filter__native-check" name="speciality[]" value="therapist" @change="onOptionChange()">
            <span class="doctors-filter__check" aria-hidden="true"></span>
            <span class="doctors-filter__option-text">Стоматолог-терапевт</span>
          </label>
          <label class="doctors-filter__option">
            <input type="checkbox" class="doctors-filter__native-check" name="speciality[]" value="orthodontist" @change="onOptionChange()">
            <span class="doctors-filter__check" aria-hidden="true"></span>
            <span class="doctors-filter__option-text">Стоматолог-ортодонт</span>
          </label>
        </div>
      </div>
      <div
        class="doctors-filter__field doctors-filter__field--multi"
        x-data="doctorsFilterMulti()"
        @click.outside="open = false"
        role="group"
        aria-labelledby="doctor-filter-clinic-trigger"
      >
        <button
          type="button"
          class="doctors-filter__trigger"
          id="doctor-filter-clinic-trigger"
          @click="toggle()"
          :aria-expanded="open.toString()"
          aria-controls="doctor-filter-clinic-panel"
        >
          <span class="doctors-filter__trigger-main">
            <span class="doctors-filter__trigger-label">Клиника</span>
            <span class="doctors-filter__trigger-count" x-show="count > 0" x-text="'(' + count + ')'">(0)</span>
          </span>
          <span class="doctors-filter__chevron" :class="{ 'is-open': open }" aria-hidden="true">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </span>
        </button>
        <div
          class="doctors-filter__panel"
          id="doctor-filter-clinic-panel"
          x-show="open"
          x-cloak
        >
          {# БИТРИКС: список клиник из ИБ/HL #}
          <label class="doctors-filter__option">
            <input type="checkbox" class="doctors-filter__native-check" data-doctors-filter-all checked @change="onAllChange($event)">
            <span class="doctors-filter__check" aria-hidden="true"></span>
            <span class="doctors-filter__option-text">Все</span>
          </label>
          <label class="doctors-filter__option">
            <input type="checkbox" class="doctors-filter__native-check" name="clinic[]" value="runovskiy" @change="onOptionChange()">
            <span class="doctors-filter__check" aria-hidden="true"></span>
            <span class="doctors-filter__option-text">Руновский пер. д. 11/13</span>
          </label>
          <label class="doctors-filter__option">
            <input type="checkbox" class="doctors-filter__native-check" name="clinic[]" value="basmannaya" @change="onOptionChange()">
            <span class="doctors-filter__check" aria-hidden="true"></span>
            <span class="doctors-filter__option-text">Новая Басманная ул. д. 29 стр. 1</span>
          </label>
        </div>
      </div>
      {# 768–1440: иконка в квадрате (Figma node 22-1143); >1440 и ≤767 — подпись «Найти» #}
      <button type="submit" class="btn btn--blue doctors-filter__submit" aria-label="Найти">
        <span class="doctors-filter__submit-text">Найти</span>
        <span class="doctors-filter__submit-icon" aria-hidden="true">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </span>
      </button>
    </form>

    {# Сетка карточек; на сайте — вывод из компонента списка #}
    {# БИТРИКС: PAGE_ELEMENT_COUNT / NEWS_COUNT = 9 на страницу. При ≤768px в макете 6 карточек — карточки 7–9 скрываются CSS (.doctors-grid); пагинация считается по 9. Подробно: docs/BITRIX_INTEGRATION.md #}
    <div class="doctors-grid">

      {# БИТРИКС: данные врачей — CIBlockElement::GetList() из инфоблока «Врачи»
         или компонент bitrix:catalog.section с кастомным шаблоном.
         Поля карточки: NAME, PREVIEW_PICTURE, PROPERTY_SPECIALITY,
         PROPERTY_EXPERIENCE, PROPERTY_HELPS, PROPERTY_CLINIC_ADDRESS.
         Весь блок от {% for doctor in doctors %} до {% endfor %} — шаблон одной карточки. #}
      {# БИТРИКС: URL детальной — CHPU элемента, например /vrachi/kagan-mihail/; в вёрстке — /doctors/detail/ #}
      {% set doctorDetailUrl = "/doctors/detail/" %}
      {# Вёрстка: одна карточка по контенту; в проде — цикл по элементам ИБ #}
      {% set doctorRow = {
        name: "Каган Михаил Леонидович",
        spec: "Главный врач, стоматолог-ортопед",
        exp: 15,
        id: 1,
        img: "/images/doctors/doctor-placeholder.png",
        helps: [
          "разрушении и потере зубов",
          "коронках, винирах и протезировании",
          "необходимости восстановить прикус и жевание"
        ],
        clinic: "Новокузнецкая"
      } %}
      {% set doctors = [
        doctorRow, doctorRow, doctorRow, doctorRow, doctorRow,
        doctorRow, doctorRow, doctorRow, doctorRow
      ] %}

      {# БИТРИКС: начало цикла по элементам инфоблока #}
      {% for doctor in doctors %}
      <article class="doctor-card">
        <div class="doctor-card__photo">
          <img
            src="{{ doctor.img }}"
            alt="{{ doctor.name }}"
            width="400"
            height="208"
            loading="lazy"
          >
          <span class="doctor-card__badge">Стаж {{ doctor.exp }} лет</span>
        </div>
        {# Figma 22:826: один блок p-[20px] + column gap 15 — и текст, и кнопки внутри #}
        <div class="doctor-card__info">
          <div class="doctor-card__lead">
            <p class="doctor-card__name"><a href="{{ doctorDetailUrl }}">{{ doctor.name }}</a></p>
            <p class="doctor-card__spec">{{ doctor.spec }}</p>
          </div>
          <div class="doctor-card__helps">
            <p class="doctor-card__helps-title">Помогает при:</p>
            <ul class="doctor-card__helps-list">
              {% for item in doctor.helps %}
              <li>{{ item }}</li>
              {% endfor %}
            </ul>
          </div>
          <p class="doctor-card__clinic">
            <span class="doctor-card__clinic-dot"></span>
            {{ doctor.clinic }}
          </p>
          <div class="doctor-card__actions">
            <a
              href="#modal-appointment"
              class="btn btn--blue"
              data-modal-open="modal-appointment"
              aria-controls="modal-appointment"
              data-doctor-name="{{ doctor.name }}"
              data-doctor-id="{{ doctor.id }}"
            >Записаться</a>
            <a href="{{ doctorDetailUrl }}" class="btn btn--outline">О враче</a>
          </div>
        </div>
      </article>
      {% endfor %}
      {# БИТРИКС: конец цикла по элементам инфоблока #}

    </div>

    <div class="doctors-more">
      {# БИТРИКС: пагинация/подгрузка → параметр PAGE_ELEMENT_COUNT компонента
         или AJAX-подгрузка через навигатор инфоблока #}
      <button type="button" class="btn btn--more">Показать еще</button>
    </div>
  </div>
</section>

{# Карта и промо вне .page-doctors — как doctors_footer_map / doctors_footer_promo перед подвалом (DoctorSmile_2026) #}
<section class="page-doctors__map" aria-label="Карта клиник Dr Smile">
  {% include "components/include_areas/listing-doctors-map.njk" %}
</section>
<section class="page-doctors__promo page-doctors__promo--footer" aria-label="Запись на бесплатный приём">
  {% include "components/include_areas/listing-doctors-promo.njk" %}
</section>

{% endblock %}