<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        object {
            position: absolute;
        }

        .on {
            stroke: green;
            cursor: pointer;
        }

        span {
            display: inline-block;
            width: 50vh;
            height: 50vh;
            background-size: cover;
        }

        svg {
            width: 100%;
            height: 100%;
        }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1>search for kanji</h1>
    <form action="{{ url_for('submit_kanji') }}" method="get">
        <input type="text" name="kanji">
        <input type="submit">
    </form>
    <span>
        {{svg|safe}}
    </span>

    <h2>
        {{name}}
    </h2>

    <script>
        var allParts = $("svg > g > g *[kvg\\:element]");

        allParts.on({
            mouseenter: function () {
                allParts.removeClass("on");
                $(this).addClass("on");

            },
            mouseleave: function () {
                $(this).removeClass("on");
            },
        });

        allParts.click(function() {
            window.location = "{{ url_for('submit_kanji') }}" + "?kanji=" + ((typeof $(this).attr("kvg:original") === typeof undefined) ? ((typeof $(this).attr("kvg:element") === typeof undefined) ? $(this).attr("kvg:phon") : $(this).attr("kvg:element")) : $(this).attr("kvg:original") );
        });

    </script>
</body>
</html>