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

<head>
    <link rel="icon" type="image/x-icon"
        href="https://cdn.jsdelivr.net/gh/TechShreyash/AnimeDex@main/static/img/favicon.ico">
    <title>Watch {{ TITLE }} - AnimeDex</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="title" content="Watch {{ TITLE }} - AnimeDex">
    <meta name="description"
        content="Watch {{ TITLE }} free anime online and it's latest episodes on AnimeDex. We provide free anime online experience without ads, signing up or downloading.">
    <meta name="keywords"
        content="{{ TITLE }},animedex, anime dex, hindi dub, hindi sub, english dub, watch anime online, free anime, anime stream, anime hd, english sub, kissanime, gogoanime, animeultima, 9anime, 123animes, animefreak, vidstreaming, gogo-stream, animekisa, zoro.to, gogoanime.run, animefrenzy, animekisa">
    <meta name="charset" content="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta name="robots" content="index, follow">
    <meta name="googlebot" content="index, follow">
    <meta name="revisit-after" content="1 days">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Language" content="en">
    <meta property="og:title" content="Watch {{ TITLE }} - AnimeDex">
    <meta property="og:description"
        content="Watch {{ TITLE }} free anime online and it's latest episodes on AnimeDex. We provide free anime online experience without ads, signing up or downloading.">
    <meta property="og:locale" content="en_US">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="AnimeDex">
    <meta property="og:url" content="{{ URL }}">
    <meta itemprop="image" content="https://cdn.jsdelivr.net/gh/TechShreyash/AnimeDex@main/screenshots/home.jpeg">
    <meta property="og:image" content="https://cdn.jsdelivr.net/gh/TechShreyash/AnimeDex@main/screenshots/home.jpeg">
    <meta property="og:image:secure_url"
        content="https://cdn.jsdelivr.net/gh/TechShreyash/AnimeDex@main/screenshots/home.jpeg">
    <meta property="og:image:width" content="650">
    <meta property="og:image:height" content="350">
    <meta property="twitter:title" content="Watch {{ TITLE }} - AnimeDex">
    <meta property="twitter:description"
        content="Watch {{ TITLE }} free anime online and it's latest episodes on AnimeDex. We provide free anime online experience without ads, signing up or downloading.">
    <meta property="twitter:url" content="{{ URL }}">
    <meta property="twitter:card" content="summary">
    <meta name="apple-mobile-web-app-status-bar" content="#202125">
    <meta name="theme-color" content="#202125">
    <link href="https://cdn.jsdelivr.net/gh/TechShreyash/AnimeDex@main/static/css/anime_min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all_min.css">

    <style>
        #cover {
            background-image: url('{{ IMG }}');
        }
    </style>
</head>

<body>
    <header id="head-div">
        <div id="title1">
            <a href="/"><img src="https://cdn.jsdelivr.net/gh/TechShreyash/AnimeDex@main/static/img/header.png"
                    alt="AnimeDex"></a>
        </div>
        <div id="search-div">
            <form action="/search" method='GET'>
                <input type="text" name="query" id="query" placeholder="Search Anime..." required>
                <button type="submit"><i class="fa fa-search"></i>
                </button>
            </form>
        </div>
    </header>
    <section>
        <div id="background">
            <div id="cover"></div>
        </div>
        <div class="anime row">
            <div class="poster col-3">
                <img src="{{ IMG }}">
            </div>
            <div class="details col-6">
                <h1>{{ TITLE }}</h1>
                <div class="mid" style="margin: 20px 0px;">
                    <span class="cbox">HD</span>
                    <span class="cbox">{{ LANG }}</span>
                    <span class="dot"></span>
                    <span class="year">{{ TYPE }}</span>
                </div>
                <div id="watchh" class="mid">
                    <a href="{{ WATCHNOW }}" class="watch-btn">
                        <i class="fa fa-play"></i> Watch Now
                    </a>
                </div>
                <div id="overview3" class="synopsis">
                    SYNOPSIS
                </div>
            </div>
            <div id="info" class="col-3">
                <div class="info-items overview">
                    <span id="overview2" class="item-head">Overview:</span>
                    <span id="overview1" class="item-des">SYNOPSIS</span>
                </div>

                <div class=info-items>
                    <span class="item-head">Other Names:</span>
                    <span class="item-des">{{ OTHER }}</span>
                </div>
                <div class=info-items>
                    <span class="item-head">Episodes:</span>
                    <span class="item-des">{{ TOTAL }}</span>
                </div>
                <div class=info-items>
                    <span class="item-head">Release Year:</span>
                    <span class="item-des">{{ YEAR }}</span>
                </div>
                <div class=info-items>
                    <span class="item-head">Type:</span>
                    <span class="item-des">{{ TYPE }}</span>
                </div>
                <div class=info-items>
                    <span class="item-head">Status:</span>
                    <span class="item-des">{{ STATUS }}</span>
                </div>
                <div class=info-items>
                    <span class="item-head">Studios:</span>
                    <span class="item-des">{{ STUDIO }}</span>
                </div>

                <div class="info-items genre">
                    <span class="item-head">Genres:</span> GENERES
                </div>



            </div>
        </div>
    </section>

    <section id="watch">
        <div class="divo">
            <h2>List Of Episodes:</h2>
            <div class="divo2">
                EPISODES
            </div>
        </div>

    </section>

    <section>
        <div class="divox">
            <h2 id="latest">Similar Animes</h2>
            <div id="latest2">
                DISPLAY_ANIME
            </div>
        </div>
    </section>
    <hr>
    <footer>
        <div>
            <a href="https://github.com/TechShreyash" target="_blank">MADE WITH <i class="fa fa-heart pulse"></i>BY TECH
                SHREYASH</a> <a href="https://TechZBots.t.me" target="_blank">(@TechZBots)</a>
        </div>
    </footer>
    <hr>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const imageObserver = new IntersectionObserver((entries, imgObserver) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        const lazyImage = entry.target;
                        lazyImage.src = lazyImage.dataset.src;
                    }
                })
            });
            const arr = document.querySelectorAll('img.lzy_img');
            arr.forEach((v) => {
                imageObserver.observe(v);
            });
        })
    </script>
</body>

</html>