<!DOCTYPE html>
<html lang="en">

{% assign folderName = page.folderName %}
{% assign file = page.fileName %}
{% assign lang = page.lang %}
{% assign dataToShow = site.data[folderName][lang][file] %}


<head>
    <!-- Mobile Specific Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="theme-color" content="#000000" />
    <meta name="robots" content="noindex" />

    <!-- meta character set -->
    <meta charset="UTF-8">

    {% include seo.html %}

    <link rel="canonical" href="{{site.url | append:  page.url}}">

    <!-- Favicon-->
    <link rel="shortcut icon" href="{{ site.favicon | relative_url }}">
    <link rel="apple-touch-icon" href="{{ site.favicon | relative_url }}" />


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

    <link rel="stylesheet" href="{{ '/assets/css/home.css' | relative_url }}">
    <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
    <link rel="stylesheet" href="/assets/css/HomePageblog.css">
    <link rel="stylesheet" href="{{ '/assets/css/footer.css' | relative_url }}">

    {%- include google-analytics.html -%}


    <title>
        {{dataToShow.title }}
    </title>



    <style>
        .pageHeaderBg {
            background-color: #F8F9FA !important;
        }

        .list-group-item {
            background-color: transparent !important;
            border: none !important
        }
    </style>

    {% include Monumetric/Monumetric.html %}

</head>

<body>
    {%- include header/index.html -%}


    {% assign folderName = page.folderName %}
    {% assign file = page.fileName %}
    {% assign lang = page.lang %}
    {% assign dataToShow = site.data[folderName][lang][file] %}



    <div style="padding-top: 100px;">
        <div class="container">
            <div class="pageHeading text-center">
                <h1 class="heading font-weight-bolder pb-">
                    {{dataToShow.h1}}</h1>
                {%- if dataToShow.h2 != "" -%}
                <h2>
                    {{dataToShow.h2}}</h2>
                {%- endif -%}
            </div>
        </div>
        <div class="container-fluid" id="containerWd">
            <div class="serachSection">
                <div class="position-relative serachBox">
                    <form action="/word-meaning" id='form' method="GET">
                        <input type="text" class="txtBox" value='' name="search" maxlength="15" required>
                        <input type="submit" class="serachBtn" id="serach" value>
                    </form>
                </div>
            </div>
            <div class="dictionary-word-container p-0 container" style="position: relative;top: 50px;">
                <div class="padding15px">
                    <div class="medium-heading">
                        <h2 class="font-weight-bolder">Dictionary</h2>
                    </div>
                    <div class="dictionary">
                        <div class="dictionary-item">
                            <span class="font16px">TWL06 (US, Canada and Thailand)</span>

                            <span class="found-word"></span>
                            <span class="word-score"></span>
                        </div>
                        <div class="dictionary-item">
                            <span class="font16px">SOWPODS (UK and Others)</span>

                            <span class="found-word"></span>
                            <span class="word-score"></span>
                        </div>

                        <div class="dictionary-item">
                            <span class="font16px">Enable (Words with Friends)</span>

                            <span class="found-word"></span>
                            <span class="word-score"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container p-0" id="defintions" style="margin-top: 100px;">
                <h3><b>Defintion(s)</b></h3>
                <br>
                <span id="loaderMeaning" style="font-size: 20px">Loading &nbsp; </span>
                <div class="spinner-border" id="loaderMeaning1"></div>
                <h2 id="err" style="display: none;">No Definition Found!</h2>
                <h4 id="noun" style="display: none;"><b>Noun</b></h4>
                <h4 id="verb" style="display: none;"><b>Verb</b></h4>
                <h4 id="adj" style="display: none;"><b>Adjective</b></h4>
                <h4 id="adv" style="display: none;"><b>Adverb</b></h4>
            </div>
        </div>
    </div>

    {%- assign langen = "en" -%}
    {%- if site.data[folder][langen][file].categories -%}
    {% assign categories= site.data[folder][langen][file].categories %}
    {%- else -%}
    {% assign categories= page.categories %}
    {%- endif -%}
    {%- if site.data[folder][langen][file].tags -%}
    {% assign tags= site.data[folder][langen][file].tags %}
    {%- else -%}
    {% assign tags= page.tags %}
    {%- endif -%}
    {%- if categories.size> 0 or tags.size>0-%}
    {%- include section/related_categories_post.html -%}
    {%- else -%}
    {%- include section/recent_posts.html -%}
    {% endif %}


    {% include adBlocker/adBlocker.html %}
    {%- include footer/index.html -%}

    {%- include script.html -%}
    <script src="/assets/js/scrabbleDictonary.js"></script>
</body>

</html>