{% extends "base.html.twig" %}
{% block title %}Sitemap | Novamar Insurance{% endblock %}
{% block metas %}	
<meta name="description" content=""/>
	<meta name="keywords" content="novamar insurance sitemap, yacht insurance sitemap"/>
	<meta name="robots" content="{{robots}}" />   
{% endblock %}
{% block css %}
	<!--./ general css -->
	{# <link href="{{asset('css/main.css')}}" rel="stylesheet" media="all"/> #}
	<link rel="stylesheet" href="{{asset('css/responsive-menu.css')}}">
	{{ encore_entry_link_tags('general') }}
	{{encore_entry_link_tags('sitemap')}}
{% endblock %}
{% block body %}
	<div class="outer-wrap">
		<div class="container" role="main" id="main">
			<div class="col-lg-12">
				<h1 class="text-center">Sitemap<small></small></h1>
				<div class="line-orange"></div>
				<br><br>
			</div>
			<div class="row-fluid">
				<div class="content-sitemap row" id="content_sitemap_elements">
					<div class="col-lg-3 col-md-12">
						<div class="content-sitemap-title">
							<h2 class="border-bottom">Pages</h2>
						</div>
						<div id="content-sin-grupo"></div>
					</div>
					<div class="col-lg-9 col-md-12">
						<div class="row">
							<div class="col-lg-12 col-md-12 mb-2">
								<div class="content-sitemap-title">
									<h2 class="border-bottom">Insurance Services</h2>
								</div>
								<div id="content-insurance-services"></div>
							</div>
							<div class="col-12">
								<div class="content-sitemap-title">
									<h2 class="border-bottom">Novamar Insurance Blog</h2>
								</div>
								<div id="content-blog"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<input type="hidden" id="input_sitemap" value="{{sitemap}}">
{% endblock %}
{% block javascript %}
	<script>
        let sitemapData = JSON.parse($('#input_sitemap').val())
        let grupos = [
            'sin-grupo',
            'insurance-services',
            'blog',
        ]
        $(function(){
            grupos.forEach(grupo => {
                $("#content-" + grupo).append(generateElementsByGroup(grupo))
            });
        })

        function generateElementsByGroup(grupo){
            let html = '';
            sitemapData[grupo].forEach(item => {
                let name = (item.split('/').pop()).replaceAll("-", " ");
                if(grupo == 'sin-grupo' && name == ''){
                    name = 'Home';
                }
                name = name[0].toUpperCase() + name.substring(1);
                html+= `<a class="group-element" href="${item}">${name}</a>`;
            });
            return html;
        }
    </script>
{% endblock %}