{% extends 'base.html' %}

{% block meta_description %}
  <meta name="description" content="{{ trans(key='faq_content', lang=lang) }}">
{% endblock %}

{% block content %}
<section class="hero-sub" style="background-image: url(/faq/hero_image.png)" >
  <div class="container hero-sub__container">
    <nav class="bred-crum">
      <ul class="bred-crum__row">
        <li class="bred-crum__item">
          <a class="nav-bred bred-crum__link" href="/">  {{ trans(key='home_title', lang=lang) }} </a>
        </li>
        <li class="bred-crum__item">
                    <span class="nav-bred">
                        >
                    </span>
        </li>
        <li class="bred-crum__item">
          <a class="nav-bred bred-crum__link bred-crum--active"
             href="/faq">{{ trans(key='faq_title', lang=lang) }}</a>
        </li>
      </ul>
    </nav>
    <div class="hero-sub__content">
      <h1 class="h1 hero-sub__title">
        {{ trans(key='faq_title', lang=lang) }}
      </h1>


    </div>
  </div>
</section>



<section class="search">
  <div class="container search__container">
    <label class="search__label" for="inpSearch">
      {% include 'ui/search.html' %}
      <input class="search__input" id="inpSearch" type="text" placeholder="Search">
    </label>
  </div>
</section>
<section class="faq-page-list">
  <div class="container faq-page-list__row">
    <h2 class="h2-inter faq-page-list__title">{{ trans(key='faq_title', lang=lang) }}</h2>
    {%- for term in terms -%}

    <ul class="faq-page-list__table">
      <li class="faq-page-list__table-item"><a class="h5-boold faq-page-list__table-title" href="{{term.permalink}}">{{term.name}} questions</a></li>
      {%- for faq_page in term.pages | sort(attribute="extra.order") -%}
        <li class="faq-page-list__table-item"><a class="h5 faq-page-list__table-link" href="{{ faq_page.permalink }}">{{ faq_page.title }}</a></li>
      {%- endfor -%}

    </ul>
    {%- endfor -%}

    <script>

      let faqs = [
          {%- for term in terms -%}
          {%- for faq_page in term.pages -%}
          {
            "title": "{{ faq_page.title | escape(json=true) }}",
            "description": "{{ faq_page.description | escape(json=true) }}",
            "url": "{{ faq_page.permalink }}"

          }{%- if not loop.last -%},{%- endif -%}
          {%- endfor -%}
          {%- if not loop.last -%},{%- endif -%}
          {%- endfor -%}
        ]

    </script>

    <script>
      console.log(faqs);

      let inpSear = document.getElementById('inpSearch')
      let inSearchOut = document.querySelector('.faq-page-list__table')
      let inSearchOutRow = document.querySelector('.faq-page-list__row')
      function decodeHtmlEntities(str) {
        return str.replace(/&amp;/g, '&')
                .replace(/&lt;/g, '<')
                .replace(/&gt;/g, '>')
                .replace(/&quot;/g, '"')
                .replace(/&apos;/g, "'")
                .replace(/&#x27;/g, "'")
                .replace(/&#39;/g, "'")
                .replace(/&nbsp;/g, ' ')
                .replace(/&#([0-9]{1,4});/g, function(match, numStr) {
                  return String.fromCharCode(parseInt(numStr, 10));
                })
                .replace(/&#[xX]([A-Fa-f0-9]{1,4});/g, function(match, hexStr) {
                  return String.fromCharCode(parseInt(hexStr, 16));
                });
      }

      function cleateLi123(title, linkA){
        const li = document.createElement('li')
       li.classList.add('faq-page-list__table-item')

        const link = document.createElement('a')
        link.classList.add('h5', 'faq-page-list__table-link')
        link.href = decodeHtmlEntities(linkA)
        link.innerText = decodeHtmlEntities(title)
        li.append(link)

        return li
      }

      inpSear.addEventListener('keyup', ()=> {
        inSearchOutRow.innerHTML = ''
        let out = document.createElement('ul')
        out.classList.add('faq-page-list__table')
        inSearchOutRow.append(out)
        out.innerHTML = 'Loading...'

        inpSear.value ? setTimeout(()=>{
          out.innerHTML = ''
          faqs.map(item => {

            let DecodlowTitle =  decodeHtmlEntities(item.title)
            let lowTitle = DecodlowTitle.toLowerCase()
            let newInput = inpSear.value.toLowerCase()
            if(lowTitle.includes(newInput)){


              out.append(cleateLi123(item.title, item.url))
            }
          })
        }, 800) : location.reload()

      })
    </script>

  </div>
</section>

<section class="faq-page-footer">
  <div class="container faq-page-footer__row">
    <h2 class="h2-inter faq-page-footer__title">{{ trans(key='help_request', lang=lang) }}</h2>
  </div>
  {% include 'section/social-icon.html' %}
</section>
{% include 'section/donate.html' %}



{% endblock content %}