{% extends "base.html" %}

{%- block content %}


<section class="hero-sub" style="background-image: url(/{{ page.extra.hero_image | safe }})">
    <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="/">{{ page.extra.menu_title_pre }}</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="/{{ page.extra.hero_title | lower }}">{{
                        page.extra.hero_title }}</a>
                </li>
            </ul>
        </nav>
        <div class="hero-sub__content">
            <h1 class="h1 hero-sub__title">
                {{ page.extra.hero_title | safe }}
            </h1>
            <p class="h2-sub_v2 hero-sub__description">
                {{ page.extra.hero_description }}
            </p>

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

<!--    <section class="section-support">-->
<!--        <div class="container section-support__container">-->
<!--            <div class="section-support__item">-->
<!--                <div class="section-support__content">-->
<!--                    <h2 class="h3-normal section-support__title">{{ page.extra.support_card_title_1 | safe }}</h2>-->
<!--                    <div class="section-support__line"></div>-->
<!--                    <p class="p-sm  section-support__description">{{ page.extra.support_card_description_1 | safe }}</p>-->
<!--                </div>-->
<!--                <img class="section-support__img" src="/images/support/email-card-banner.png" alt="img">-->
<!--            </div>-->
<!--            <div class="section-support__item">-->
<!--                <div class="section-support__content">-->
<!--                    <h2 class="h3-normal section-support__title">{{ page.extra.support_card_title_2 | safe }}</h2>-->
<!--                    <div class="section-support__line"></div>-->
<!--                    <p class="p-sm  section-support__description">{{ page.extra.support_card_description_2 | safe }}</p>-->
<!--                </div>-->
<!--                <img class="section-support__img" src="/images/support/faq-card-banner.png" alt="img">-->
<!--            </div>-->
<!--            <div class="section-support__item">-->
<!--                <div class="section-support__content">-->
<!--                    <h2 class="h3-normal section-support__title">{{ page.extra.support_card_title_3 | safe }}</h2>-->
<!--                    <div class="section-support__line"></div>-->
<!--                    <p class="p-sm  section-support__description">{{ page.extra.support_card_description_3 | safe }}</p>-->
<!--                </div>-->
<!--                <img class="section-support__img" src="/images/support/support-channel-banner.png" alt="img">-->
<!--            </div>-->
<!--        </div>-->
<!--    </section>-->

<section class="support-search">
    <div class="container support-search__row">
        <h2 class="h2-sub_v2 support-search__title">{{ page.extra.support_card_title_1 | safe }}</h2>
        <div class="search">
            <label class="search__label" for="inpSearch">
                {% include 'ui/search.html' %}
                <input class="search__input" id="inpSearch" type="text" placeholder="Describe the issue">
            </label>
        </div>
    </div>
</section>
<section class="support-buttons">
    <div class="container support-buttons__row">
        <button class="button button--line">{{ page.extra.hero_buttons.hero_button_1 | safe }}</button>
        <button class="button button--line">{{ page.extra.hero_buttons.hero_button_2 | safe }}</button>
        <button class="button button--line">{{ page.extra.hero_buttons.hero_button_3 | safe }}</button>
        <button class="button button--line">{{ page.extra.hero_buttons.hero_button_4 | safe }}</button>
        <button class="button button--line">{{ page.extra.hero_buttons.hero_button_5 | safe }}</button>
        <button class="button button--line">{{ page.extra.hero_buttons.hero_button_6 | safe }}</button>
        <button class="button button--line">{{ page.extra.hero_buttons.hero_button_7 | safe }}</button>
        <button class="button button--line">{{ page.extra.hero_buttons.hero_button_8 | safe }}</button>
        <button class="button button--line">{{ page.extra.hero_buttons.hero_button_9 | safe }}</button>
        <button class="button button--line">{{ page.extra.hero_buttons.hero_button_10 | safe }}</button>
        <button class="button button--line">{{ page.extra.hero_buttons.hero_button_11 | safe }}</button>
        <button class="button button--line">{{ page.extra.hero_buttons.hero_button_12 | safe }}</button>
    </div>
</section>
<section class="section-social">

    {% include 'section/social-icon.html' %}
</section>
{% include 'section/donate.html' %}


{%- endblock content %}