{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<div class="full-container">
    <div class="mobile-nav text-white">
        <a href="/menu" class="back-button">
            <span class="material-symbols-outlined">
                arrow_back_ios
            </span>
        </a>
        <h4>{{cardDetails['card_name_eng']}}</h4>
    </div>
    <div class="content-section" style="overflow-x: hidden; overflow-y: scroll;">
        <div class="image-section text-white">
            <img class="mt-3" src="{{cardDetails['img_path']}}" alt="{{cardDetails['card_name_eng']}}">
            <h3 class="my-2"></h3>
        </div>
        <div class="result-section">
            <div class="card my-3">
                <div class="card-header">
                    <b class="text-primary">Result:</b>
                </div>
                <div class="card-body">
                    {{cardResult['result_mm']}}
                </div>
            </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);
    })
</script>
{% endblock %}