{% include 'overall_header.html' %}

{# include the html code for user POI input if creating POIs is permitted #}
{% if POI_CREATE %}
	{% include '@mot_usermap/usermap_poi_input.html' %}
{% endif %}

{% if not INCLUDED_LEAFLETJS %}
	{% INCLUDECSS '@mot_usermap/leaflet.css' %}
	{% INCLUDECSS '@mot_usermap/MarkerCluster.css' %}
	{% INCLUDECSS '@mot_usermap/MarkerCluster.Default.css' %}
	{% INCLUDECSS '@mot_usermap/usermap.css' %}
	{% INCLUDEJS '@mot_usermap/thirdparty/leaflet.js' %}
	{% INCLUDEJS '@mot_usermap/thirdparty/leaflet.markercluster.js' %}
	{% INCLUDEJS '@mot_usermap/bbcode.js' %}
	{% INCLUDEJS '@mot_usermap/mot_usermap.js' %}
	{% INCLUDEJS '@mot_usermap/mot_usermap_tabs.js' %}
	{% set INCLUDED_LEAFLETJS = true %}
{% endif %}

<div id="page-body" class="page-body">

{% if VIEW_MAP_ALWAYS || (VIEW_MAP_SUBSCRIBED && VALID_USER) || (POI_ENABLED && POI_VIEW) %}
	{% if VIEW_MAP_ALWAYS || VALID_USER || (POI_ENABLED && POI_VIEW) %}
    <div class="card md:my-4 mt-2">
      <div class="flex items-center justify-between card-title">
    		<h2>{{ lang('USERMAP_SEARCHFORM') }}</h2>
    		{% if zeina.collapse_panel %}
    		<div class="collapse-panel zn-collapse-toggle open leading-[0] py-0.5 px-1 hover:cursor-pointer" id="card1-collapse-btn" data-zn-collapse="#zn-card1-collapse">
    			<div class="zn-collapse-open:[transform:rotate(180deg)] transition-all duration-300"><i class="iconify" data-mode="style" data-icon="ri:arrow-down-s-line" data-width="18" data-height="18" aria-hidden="true"></i></div>
    		</div>
    		{% endif %}
    	</div>
    	<div id="zn-card1-collapse" class="zn-collapse w-full overflow-hidden" aria-labelledby="card1-collapse-btn">
    		<div class="md:p-4 md:mt-2 p-2 mt-1 card1-content">
  			  {% include 'usermap_search.html' %}
        </div>
      </div>
    </div>
	{% endif %}

  <div class="card md:my-4 mt-2">
    <div class="flex items-center justify-between card-title">
  		<h2>{{ lang('USERMAP') }}</h2>
  		{% if zeina.collapse_panel %}
  		<div class="collapse-panel zn-collapse-toggle open leading-[0] py-0.5 px-1 hover:cursor-pointer" id="card2-collapse-btn" data-zn-collapse="#zn-card2-collapse">
  			<div class="zn-collapse-open:[transform:rotate(180deg)] transition-all duration-300"><i class="iconify" data-mode="style" data-icon="ri:arrow-down-s-line" data-width="18" data-height="18" aria-hidden="true"></i></div>
  		</div>
  		{% endif %}
  	</div>
  	<div id="zn-card2-collapse" class="zn-collapse w-full overflow-hidden" aria-labelledby="card2-collapse-btn">
  		<div class="md:p-4 md:mt-2 p-2 mt-1 divide-y space-y-4 card2-content">
			  <div id="map_container"></div>
      </div>
    </div>
  </div>

  <div class="card md:my-4 mt-2">
    <div class="flex items-center justify-between card-title">
  		<h2>{{ lang('USERMAP_LEGEND') }}</h2>
  		{% if zeina.collapse_panel %}
  		<div class="collapse-panel zn-collapse-toggle open leading-[0] py-0.5 px-1 hover:cursor-pointer" id="card3-collapse-btn" data-zn-collapse="#zn-card3-collapse">
  			<div class="zn-collapse-open:[transform:rotate(180deg)] transition-all duration-300"><i class="iconify" data-mode="style" data-icon="ri:arrow-down-s-line" data-width="18" data-height="18" aria-hidden="true"></i></div>
  		</div>
  		{% endif %}
  	</div>
  	<div id="zn-card3-collapse" class="zn-collapse w-full overflow-hidden" aria-labelledby="card3-collapse-btn">
  		<div class="md:p-4 md:mt-2 p-2 mt-1 divide-y space-y-4 card3-content text-sm">
			  {% if VALID_USER || VIEW_MAP_ALWAYS %}
  				<div id="map-legend">
  					<p class="usermap_group_legend">{{ MAP_LEGEND }}</p>
  					<p>{{ lang('USERMAP_LEGEND_TEXT') }}<br><br>{{ MAP_USERS }}</p>
  				</div>
  			{% endif %}
  			{% if POI_ENABLED && POI_VIEW %}
  				{% if VALID_USER || VIEW_MAP_ALWAYS %}
  					<hr>
  				{% endif %}
  				<p>{{ lang('POI_LEGEND_TITLE') }}</p>
  				<div>
  					<p>{{ POI_LEGEND }}</p>
  				</div>
  				<p>{{ POI_NUMBER }}</p>
  			{% endif %}
      </div>
    </div>
  </div>

	<p class="usermap-thanks text-secondary text-sm text-center">{{ lang('USERMAP_CREDENTIALS') }}<a href="http://www.geonames.org" target="_blank">www.geonames.org</a></p>

{% else %}

  <div class="card md:my-4 mt-2">
    <div class="flex items-center justify-between card-title">
  		<h2>{{ lang('USERMAP') }}</h2>
  		{% if zeina.collapse_panel %}
  		<div class="collapse-panel zn-collapse-toggle open leading-[0] py-0.5 px-1 hover:cursor-pointer" id="card4-collapse-btn" data-zn-collapse="#zn-card4-collapse">
  			<div class="zn-collapse-open:[transform:rotate(180deg)] transition-all duration-300"><i class="iconify" data-mode="style" data-icon="ri:arrow-down-s-line" data-width="18" data-height="18" aria-hidden="true"></i></div>
  		</div>
  		{% endif %}
  	</div>
  	<div id="zn-card4-collapse" class="zn-collapse w-full overflow-hidden" aria-labelledby="card4-collapse-btn">
  		<div class="md:p-4 md:mt-2 p-2 mt-1 divide-y space-y-4 card2-content">
			  <div>{{ lang('USERMAP_NOT_AUTHORIZED') }}</div>
      </div>
    </div>
  </div>

{% endif %}
</div>

<div class="stat-block md:my-4 mt-2 card">
	<div class="flex items-center justify-between card-title">
		<h2>{L_INFO}</h2>
		{% if zeina.collapse_panel %}
		<div class="collapse-panel zn-collapse-toggle open leading-[0] py-0.5 px-1 hover:cursor-pointer" id="stat-collapse-btn" data-zn-collapse="#zn-stat-collapse">
			<div class="zn-collapse-open:[transform:rotate(180deg)] transition-all duration-300"><i class="iconify" data-mode="style" data-icon="ri:arrow-down-s-line" data-width="18" data-height="18" aria-hidden="true"></i></div>
		</div>
		{% endif %}
	</div>
	<div id="zn-stat-collapse" class="zn-collapse w-full overflow-hidden" aria-labelledby="stat-collapse-btn">
		<div class="md:p-4 md:mt-2 p-2 mt-1 divide-y space-y-4 stat-content">
			<div class="online-list flex gap-4">
				<div class="mt-0.5 size-8"><i class="iconify" data-mode="style" data-icon="ph:key" data-width="32" data-height="32" aria-hidden="true"></i></div>
				<div class="online-details">
					<h3 class="online-title text-sm font-semibold">{{ lang('USERMAP_PERM_OVERVIEW') }}</h3>
					<p class="online-content text-secondary text-sm mt-0.5">
						{{ DISPLAY_PERMISSIONS  }}
					</p>
				</div>
      </div>
    </div>
  </div>
</div>

{# Handover of all necessary data to the js script #}
<script>
	var motUsermap = {};
	motUsermap.tab = {{ TAB }};

	motUsermap.jsProfileLink = {{ PROFILE_LINK }};
	// Permissions
	motUsermap.jsMapViewAlways = {{ VIEW_MAP_ALWAYS }}
	motUsermap.jsPoiEnabled = {{ POI_ENABLED }};
	motUsermap.jsPoiView = {{ POI_VIEW }};
	motUsermap.jsPoiCreate = {{ POI_CREATE }};

	motUsermap.defaultPoiIconSize = '{{ DEFAULT_POI_ICON_SIZE|e('js') }}';
	motUsermap.defaultPoiIconAnchor = '{{ DEFAULT_POI_ICON_ANCHOR|e('js') }}';
	motUsermap.jsMapConfig = {{ MAPCONFIG }};
	motUsermap.jsAuthUser = {{ VALID_USER }};
	motUsermap.jsCurrentUser = {{ USER }};
	motUsermap.jsMapResult = "{{ lang('MAP_RESULT')|e('js') }}";
	motUsermap.jsMapNoResult = "{{ lang('MAP_NORESULT')|e('js') }}";
	motUsermap.jsMapKm = "{{ lang('MAP_KM')|e('js') }}";
	motUsermap.jsMemberResult = "{{ lang('MEMBERNAME_RESULT')|e('js') }}";
	motUsermap.jsMemberNoResult = "{{ lang('MEMBERNAME_NORESULT')|e('js') }}";
	motUsermap.jsStreetDesc = "{{ lang('STREET_DESC')|e('js') }}";
	motUsermap.jsTopoDesc = "{{ lang('TOPO_DESC')|e('js') }}";
	motUsermap.jsSatDesc = "{{ lang('SAT_DESC')|e('js') }}";
	motUsermap.jsDisplayBBCode = {{ DISPLAY_BBCODE }};
</script>

{# if user is permitted to see members the following data must be handed over #}
{% if VIEW_MAP_ALWAYS || VIEW_MAP_SUBSCRIBED %}
	<script>
		motUsermap.jsMemberData = {{ MEMBERDATA }};
		motUsermap.jsMemberLayers = {{ MEMBER_LAYERDATA }};
	</script>
{% endif %}

{# if POIs are enabled the following data must be handed over #}
{% if POI_ENABLED %}
	<script>
		motUsermap.poiIconPath = {{ POI_ICON_PATH }};
		motUsermap.poiIconPath = motUsermap.poiIconPath.slice(0,motUsermap.poiIconPath.lastIndexOf('/')+1); // prevent misconfigured(?) (mobile) browsers from not getting images

		motUsermap.errorMsg = '{{ ERROR_MSG|e('js') }}';
		motUsermap.jsAddressResult = "{{ lang('ADDRESS_RESULT')|e('js') }}";
		motUsermap.jsAddressNoResult = "{{ lang('ADDRESS_NORESULT')|e('js') }}";

		motUsermap.jsPoiData = {{ POIDATA }};
		motUsermap.jsPoiResult = "{{ lang('POINAME_RESULT')|e('js') }}";
		motUsermap.jsPoiNoResult = "{{ lang('POINAME_NORESULT')|e('js') }}";
		motUsermap.jsPoiLayers = {{ POI_LAYERDATA }};
		motUsermap.jsAjaxCall = '{{ AJAX_CALL|e('js') }}';
	</script>
{% endif %}

{% include 'overall_footer.html' %}