{% 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="content-section">
        <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>
<div class="preloader">
    <lottie-player src="https://assets4.lottiefiles.com/packages/lf20_t8hs6wpo.json" background="transparent" speed="1"
        style="width: 60px; height: 60px;" loop autoplay></lottie-player>
</div>
<script>
    $(window).on('load', function () {
        $('body').css('overflow', 'hidden');
        setTimeout(() => {
            $('.preloader').fadeOut('slow');
            $('body').css('overflow', 'unset');
        }, 1000)
    })
</script>
<script>
    $(document).ready(function () {
        var height = $(window).height()
        $('.content-section').css('height', height);
        $('.result-section-lattan').css('height', height);
    })
</script>
{% endblock %}