{% extends 'layout.html' %}
{% block content -%}
<div class="page-wrapper">
    <!-- ******Header****** -->
    <header id="header" class="header">
        <div class="container">
            <div class="float-left">
                <div class="branding">
                    <h1 class="logo">
                        <a href="index.html">
                            <span aria-hidden="true" class="icon_documents_alt icon"></span>
                            <span class="text-bold">{{ product_title | raw }}</span>
                        </a>
                    </h1>
                </div><!--//branding-->
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">{{ index_title }}</a></li>
                    <li class="breadcrumb-item">{{ section_title | raw }}</li>
                    <li class="breadcrumb-item active">{{ title | raw }}</li>
                </ol>
            </div>
            <div class="float-right">
                <div class="searchbar">
                    <input class="search_input" type="text" name="" placeholder="{{ search_title }}">
                    <a href="#" class="search_icon"><i class="fas fa-search"></i></a>
                </div>
            </div>
            <div class="clearfix"></div>
        </div><!--//container-->
    </header><!--//header-->
    <div class="doc-wrapper">
        <div class="container">
            <div class="doc-body row">
                <div class="doc-content col-md-8 order-1">
                    <div class="content-inner">
                            {% if content %}
                            <section class="doc-section">
                                <h2 class="section-title">{{ title | raw }}</h2>
                                <div class="section-block">
                                    {{ content | raw }}
                                </div>
                            </section><!--//doc-section-->
                            {% endif %}

                            {% for item in items %}
                                <section class="doc-section">
                                    <h2 id="{{ item.id }}" class="section-title">{{ item.title | raw }}</h2>
                                    <div class="section-block">
                                        {{ item.content | raw }}
                                    </div>
                                </section><!--//doc-section-->
                            {% endfor %}

                            {% if nextItem %}
                            <ul class="list list-inline">
                                <li class="list-inline-item">
                                    <a class="btn btn-cta btn-primary" href="{{ nextItem.href }}">
                                        <svg class="svg-inline--fa fa-eye fa-w-18" aria-hidden="true" data-prefix="fas" data-icon="eye" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M569.354 231.631C512.969 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-75.162 0-136-60.827-136-136 0-75.162 60.826-136 136-136 75.162 0 136 60.826 136 136 0 75.162-60.826 136-136 136zm104-136c0 57.438-46.562 104-104 104s-104-46.562-104-104c0-17.708 4.431-34.379 12.236-48.973l-.001.032c0 23.651 19.173 42.823 42.824 42.823s42.824-19.173 42.824-42.823c0-23.651-19.173-42.824-42.824-42.824l-.032.001C253.621 156.431 270.292 152 288 152c57.438 0 104 46.562 104 104z"></path></svg>
                                        {{ nextItem.title | raw }}
                                    </a>
                                </li>
                            </ul>
                            {% endif %}
                    </div><!--//content-inner-->
                    <div class="content-search">
                        <section class="doc-section">
                            <h2 class="section-title">{{ result_title }}</h2>
                            <div class="section-block">
                            </div>
                        </section><!--//doc-section-->
                    </div>
                </div><!--//doc-content-->
                <div class="doc-sidebar col-md-4 order-0 d-none d-md-flex">
                    <div id="doc-nav" class="doc-nav">
	                    <nav id="doc-menu" class="nav doc-menu flex-column">
                            {% for item in navigation %}
                                <a class="nav-link" href="{{ item.href }}">{{ item.title | raw }}</a>
                                {% for subitem in item.items %}
                                    <a class="nav-link" id="{{ subitem.id }}" parent="{{ subitem.nativeParent }} " href="{{ subitem.href }}"
                                       style="margin-left:{{ (subitem.level - 1) * 15 }}px;font-size:15px;">{{ subitem.title | raw }}</a>
                                {% endfor %}
                            {% endfor %}
	                    </nav><!--//doc-menu-->
                    </div>
                </div><!--//doc-sidebar-->
            </div><!--//doc-body-->              
        </div><!--//container-->
    </div><!--//doc-wrapper-->
</div><!--//page-wrapper-->
{% endblock %}