{% extends 'base.html.twig' %}

{% set metaRegionName = region.name %}
{% for _region in region.subRegions|filter(_region => _region.isAlias and _region.parentRegion.id == region.id) %}
    {% set metaRegionName = metaRegionName ~ ' and ' ~ _region.name %}
{% endfor %}

{% set metaTitle = title is defined ? title : 'Genshin Impact interactive map - Genshin World' %}
{#{% set metaDesc = 'Genshin Impact interactive map of ' ~ metaRegionName ~ '. Find every interest points, events, chests, monsters and materials of Teyvat. Up to date with latest patch.' %}#}
{% set metaDesc = 'Genshin Impact interactive map of ' ~ metaRegionName ~ '. Find every interest points, events, chests, monsters and materials of Teyvat.' %}

{% block meta %}
    <meta name="title" content="{{ metaTitle }}">
    <meta name="description" content="{{ metaDesc }}">

    {% if not region.isActive %}
        <meta name="robots" content="noindex, nofollow">
        <meta name="googlebot" content="noindex, nofollow">
    {% endif %}

    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ url('fo_region_show', { 'slug': regionSlug }) }}">
    <meta property="og:title" content="{{ metaTitle }}">
    <meta property="og:description" content="{{ metaDesc }}">
    <meta property="og:image" content="https://genshin-world.com/og.jpg">

    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="{{ url('fo_region_show', { 'slug': regionSlug }) }}">
    <meta property="twitter:title" content="{{ metaTitle }}">
    <meta property="twitter:description" content="{{ metaDesc }}">
    <meta property="twitter:image" content="https://genshin-world.com/og.jpg">

    <link rel="canonical" href="{{ url('fo_region_show', { 'slug': region.slug }) }}">
{% endblock %}

{% block leftPanel %}
    {% include 'woldmap/_leftPannel.html.twig' %}
{% endblock %}

{% block body %}
    <h1 id="map-title">{{ metaTitle }}</h1>
    <div id="worldmap-container" class="sp_grid__container" data-region-id="{{ region.slug }}" data-region-name="{{ region.name }}" data-region-width="{{ region.gridWidth }}" data-region-height="{{ region.gridHeight }}" {% if anchor %}data-anchor="{{ anchor }}"{% endif %}>
        {% for row in 1..region.gridHeight %}
            {% for col in 1..region.gridWidth %}
                <div id="grid-{{ grid[row][col]['id'] }}" class="sp_grid__cell">
                    {% set idHash = 'map_g' ~ grid[row][col]['id'] ~ '_v' ~ version %}

                    <img id="{{ idHash }}" class="sp_grid__map" {% if grid[row][col]['map_data']['map'].id is not null %}data-src="{{ asset(assets.map.upload_path ~ grid[row][col]['map_data']['map'].file) }}"{% endif %} src="{{ asset(assets.map[region.mapBackground]) }}" alt="{{ region.name }}" draggable="false">
                    <div class="sp_grid__node-container">
                        {% if nodes['grid_' ~ grid[row][col]['id']] is defined %}
                            {% for _node in nodes['grid_' ~ grid[row][col]['id']] %}

                                {% include 'woldmap/_node.html.twig' with {'node': _node} %}
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        {% endfor %}
    </div>
    <div id="grid-zoom-container">
        <span>+</span>
        <input id="grid-zoom-controller" type="range" min="0" step="2">
        <span>-</span>
    </div>
    <template id="template_tooltip">
        <div class="sp_tooltip__wrapper" hidden>
            {% if is_granted('ROLE_CONTRIBUTOR') %}
                <div class="sp_tooltip__action-left-wrapper">
                    <form action="" class="sp_tooltip__action sp_node__edit-form sp_form__xhr" method="post">
                        <button class="sp_button" type="submit">
                            <span>Edit node</span>
                        </button>
                    </form>
                    <form action="" class="sp_tooltip__action sp_node_delete-form sp_form__xhr" method="post">
                        <button class="sp_button sp_icon__container" data-type="cancel" type="submit">
                            <img src="{{ asset(assets.img.delete) }}" alt="delete node">
                        </button>
                    </form>
                    {% if is_granted('ROLE_ADMIN') %}
                        <button class="sp_button sp_icon__container sp_node__calc-anchor">
                            <img src="{{ asset(assets.img.ui ~ 'location.png') }}" alt="delete node">
                        </button>
                    {% endif %}
                </div>
            {% endif %}
            <div class="sp_tooltip__action-right-wrapper">
                <button class="sp_button sp_tooltip__action sp_node__set-display" data-node-id="" data-is-hidden="0">
                    <span>Hide Pin</span>
                    <span>Show Pin</span>
                </button>
            </div>
            <div class="sp_tooltip">
                <h4 class="sp_tooltip__header">
                    <span></span>
                    {% if is_granted('ROLE_CONTRIBUTOR') %}<span></span>{% endif %}
                </h4>
                <div class="sp_tooltip__body"></div>
                <div class="sp_tooltip__footer" hidden>
                    <div>Screenshots :</div>
                    <div class="sp_tooltip__screenshot-container"></div>
                </div>
            </div>
            <div class="sp_tooltip__cursor"></div>
        </div>
    </template>
    {#<template id="template_radio-input">#}
    {#    <label class="sp_radio__input-wrapper">#}
    {#        <span class="sp_radio__input-icon"></span>#}
    {#        <span class="sp_radio__input-mark"></span>#}
    {#        <span class="sp_radio__input-label"></span>#}
    {#        <input name type value>#}
    {#    </label>#}
    {#</template>#}
{% endblock %}