{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<div class="full-container lattan ">
    <!-- <div class="mobile-nav text-white">
        <a href="/back" class="back-button">
            <span class="material-symbols-outlined">
                arrow_back_ios
            </span>
        </a>
        <h4>{{appTitle}}</h4>
    </div> -->
    <div class="search-section">
        <div class="form-outline mb-3">
            <input type="text" id="search-form" class="form-control form-control-lg" />
            <label class="form-label" for="search-form">Search Question</label>
        </div>
        <b class="text-primary" id="result-title">Recommended</b>
    </div>
    <div class="result-section-lattan">
        {% for q in questions %}
        <div class="result-list"
            onclick="window.location.href='{{url_for('user_webview_lattan.lattanResult',qID=q[0])}}'">
            <p class="me-4">{{q[1]}}</p>
            <span class="material-symbols-outlined">
                arrow_forward_ios
            </span>
        </div>
        <hr class="text-secondary">
        {% endfor %}
        <div class="py-2"></div>
    </div>
</div>
<div class="preloader">
    <center>
        <lottie-player src="{{url_for('user_webview_hawsartan.static', filename='images/Logo.json')}}" speed="1.2"
            style="width: 80px; height: 80px;" loop autoplay></lottie-player>
    </center>
</div>
<script>
    $(window).on('load', function () {
        $('body').css('overflow', 'hidden');
        $('.preloader').remove();
        $('body').css('overflow', 'unset');
    })
</script>
<script>
    $(document).ready(function () {
        var height = $(window).height()
        $('.content-section').css('height', height);
        $('.result-section-lattan').css('height', height);
    })
</script>
{% endblock %}